💪 optimize: 优化代码
This commit is contained in:
parent
ede24a6c30
commit
469c648c14
|
@ -1,65 +1,59 @@
|
|||
import React from 'react';
|
||||
import Editor from 'wangeditor';
|
||||
import './index.less';
|
||||
import React from "react"
|
||||
import Editor from "wangeditor"
|
||||
import "./index.less"
|
||||
export default class wangEditor extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
super(props)
|
||||
this.state = {
|
||||
editorHtml: '',
|
||||
editorHtml: "",
|
||||
count: 0
|
||||
};
|
||||
}
|
||||
}
|
||||
componentDidMount() {
|
||||
let self = this;
|
||||
const editor = new Editor('#wangeditorDom');
|
||||
this.setState({ editor });
|
||||
editor.config.colors = ['#696969', '#9093a2', '#fgddbb', '#e3e7eb'];
|
||||
editor.config.pasteText = true;
|
||||
let self = this
|
||||
const editor = new Editor("#wangeditorDom")
|
||||
this.setState({ editor })
|
||||
editor.config.colors = ["#696969", "#9093a2", "#fgddbb", "#e3e7eb"]
|
||||
editor.config.pasteText = true
|
||||
// 设置编辑区域高度为 500px
|
||||
editor.config.height = 200;
|
||||
editor.config.showFullScreen = false;
|
||||
editor.config.menus = [
|
||||
'bold',
|
||||
'foreColor',
|
||||
'italic',
|
||||
'indent',
|
||||
'link',
|
||||
'justify'
|
||||
];
|
||||
editor.config.height = 200
|
||||
editor.config.showFullScreen = false
|
||||
editor.config.menus = ["bold", "foreColor", "italic", "indent", "link", "justify"]
|
||||
|
||||
// 注意,先配置 height ,再执行 create()
|
||||
// 注意,先配置 height ,再执行 create()
|
||||
editor.config.onchange = function (newHtml) {
|
||||
var text = editor.txt.text();
|
||||
var text = editor.txt.text()
|
||||
if (text.length == 0) {
|
||||
//没有文字
|
||||
self.props.setEdittext('');
|
||||
self.props.setEdittext("")
|
||||
}
|
||||
if (text.length > self.props.limitLength) {
|
||||
let str = text.slice(0, self.props.limitLength);
|
||||
self.setState({ editorHtml: str });
|
||||
editor.txt.html(str);
|
||||
self.props.setEdittext(str);
|
||||
return;
|
||||
let str = text.slice(0, self.props.limitLength)
|
||||
self.setState({ editorHtml: str })
|
||||
editor.txt.html(str)
|
||||
self.props.setEdittext(str)
|
||||
return
|
||||
}
|
||||
self.setState({ count: text.length });
|
||||
self.setState({ editorHtml: newHtml });
|
||||
self.props.setEdittext(newHtml);
|
||||
};
|
||||
self.setState({ count: text.length })
|
||||
self.setState({ editorHtml: newHtml })
|
||||
self.props.setEdittext(newHtml)
|
||||
}
|
||||
|
||||
editor.create();
|
||||
editor.create()
|
||||
//列表悬浮富文本
|
||||
editor.txt.html(this.props.text);
|
||||
const clr = setTimeout(() => {
|
||||
editor.txt.html(this.props.text)
|
||||
clearTimeout(clr)
|
||||
}, 500)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='countBox_par'>
|
||||
<div id='wangeditorDom' style={{ width: this.props.width }}></div>
|
||||
<p className='countBox'>
|
||||
{this.state.count + '/' + this.props.limitLength}
|
||||
</p>
|
||||
<div className="countBox_par">
|
||||
<div id="wangeditorDom" style={{ width: this.props.width }}></div>
|
||||
<p className="countBox">{this.state.count + "/" + this.props.limitLength}</p>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -42,7 +42,10 @@ export default class wangEditor extends React.Component {
|
|||
|
||||
editor.create()
|
||||
//列表悬浮富文本
|
||||
editor.txt.html(this.props.text)
|
||||
const clr = setTimeout(() => {
|
||||
editor.txt.html(this.props.text)
|
||||
clearTimeout(clr)
|
||||
}, 500)
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
@ -56,7 +56,7 @@ export default ({ data }) => {
|
|||
<p className="form-note">您可在支付宝的个人信息中查看【支付宝账号】</p>
|
||||
<img
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/zfb-red-but.png"
|
||||
class="but"
|
||||
className="but"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue