2022-10-17

king

2022-10-17 e8edfdadb561cd83bf6e1c3e00d55b8cc2aee6d5

 src/menu/components/code/sandbox/editorcode/index.jsx

@@ -1,10 +1,9 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Icon, Modal, Tabs } from 'antd'
import { Modal, Tabs, message } from 'antd'
import { FormOutlined } from '@ant-design/icons'

import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import asyncComponent from '@/utils/asyncComponent'
import './index.scss'

@@ -18,10 +17,10 @@
  }

  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    visible: false,
    html: '',
    css: ''
    css: '',
    js: ''
  }

  shouldComponentUpdate (nextProps, nextState) {
@@ -34,18 +33,19 @@
    this.setState({
      visible: true,
      html: config.html || '',
      css: config.css || ''
      css: config.css || '',
      js: config.js || '',
    })
  }

  verifySubmit = () => {
    const { config } = this.props
    const { html, css } = this.state
    const { html, css, js } = this.state

    this.setState({
      visible: false
    })
    this.props.updateConfig({...config, html, css})
    this.props.updateConfig({...config, html, css, js})
  }

  onHtmlChange = (val) => {
@@ -60,29 +60,43 @@
    })
  }

  onJsChange = (val) => {
    if (/document\.getElementsByTagName/g.test(val)) {
      message.warning('为防止代码冲突，js中不可使用document.getElementsByTagName方法!')
      return
    }

    this.setState({
      js: val
    })
  }

  render () {
    const { visible, dict, html, css } = this.state
    const { visible, html, css, js } = this.state

    return (
      <div style={{display: 'inline-block'}}>
        <Icon title="代码编辑" style={{color: 'purple'}} type="form" onClick={() => this.trigger()} />
        <FormOutlined title="代码编辑" style={{color: 'purple'}} onClick={() => this.trigger()} />
        <Modal
          wrapClassName="popview-modal code-sand-box-code-editor"
          title="内容编辑"
          visible={visible}
          width={950}
          maskClosable={false}
          okText={dict['model.submit']}
          okText="提交"
          onOk={this.verifySubmit}
          onCancel={() => { this.setState({ visible: false }) }}
          destroyOnClose
        >
          <Tabs>
            <TabPane tab="HTML" key="HTML">
              <CodeMirror mode="text/xml" value={html} onChange={this.onHtmlChange} />
              <CodeMirror mode="text/xml" theme="cobalt" value={html} onChange={this.onHtmlChange} />
            </TabPane>
            <TabPane tab="CSS" key="CSS">
              <CodeMirror mode="text/css" value={css} onChange={this.onCssChange} />
              <CodeMirror mode="text/css" theme="cobalt" value={css} onChange={this.onCssChange} />
            </TabPane>
            <TabPane tab="JS" key="JS">
              <CodeMirror mode="text/javascript" theme="cobalt" value={js} onChange={this.onJsChange} />
            </TabPane>
          </Tabs>
        </Modal>