Browse Source

修改富文本组件

zhuliu 2 years ago
parent
commit
ee10efcab8

+ 1 - 1
RMS-FrontEnd/src/api/InvalidResponse.js

@@ -268,6 +268,6 @@ addOrUpdateValue(params) {
  * 导出无效理由列表
  */
 exportInvalid(params) {
-  return axios.post('/report/api/invalidReason/exportInvalid', params)
+  return axios.get('/report/api/invalidReason/exportInvalid', {params})
 },
 }

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

@@ -95,8 +95,8 @@
     },
     watch:{
         value(val){
-          var a = this.content.replace(/<p>|<\/p>/g,'')
-            if(a!=val){
+          // var a = this.content.replace(/<p>|<\/p>/g,'')
+            if(this.content!=val){
               this.content = val
             }
         },
@@ -123,13 +123,21 @@
           // 获取光标所在位置
           let length = this.quill.selection.savedRange.index
           var str = await this.fileToBase64(file)
-          this.quill.insertEmbed(length, 'image',{
-            url:str,
-            width:'',
-            height:'',
-            style:'width:80px;height: 80px;border: 1px solid #f9f6f675;vertical-align:middle'
+        //  this.quill.insertEmbed(length, 'image',{
+        //     url:str,
+        //     width:'',
+        //     height:'',
+        //     style:'width:80px;height: 80px;border: 1px solid #f9f6f675;vertical-align:middle'
+        //   })
+        this.quill.insertEmbed(length, 'image',str)
+        var html = `<img style="width:80px;height: 80px;border: 1px solid #f9f6f675;vertical-align:middle" src="${str}">`
+        // this.$nextTick(()=>{
+          this.content = this.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g,html)
+          this.quill.container.children[0].innerHTML = this.content
+          this.$nextTick(()=>{
+            this.quill.setSelection(length + 1)
           })
-          this.quill.setSelection(length + 2)
+          
           })
         }
       }, false)
@@ -164,7 +172,8 @@
       },
       //值变化
       saveHtml1(event) {
-        var a = this.content.replace(/<p>|<\/p>/g,'')
+        // var a = this.content.replace(/<p>|<\/p>/g,'')
+          var a = this.content
           this.$emit('input',a)
       },
       getFocus(){
@@ -190,7 +199,8 @@
        {
         border:0;
         .ql-editor{
-          display: flex;
+          // display: flex;
+          // flex-wrap: nowrap;
           align-items: end;
         }
        }

+ 23 - 4
RMS-FrontEnd/src/views/components/common/RichText/reviewClass.js

@@ -1,19 +1,21 @@
 
 import {Quill} from 'vue-quill-editor'
 const BlockEmbed = Quill.import('blots/block/embed')
+const inline = Quill.import('blots/inline')
 // 添加插入图片
 class ImageBlot extends BlockEmbed {
   static create(value) {
     const node = super.create(value)
+    console.log(node)
     node.setAttribute('src', value.url)
     // node.setAttribute('title', value.name)
     // node.setAttribute('controls', value.controls)
     // node.setAttribute('controlslist', value.controlslist)
     node.setAttribute('width', value.width)
     node.setAttribute('height', value.height)
-    node.setAttribute('webkit-playsinline', true)
-    node.setAttribute('playsinline', true)
-    node.setAttribute('x5-playsinline', true)
+    // node.setAttribute('webkit-playsinline', true)
+    // node.setAttribute('playsinline', true)
+    // node.setAttribute('x5-playsinline', true)
     node.setAttribute('style', value.style)
     // if (value.autoplay) {
     //   node.setAttribute('autoplay', value.autoplay)
@@ -37,4 +39,21 @@ class ImageBlot extends BlockEmbed {
  
 ImageBlot.blotName = 'image' //quill使用时的名称
 ImageBlot.tagName = 'img' //定义的html标签名
-Quill.register(ImageBlot) // 注册
+// Quill.register(ImageBlot) // 注册
+
+
+
+
+class WordBox extends inline {
+  static create(value) {
+    const node = super.create(value);
+    //设置需要的样式
+    node.setAttribute('style', 'width:80px;height: 80px;border: 1px solid #f9f6f675;vertical-align:middle');
+    return node;
+  }
+}
+
+WordBox.blotName = 'wordBox'; //工具栏中的名字与此名字需保持一致
+WordBox.tagName = 'wordBox';  //需要添加的标签名
+
+Quill.register(WordBox);