2020-08-06

king

2020-08-06 b77c5e22f1ff192d9b09dda8d2376ba40641451c

 src/templates/zshare/codemirror/index.jsx

@@ -28,7 +28,8 @@
    value: '',      // 实时内容
    options: null,  // mode : text/javascript、text/x-mysql ; theme : cobalt - 黑底
    fullScreen: false,
    style: null
    style: null,
    display: true
  }

  UNSAFE_componentWillMount () {
@@ -78,35 +79,49 @@
    this.setState({options: {...options, fullScreen: !fullScreen}, fullScreen: !fullScreen})
  }

  changeSize = () => {
  changeSize = (size) => {
    let _style = null
    if (size === 14) {
      _style = {fontSize: '14px', lineHeight: '25px'}
    } else if (size === 16) {
      _style = {fontSize: '16px', lineHeight: '28px'}
    } else if (size === 18) {
      _style = {fontSize: '18px', lineHeight: '32px'}
    } else if (size === 20) {
      _style = {fontSize: '20px', lineHeight: '34px'}
    }

    // 切换字体大小，刷新编辑器窗口，解决调整后的选择区域错乱问题
    this.setState({style: _style, display: false, editor: null, defaultVal: this.state.value}, () => {
      this.setState({display: true})
    })
  }

  render() {
    const { defaultVal, options, fullScreen, style } = this.state
    const { defaultVal, options, fullScreen, style, display } = this.state
    const menu = (
      <Menu>
        <Menu.Item
          style={!style || style.fontSize === '14px' ? {backgroundColor: '#bae7ff'} : ''}
          onClick={() => {this.setState({style: {fontSize: '14px', lineHeight: '25px'}})}}
          onClick={() => {this.changeSize(14)}}
        >
          <span style={{padding: '0 10px 0px 5px'}}>14px</span>
        </Menu.Item>
        <Menu.Item
          style={style && style.fontSize === '16px' ? {backgroundColor: '#bae7ff'} : ''}
          onClick={() => {this.setState({style: {fontSize: '16px', lineHeight: '28px'}})}}
          onClick={() => {this.changeSize(16)}}
        >
          <span style={{padding: '0 10px 0px 5px'}}>16px</span>
        </Menu.Item>
        <Menu.Item
          style={style && style.fontSize === '18px' ? {backgroundColor: '#bae7ff'} : ''}
          onClick={() => {this.setState({style: {fontSize: '18px', lineHeight: '32px'}})}}
          onClick={() => {this.changeSize(18)}}
        >
          <span style={{padding: '0 10px 0px 5px'}}>18px</span>
        </Menu.Item>
        <Menu.Item
          style={style && style.fontSize === '20px' ? {backgroundColor: '#bae7ff'} : ''}
          onClick={() => {this.setState({style: {fontSize: '20px', lineHeight: '34px'}})}}
          onClick={() => {this.changeSize(20)}}
        >
          <span style={{padding: '0 10px 0px 5px'}}>20px</span>
        </Menu.Item>
@@ -120,7 +135,7 @@
        {fullScreen ? <Dropdown overlay={menu} placement="bottomRight">
          <Icon type="font-size" />
        </Dropdown> : null}
        <CodeMirror
        {display ? <CodeMirror
          className="code-mirror-area"
          value={defaultVal}
          options={options}
@@ -128,7 +143,7 @@
            this.setState({editor, value})
            this.props.onChange(value)
          }}
        />
        /> : null}
      </div>
    )
  }