fix:wangeditor版本冲突bug修复

e2c2d3c7 · yuananting · ba3410c0 · e2c2d3c7 · e2c2d3c7 · e2c2d3c7
Commit e2c2d3c7 authored Mar 22, 2021 by yuananting
Showing with 62 additions and 59 deletions

src/modules/teach-tool/components/NewQuestionTab.jsx
+0 -0

src/modules/teach-tool/components/QuestionEditor.jsx
+57 -56

src/modules/teach-tool/components/QuestionEditor.less
+5 -3

No files found.
--- a/src/modules/teach-tool/components/NewQuestionTab.jsx
+++ b/src/modules/teach-tool/components/NewQuestionTab.jsx
--- a/src/modules/teach-tool/components/QuestionEditor.jsx
+++ b/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.config.menus = [];
-    editorRoot.customConfig.uploadImgMaxSize = 1 * 1024 * 1024;
+    editorRoot.config.uploadImgMaxSize = 1 * 1024 * 1024;
-    editorRoot.customConfig.customAlert = function (info) {
+    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.config.zIndex = 999;
-    editorRoot.customConfig.pasteFilterStyle = false;
+    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)
+      prevList = [...stemDom].map((item) => item.id);
-      localStorage.setItem('gap_ques_prevList', JSON.stringify(prevList));
+      localStorage.setItem("gap_ques_prevList", JSON.stringify(prevList));
-      setTimeout(function () {
+      setTimeout(
-        const divHeight = document.getElementById(`editor${editorId}_content`)
+        function () {
-          .firstChild.offsetHeight;
+          const divHeight = document.getElementById(`editor${editorId}_content`)
-        if (divHeight > 30) {
+            .firstChild.offsetHeight;
-          this.setState({ isShowSingleInput: false });
+          if (divHeight > 30) {
-        } else {
+            this.setState({ isShowSingleInput: false });
-          this.setState({ isShowSingleInput: true });
+          } else {
-        }
+            this.setState({ isShowSingleInput: true });
-      }.bind(this))
+          }
+        }.bind(this)
+      );
      if (counter === 0) {
-        this.props.changeBlankCount(stemDom)
+        this.props.changeBlankCount(stemDom);
      }
    }
-    editorRoot.customConfig.onchange = (html) => {
+    editorRoot.config.onchange = (html) => {
-      const conLen = html.replace(/<(?!img|input).*?>/g, "").length;
+      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")
+        var _blanksList = stemHtml.getElementsByClassName("add-fill-line");
-        const ids = [..._blanksList].map(item => item.id);
+        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) => {
+    editorRoot.config.onblur = (html) => {
-      const conLen = html.replace(/<(?!img|input).*?>/g, "").length;
+      html = html.replace(/<(?!img|input).*?>/g, "");
-      editorRoot.change && editorRoot.change();
+      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, " ")
+    const textLength = editorRoot.txt.text().replace(/\&nbsp\;/gi, " ").length;
-      .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字

--- a/src/modules/teach-tool/components/QuestionEditor.less
+++ b/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 {