155 lines
4.8 KiB
JavaScript
155 lines
4.8 KiB
JavaScript
import React, { Component } from 'react';
|
|
import './index.less';
|
|
|
|
import Editor from 'wangeditor';
|
|
|
|
export default class KindEditor extends Component {
|
|
defaultValueHead = `<div style='font-size:14px !important;line-height:22px !important;margin-bottom: -15px !important;word-break: break-word !important;'>`;
|
|
defaultValueFoot = '</div>';
|
|
editor = Editor;
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = { editorContent: '', isActive: false };
|
|
}
|
|
|
|
/**
|
|
* 清空内容
|
|
*/
|
|
onClear = () => {
|
|
this.editor.txt.clear();
|
|
this.editor.config.focus = false;
|
|
this.setState({
|
|
isActive: false,
|
|
editorContent: '',
|
|
});
|
|
};
|
|
|
|
/**
|
|
* 回现代码
|
|
*/
|
|
onCashBack = () => {
|
|
let { cashBackText } = this.props;
|
|
if (!!!cashBackText) {
|
|
return;
|
|
}
|
|
this.editor.txt.html(`${cashBackText}`);
|
|
this.editor.config.focus = true;
|
|
};
|
|
|
|
/**
|
|
* 获得焦点
|
|
*/
|
|
onFocus = () => {
|
|
this.editor.config.focus = true;
|
|
this.setState({
|
|
isActive: true,
|
|
});
|
|
};
|
|
|
|
componentDidMount() {
|
|
const elemMenu = this.refs.editorElemMenu;
|
|
const elemBody = this.refs.editorElemBody;
|
|
if (this.editor) return
|
|
this.editor = new Editor(elemMenu, elemBody);
|
|
// // 使用 onchange 函数监听内容的变化，并实时更新到 state 中
|
|
this.editor.config.onchange = (html) => {
|
|
let htmlStr = this.editor.txt.html();
|
|
// console.log('htmlStr ---', htmlStr);
|
|
if (htmlStr?.indexOf('<div style=') < 0) {
|
|
htmlStr = this.defaultValueHead + htmlStr + this.defaultValueFoot;
|
|
}
|
|
let isActive = false;
|
|
if (this.state.editorContent) {
|
|
isActive = true;
|
|
}
|
|
this.setState(
|
|
{
|
|
// editorContent: editor.txt.text()
|
|
editorContent: htmlStr,
|
|
isActive: isActive,
|
|
},
|
|
() => {
|
|
this.props.onChange(htmlStr);
|
|
}
|
|
);
|
|
};
|
|
this.editor.config.onfocus = () => {
|
|
this.setState({
|
|
isActive: true,
|
|
});
|
|
};
|
|
this.editor.config.onblur = () => {
|
|
this.setState({
|
|
isActive: false,
|
|
});
|
|
};
|
|
|
|
this.editor.config.menus = [
|
|
// 'head', // 标题
|
|
// 'bold', // 粗体
|
|
// 'fontSize', // 字号
|
|
// 'fontName', // 字体
|
|
// 'italic', // 斜体
|
|
// 'underline', // 下划线
|
|
// 'strikeThrough', // 删除线
|
|
'foreColor', // 文字颜色
|
|
// 'backColor', // 背景颜色
|
|
// 'link', // 插入链接
|
|
'list', // 列表
|
|
// 'justify', // 对齐方式
|
|
// 'quote', // 引用
|
|
// 'emoticon', // 表情
|
|
// 'image', // 插入图片
|
|
// 'table', // 表格
|
|
// 'video', // 插入视频
|
|
'code', // 插入代码
|
|
'undo', // 撤销
|
|
// 'redo', // 重复
|
|
];
|
|
// this.editor.customConfig.uploadImgShowBase64 = true;
|
|
// 取消自动 focus
|
|
this.editor.config.focus = false;
|
|
this.editor.config.pasteFilterStyle = true; // 样式过滤
|
|
this.editor.config.pasteIgnoreImg = true; // 如果复制的内容有图片又有文字，则只粘贴文字，不粘贴图片
|
|
this.editor.config.placeholder = '请输入';
|
|
this.editor.create();
|
|
}
|
|
|
|
render() {
|
|
const { isActive } = this.state;
|
|
const { bodyHeight, bodyWidth, borderRadius } = this.props;
|
|
return (
|
|
<div
|
|
className={`text-area ${isActive && 'kind-editor-active-box'}`}
|
|
style={{
|
|
borderRadius: borderRadius,
|
|
}}>
|
|
<div
|
|
ref="editorElemMenu"
|
|
className="editorelem-menu"
|
|
style={{
|
|
width: bodyWidth,
|
|
borderTopLeftRadius: borderRadius,
|
|
borderTopRightRadius: borderRadius,
|
|
}}></div>
|
|
<div
|
|
ref="editorElemBody"
|
|
className="editorelem-body"
|
|
style={{
|
|
height: bodyHeight,
|
|
width: bodyWidth,
|
|
borderBottomLeftRadius: borderRadius,
|
|
borderBottomRightRadius: borderRadius,
|
|
}}></div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
KindEditor.defaultProps = {
|
|
bodyHeight: 320,
|
|
bodyWidth: '100%',
|
|
borderRadius: '4px',
|
|
};
|