| | |
| | | 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' |
| | |
| | | } |
| | | |
| | | state = { |
| | | dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | visible: false, |
| | | html: '', |
| | | css: '' |
| | | css: '', |
| | | js: '' |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | |
| | | 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) => { |
| | |
| | | }) |
| | | } |
| | | |
| | | 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, dict, 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="内容编辑" |
| | |
| | | > |
| | | <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> |