|
@@ -1,11 +1,12 @@
|
|
|
-import React, { PureComponent, Fragment } from 'react';
|
|
|
-import {apiUrl} from '@/utils/sldconfig.js';
|
|
|
+import React, { PureComponent, Fragment } from "react";
|
|
|
+import { apiUrl } from "@/utils/sldconfig.js";
|
|
|
+import { emojiRegex } from "@/utils/regex";
|
|
|
+import { message } from "antd";
|
|
|
|
|
|
export default class SldUEditor extends PureComponent {
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
- this.state = {
|
|
|
- };
|
|
|
+ this.state = {};
|
|
|
}
|
|
|
|
|
|
componentDidMount() {
|
|
@@ -13,38 +14,80 @@ export default class SldUEditor extends PureComponent {
|
|
|
}
|
|
|
|
|
|
componentWillReceiveProps(nextProps, nextContext) {
|
|
|
- if(nextProps.getContentFlag&&!this.props.getContentFlag){
|
|
|
+ if (nextProps.getContentFlag && !this.props.getContentFlag) {
|
|
|
let con = UE.getEditor(nextProps.id).getContent();
|
|
|
this.props.getEditorContent(con);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
- UE.delEditor(this.props.id)
|
|
|
+ UE.delEditor(this.props.id);
|
|
|
}
|
|
|
|
|
|
initEditor = () => {
|
|
|
- const {id,initEditorContent} = this.props;
|
|
|
+ const { id, initEditorContent } = this.props;
|
|
|
console.info();
|
|
|
- const ueEditor = UE.getEditor(id,{
|
|
|
- serverUrl: `${apiUrl}v3/oss/ueditor/upload?configPath=config.json&storeId=`+localStorage.getItem('storeId'),
|
|
|
+ const ueEditor = UE.getEditor(id, {
|
|
|
+ serverUrl:
|
|
|
+ `${apiUrl}v3/oss/ueditor/upload?configPath=config.json&storeId=` +
|
|
|
+ localStorage.getItem("storeId"),
|
|
|
});
|
|
|
- ueEditor.ready((editor)=>{
|
|
|
- if(!editor){
|
|
|
+ ueEditor.ready((editor) => {
|
|
|
+ if (!editor) {
|
|
|
UE.delEditor(id);
|
|
|
this.initEditor();
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
if (initEditorContent) {
|
|
|
UE.getEditor(id).setContent(initEditorContent);
|
|
|
}
|
|
|
+
|
|
|
+ // 监听输入内容变化
|
|
|
+ ueEditor.addListener("contentChange", () => {
|
|
|
+ const content = ueEditor.getContentTxt(); // 纯文本
|
|
|
+ if (this.hasEmoji(content)) {
|
|
|
+ message.warn("监测到输入表情符号,已自动去除");
|
|
|
+ ueEditor.body.innerHTML = ueEditor.body.innerHTML.replace(
|
|
|
+ emojiRegex,
|
|
|
+ ""
|
|
|
+ );
|
|
|
+ ueEditor.focus();
|
|
|
+ const range = ueEditor.selection.getRange();
|
|
|
+ const body = ueEditor.body;
|
|
|
+
|
|
|
+ // 找到最后一个文本节点或者元素节点
|
|
|
+ let lastNode = body.lastChild;
|
|
|
+
|
|
|
+ // 如果最后一个是元素节点,尝试找到它的最后一个文本节点
|
|
|
+ function getLastTextNode(node) {
|
|
|
+ if (node.nodeType === 3) return node; // 文本节点
|
|
|
+ if (!node.hasChildNodes()) return null;
|
|
|
+ return getLastTextNode(node.lastChild);
|
|
|
+ }
|
|
|
+
|
|
|
+ const lastTextNode = getLastTextNode(lastNode) || lastNode;
|
|
|
+
|
|
|
+ // 如果找到文本节点,光标放在文本末尾
|
|
|
+ if (lastTextNode && lastTextNode.nodeType === 3) {
|
|
|
+ range.setStart(lastTextNode, lastTextNode.nodeValue.length);
|
|
|
+ } else {
|
|
|
+ // 否则放在最后元素后面
|
|
|
+ range.setStartAfter(lastNode);
|
|
|
+ }
|
|
|
+
|
|
|
+ range.collapse(true);
|
|
|
+ range.select();
|
|
|
+ }
|
|
|
+ });
|
|
|
}
|
|
|
- })
|
|
|
- }
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ hasEmoji = (str) => {
|
|
|
+ return emojiRegex.test(str);
|
|
|
+ };
|
|
|
|
|
|
render() {
|
|
|
- const {id} = this.props
|
|
|
- return(
|
|
|
- <div id={id} name="content" type="text/plain"></div>
|
|
|
- )
|
|
|
+ const { id } = this.props;
|
|
|
+ return <div id={id} name="content" type="text/plain" />;
|
|
|
}
|
|
|
}
|