fix:wangeditor版本冲突bug修复

src/modules/teach-tool/components/QuestionEditor.jsx

@@ -50,8 +50,8 @@ class QuestionEditor extends Component {
 
   static getDerivedStateFromProps(nextProps, prevState) {
     return {
-      detailInfo: nextProps.detailInfo
-    }
+      detailInfo: nextProps.detailInfo,
+    };
   }
 
   shouldComponentUpdate(nextProps, nextState) {
@@ -62,10 +62,9 @@ class QuestionEditor extends Component {
       });
     }
     if (blanksList !== this.state.blanksList) {
-      console.log("+++++++", blanksList)
       this.setState({
-        blanksList
-      })
+        blanksList,
+      });
     }
     return true;
   }
@@ -94,7 +93,6 @@ class QuestionEditor extends Component {
       this.editorRoot.txt.html(
         /^\<p/.test(content) ? content : `<p>${content}</p>`
       );
-    this.editorRoot.change && this.editorRoot.change();
   };
 
   renderEditor() {
@@ -104,12 +102,12 @@ class QuestionEditor extends Component {
       `#editor${editorId}_tabbar`,
       `#editor${editorId}_content`
     );
-    editorRoot.customConfig.menus = [];
-    editorRoot.customConfig.uploadImgMaxSize = 1 * 1024 * 1024;
-    editorRoot.customConfig.customAlert = function (info) {
+    editorRoot.config.menus = [];
+    editorRoot.config.uploadImgMaxSize = 1 * 1024 * 1024;
+    editorRoot.config.customAlert = function (info) {
       message.warning(/1M/.test(info) ? "图片大于1M，请使用图片上传" : info);
     };
-    editorRoot.customConfig.customUploadImg = function (files, insert) {
+    editorRoot.config.customUploadImg = function (files, insert) {
       // files 是 input 中选中的文件列表
       // insert 是获取图片 url 后，插入到编辑器的方法
       UploadOss.uploadBlobToOSS(files[0], window.random_string(16)).then(
@@ -118,10 +116,11 @@ class QuestionEditor extends Component {
         }
       );
     };
-    editorRoot.customConfig.zIndex = 999;
-    editorRoot.customConfig.pasteFilterStyle = false;
+    editorRoot.config.zIndex = 999;
+    editorRoot.config.placeholder = "";
+    editorRoot.config.pasteFilterStyle = false;
     // 自定义处理粘贴的文本内容
-    editorRoot.customConfig.pasteTextHandle = function (content) {
+    editorRoot.config.pasteTextHandle = function (content) {
       if (content == "" && !content) return "";
       var str = content;
       str = str.replace(/<xml>[\s\S]*?<\/xml>/gi, "");
@@ -137,32 +136,35 @@ class QuestionEditor extends Component {
       return str;
     };
 
-    let prevList = []
+    let prevList = [];
 
     let counter = 0;
-    const isEdit = getParameterByName('id');
+    const isEdit = getParameterByName("id");
     if (isEdit) {
       const stemDom = document.getElementsByClassName("add-fill-line");
-      prevList = [...stemDom].map(item => item.id)
-      localStorage.setItem('gap_ques_prevList', JSON.stringify(prevList));
+      prevList = [...stemDom].map((item) => item.id);
+      localStorage.setItem("gap_ques_prevList", JSON.stringify(prevList));
 
-      setTimeout(function () {
-        const divHeight = document.getElementById(`editor${editorId}_content`)
-          .firstChild.offsetHeight;
-        if (divHeight > 30) {
-          this.setState({ isShowSingleInput: false });
-        } else {
-          this.setState({ isShowSingleInput: true });
-        }
-      }.bind(this))
+      setTimeout(
+        function () {
+          const divHeight = document.getElementById(`editor${editorId}_content`)
+            .firstChild.offsetHeight;
+          if (divHeight > 30) {
+            this.setState({ isShowSingleInput: false });
+          } else {
+            this.setState({ isShowSingleInput: true });
+          }
+        }.bind(this)
+      );
 
       if (counter === 0) {
-        this.props.changeBlankCount(stemDom)
+        this.props.changeBlankCount(stemDom);
       }
     }
 
-    editorRoot.customConfig.onchange = (html) => {
-      const conLen = html.replace(/<(?!img|input).*?>/g, "").length;
+    editorRoot.config.onchange = (html) => {
+      html = html.replace(/<(?!img|input).*?>/g, "");
+      const conLen = html.length;
       counter++;
       const { focusFlag } = this.state;
       const textLength = editorRoot.txt.text().replace(/\&nbsp\;/gi, " ")
@@ -178,14 +180,17 @@ class QuestionEditor extends Component {
       } else {
         this.setState({ isShowSingleInput: true });
       }
-      if (this.state.isGapFilling && this.state.contentType === "QUESTION_STEM") {
+      if (
+        this.state.isGapFilling &&
+        this.state.contentType === "QUESTION_STEM"
+      ) {
         const stemHtml = this.transferStemDocument(html);
-        var _blanksList = stemHtml.getElementsByClassName("add-fill-line")
-        const ids = [..._blanksList].map(item => item.id);
+        var _blanksList = stemHtml.getElementsByClassName("add-fill-line");
+        const ids = [..._blanksList].map((item) => item.id);
 
-        const isEdit = getParameterByName('id');
+        const isEdit = getParameterByName("id");
         if (isEdit && counter === 1) {
-          const prev = localStorage.getItem('gap_ques_prevList');
+          const prev = localStorage.getItem("gap_ques_prevList");
           prevList = prev && JSON.parse(prev);
         }
 
@@ -193,25 +198,31 @@ class QuestionEditor extends Component {
         if (prevList && ids) {
           idx = this.getNewArr(prevList, ids);
           const oldLen = prevList.length;
-
-          idx = idx >= oldLen ? idx - oldLen : idx
+          idx = idx >= oldLen ? idx - oldLen : idx;
         }
 
         prevList = [...ids];
 
-        this.setState({ blanksList: _blanksList }, () => this.props.changeBlankCount(_blanksList, idx))
+        this.setState({ blanksList: _blanksList }, () =>
+          this.props.changeBlankCount(_blanksList, idx)
+        );
       }
       this.setState(
-        { contentLength, visiblePlacehold: conLen === 0 && !focusFlag },
+        {
+          contentLength,
+          visiblePlacehold:
+            (conLen === 0 || (conLen === 1 && html === " ")) && !focusFlag,
+        },
         () => {
           onChange && onChange(html, this.state.contentLength);
         }
       );
     };
 
-    editorRoot.customConfig.onblur = (html) => {
-      const conLen = html.replace(/<(?!img|input).*?>/g, "").length;
-      editorRoot.change && editorRoot.change();
+    editorRoot.config.onblur = (html) => {
+      html = html.replace(/<(?!img|input).*?>/g, "");
+      html = html.replace(/\s+/g, "");
+      const conLen = html.length;
       this.setState({
         focusFlag: false,
         visibleMediaBox: false,
@@ -220,24 +231,14 @@ class QuestionEditor extends Component {
       });
     };
 
-    editorRoot.customConfig.onfocus = () => {
-      this.setState({
-        focusFlag: true,
-        visibleMediaBox: true,
-        visiblePlacehold: false,
-      });
-    };
-
     editorRoot.create();
     this.editorRoot = editorRoot;
 
-    // if (detailInfo && detailInfo.content) {
     const contentHtml = /^\<p/.test(detailInfo.content)
       ? detailInfo.content
       : `<p>${detailInfo.content}</p>`;
     editorRoot.txt.html(detailInfo.content);
-    const textLength = editorRoot.txt.text().replace(/\&nbsp\;/gi, " ")
-      .length;
+    const textLength = editorRoot.txt.text().replace(/\&nbsp\;/gi, " ").length;
     const imgLength = contentHtml.match(/<img/g)
       ? contentHtml.match(/<img/g).length * 2
       : 0;
@@ -251,13 +252,12 @@ class QuestionEditor extends Component {
         onChange && onChange(contentHtml, this.state.contentLength);
       }
     );
-    // }
     bindChangeContent && bindChangeContent(this.handleChangeContent);
   }
 
   getNewArr(a, b) {
     const arr = [...a, ...b];
-    const idx = arr.findIndex(item => {
+    const idx = arr.findIndex((item) => {
       return !(a.includes(item) && b.includes(item));
     });
     return idx;
@@ -360,8 +360,9 @@ class QuestionEditor extends Component {
           </div>
         )}
         <div
-          className={`editor-limit-tip${contentLength > limitLength ? " mt6" : ""
-            }`}
+          className={`editor-limit-tip${
+            contentLength > limitLength ? " mt6" : ""
+          }`}
           style={{ height: contentLength > limitLength ? 20 : 0 }}
         >
           最多只能输入1000字

src/modules/teach-tool/components/QuestionEditor.less

@@ -18,9 +18,9 @@
     color: #999999;
     margin-top: 8px;
     .editor-fill-info_icon {
-      color: #5289fa;
+      color: #5289fa !important;
       font-size: 14px;
-      padding-left: 9px;
+      padding-left: 9px !important;
       cursor: pointer;
     }
   }
@@ -94,7 +94,7 @@
 
   .editor-placehold {
     position: absolute;
-    top: 0;
+    top: 0px;
     left: 0;
     right: 0;
     font-size: 14px;
@@ -104,6 +104,8 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+    z-index: 999;
+    pointer-events: none;
   }
 
   .edtior-media_box {