2021-12-22

king

2021-12-22 bd1dfc9e6c9b9f8076ca2783ce598e0936b4c664

 src/templates/zshare/codemirror/index.jsx

@@ -1,11 +1,14 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Icon, Dropdown, Menu } from 'antd'
import { Dropdown, Menu } from 'antd'
import { FullscreenOutlined, FullscreenExitOutlined, FontSizeOutlined } from '@ant-design/icons'

import {UnControlled as CodeMirror} from 'react-codemirror2'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/mode/sql/sql'
import 'codemirror/mode/xml/xml'
import 'codemirror/mode/css/css'
import 'codemirror/addon/display/fullscreen.js'

import 'codemirror/addon/display/fullscreen.css'
@@ -26,9 +29,9 @@
    editor: null,   // code对象
    defaultVal: '', // 初始值
    value: '',      // 实时内容
    options: null,  // mode : text/javascript、text/x-mysql ; theme : cobalt - 黑底
    options: null,  // mode : text/xml, text/css, text/javascript、text/x-mysql ; theme : cobalt - 黑底
    fullScreen: false,
    style: null,
    style: {fontSize: '18px', lineHeight: '32px'},
    display: true
  }

@@ -89,6 +92,10 @@
      _style = {fontSize: '18px', lineHeight: '32px'}
    } else if (size === 20) {
      _style = {fontSize: '20px', lineHeight: '34px'}
    } else if (size === 22) {
      _style = {fontSize: '22px', lineHeight: '36px'}
    } else if (size === 24) {
      _style = {fontSize: '24px', lineHeight: '40px'}
    }

    // 切换字体大小，刷新编辑器窗口，解决调整后的选择区域错乱问题
@@ -125,15 +132,27 @@
        >
          <span style={{padding: '0 10px 0px 5px'}}>20px</span>
        </Menu.Item>
        <Menu.Item
          style={style && style.fontSize === '22px' ? {backgroundColor: '#bae7ff'} : ''}
          onClick={() => {this.changeSize(22)}}
        >
          <span style={{padding: '0 10px 0px 5px'}}>22px</span>
        </Menu.Item>
        <Menu.Item
          style={style && style.fontSize === '24px' ? {backgroundColor: '#bae7ff'} : ''}
          onClick={() => {this.changeSize(24)}}
        >
          <span style={{padding: '0 10px 0px 5px'}}>24px</span>
        </Menu.Item>
      </Menu>
    )

    return (
      <div className="code-mirror-wrap" style={fullScreen ? style : null}>
        {!fullScreen ? <Icon type="fullscreen" onClick={this.fullScreenChange}/> : null}
        {fullScreen ? <Icon type="fullscreen-exit" onClick={this.fullScreenChange}/> : null}
        {!fullScreen ? <FullscreenOutlined onClick={this.fullScreenChange}/> : null}
        {fullScreen ? <FullscreenExitOutlined onClick={this.fullScreenChange}/> : null}
        {fullScreen ? <Dropdown overlay={menu} placement="bottomRight">
          <Icon type="font-size" />
          <FontSizeOutlined />
        </Dropdown> : null}
        {display ? <CodeMirror
          className="code-mirror-area"