修改自定义组件富文本

RMS-FrontEnd/src/views/components/common/RichText/index.vue

@@ -50,8 +50,9 @@ export default {
   created() {},
   mounted() {},
   methods: {
-   async handlePaste(event){
-      
+   async handlePaste(e){
+    var event = e || window.event
+    event.preventDefault();
       const items = (event.clipboardData || window.clipboardData).items;
       let file = null;
       if (!items || items.length === 0) {
@@ -59,20 +60,13 @@ export default {
         return;
       }
       for (let i = 0; i < items.length; i++) {
-        // if (items[i].type.indexOf("text") !== -1) {
-        //   var text =  (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在这里输入文本');
-        //   //清除回车
-        //   text = text.replace(/\[\d+\]|\n|\r/ig,"")
-        //   var content = event.target.innerHTML
-        //   var str2 = content.slice(0, index.endOffset) + text + content.slice(index.endOffset);
-        //   event.target.innerHTML = str2
-        //   this.saveValue(event)
-        //   // this.$forceUpdate()
-        //   // if(this.tableHeight){
-        //   //   this.setHeight()
-        //   // }
-        //   break;
-        // }
+        if (items[i].type.indexOf("text") !== -1) {
+          var text =  (event.originalEvent || event).clipboardData.getData('text/plain') ||'';
+          text = text.replace(/\n{1,}/g,'</br>')
+          var text2 = `<span>${text}</span>`
+          this.setCursor(event,text2,1)
+          break;
+        }
         if (items[i].type.indexOf("image") !== -1) {
           var e = event || window.event
           e.preventDefault();
@@ -103,29 +97,31 @@ export default {
 //                 selection.addRange(range);
 // console.log(event.target.innerHTML)
       var index = window.getSelection().getRangeAt(0)
-      var indexText = this.getColumn(event.target,window.getSelection())
-      var index2 = 0
-      var str2 = content.slice(0, indexText) + new_img + content.slice(indexText);
-      event.target.innerHTML = str2
-      this.$nextTick(()=>{
-        var selectedText = window.getSelection();
-      var selectedRange = document.createRange();
-      try{
-        for(var i=0;i<event.target.childNodes.length;i++){
-          if(event.target.childNodes[i].outerHTML == new_img){
-            index2 = i
-            throw new Error()
-          }
-        }
-      }catch{
 
-      }
-      selectedRange.setStart(event.target,index2+1);
-      selectedRange.collapse(true);
-      selectedText.removeAllRanges();
-      selectedText.addRange(selectedRange);
-      event.target.parentNode.focus(); 
-      })
+      this.setCursor(event,new_img,2)
+      // var indexText = this.getColumn(event.target,window.getSelection())
+      // var index2 = 0
+      // var str2 = content.slice(0, indexText) + new_img + content.slice(indexText);
+      // event.target.innerHTML = str2
+      // this.$nextTick(()=>{
+      //   var selectedText = window.getSelection();
+      // var selectedRange = document.createRange();
+      // try{
+      //   for(var i=0;i<event.target.childNodes.length;i++){
+      //     if(event.target.childNodes[i].outerHTML == new_img){
+      //       index2 = i
+      //       throw new Error()
+      //     }
+      //   }
+      // }catch{
+
+      // }
+      // selectedRange.setStart(event.target,index2+1);
+      // selectedRange.collapse(true);
+      // selectedText.removeAllRanges();
+      // selectedText.addRange(selectedRange);
+      // event.target.parentNode.focus(); 
+      // })
       
       // this.saveValue(event)
       // var selection = window.getSelection()
@@ -133,6 +129,41 @@ export default {
       // console.log(window.getSelection().getRangeAt(0))
      
     },
+    //设置光标位置
+    setCursor(event,str,type){
+      var content = event.target.innerHTML
+          var indexText = this.getColumn(event.target,window.getSelection())
+          var index2 = 0
+          var str2 = content.slice(0, indexText) + str + content.slice(indexText);
+          event.target.innerHTML = str2
+          this.$nextTick(()=>{
+            var selectedText = window.getSelection();
+          var selectedRange = document.createRange();
+          try{
+            for(var i=0;i<event.target.childNodes.length;i++){
+                var html = event.target.childNodes[i].outerHTML
+                if(type == 1){
+                  if(html){
+                    html = html.replace(/\r{1,}|\n{1,}|\r\n{1,}/g,'')
+                    str = html.replace(/\r{1,}|\n{1,}|\r\n{1,}/g,'')
+                  }
+                }
+                if(html == str){
+                  index2 = i
+                  throw new Error()
+                }
+              
+            }
+          }catch{
+
+          }
+          selectedRange.setStart(event.target,index2+1);
+          selectedRange.collapse(true);
+          selectedText.removeAllRanges();
+          selectedText.addRange(selectedRange);
+          event.target.parentNode.focus(); 
+          })
+    },
     getColumn(node, selectObj) {
       var baseNode = node;
       var anchorNodePosition = this.getPosition(baseNode, selectObj.anchorNode, selectObj.anchorOffset);
@@ -195,9 +226,9 @@ export default {
 .edit-box{
   overflow-x: hidden;
     text-overflow: ellipsis;
-  padding: 0 15px;
-    min-height:40px;
-    line-height: 40px;
+    padding: 10px 15px;
+    // min-height:27px;
+    line-height: 1.5;
     outline: #dcdfe6;
     border:1px solid #DCDFE6;
     border-radius:5px;