Merge branch 'feature/yuananting/20210221/question-bank-tools' into dev

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;
   }
@@ -118,6 +117,7 @@ class QuestionEditor extends Component {
       );
     };
     editorRoot.config.zIndex = 999;
+    editorRoot.config.placeholder = "";
     editorRoot.config.pasteFilterStyle = false;
     // 自定义处理粘贴的文本内容
     editorRoot.config.pasteTextHandle = function (content) {
@@ -136,27 +136,29 @@ 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);
       }
     }
 
@@ -177,14 +179,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);
         }
 
@@ -192,16 +197,21 @@ 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);
         }
@@ -218,24 +228,14 @@ class QuestionEditor extends Component {
       });
     };
 
-    editorRoot.config.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;
@@ -249,13 +249,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;
@@ -358,8 +357,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 {