知识库 富文本视频上传修改

src/components/sub/QuillEditor/index.vue

@@ -36,11 +36,14 @@
 </template>
 
 <script>
-import {quillEditor} from 'vue-quill-editor' // 富文本组件
+import {quillEditor } from 'vue-quill-editor' // 富文本组件
 import { addQuillTitle } from '@/libs/quill-title' // 富文本配置
 // import { newFileUpload } from '@/api/hegii/common' // 上传文件接口
 import UploadService from '@/api/upload' // 上传图片接口和删除图片接口
 import uuidv4 from 'uuid/v4' // webpack自带唯一id生成器
+// 这里引入修改过的video模块并注册
+import Video from '@/libs/quill-video'
+Quill.register(Video, true)
 
 import imageResize  from 'quill-image-resize-module'
 Quill.register('modules/imageResize', imageResize )
@@ -134,7 +137,7 @@ export default {
       const that = this
       this.$refs[`myQuillEditor${this.id}`].quill.getModule('toolbar').addHandler('video', function(value) {
         if (value) {
-          document.querySelector(`.video-uploader${that.id} input`).click()
+          document.querySelector(`.video-uploader${that.id} `).click()
         } else {
           that.quill.format('video', false)
         }
@@ -172,7 +175,7 @@ export default {
             if (video) {
               const quill = this.$refs[`myQuillEditor${this.id}`].quill
               const length = quill.selection.savedRange.index
-              quill.insertEmbed(length, type, video.data.absolutelyPath)
+              quill.insertEmbed(length, type, this.$config.imgUrl + video.data.path)
               quill.setSelection(length + 1)
             }
           })
@@ -248,7 +251,7 @@ export default {
             if (image) {
               const quill = this.$refs[`myQuillEditor${this.id}`].quill
               const length = quill.selection.savedRange.index
-              quill.insertEmbed(length, imgType, 'https://s.dev01.dkiboss.com:6010/file' + image.data.path)
+              quill.insertEmbed(length, imgType, this.$config.imgUrl + image.data.path)
               quill.setSelection(length + 1)
             }
           })

src/libs/quill-video.js

@@ -0,0 +1,56 @@
+import { Quill } from "vue-quill-editor";
+// 源码中是import直接倒入，这里要用Quill.import引入
+const BlockEmbed = Quill.import('blots/block/embed')
+const Link = Quill.import('formats/link')
+
+const ATTRIBUTES = ['height', 'width']
+
+class Video extends BlockEmbed {
+  static create(value) {
+    const node = super.create(value)
+    // 添加video标签所需的属性
+    node.setAttribute('controls', 'controls')
+    node.setAttribute('type', 'video/mp4')
+    node.setAttribute('src', this.sanitize(value))
+    return node
+  }
+
+  static formats(domNode) {
+    return ATTRIBUTES.reduce((formats, attribute) => {
+      if (domNode.hasAttribute(attribute)) {
+        formats[attribute] = domNode.getAttribute(attribute)
+      }
+      return formats
+    }, {})
+  }
+
+  static sanitize(url) {
+    return Link.sanitize(url) // eslint-disable-line import/no-named-as-default-member
+  }
+
+  static value(domNode) {
+    return domNode.getAttribute('src')
+  }
+
+  format(name, value) {
+    if (ATTRIBUTES.indexOf(name) > -1) {
+      if (value) {
+        this.domNode.setAttribute(name, value)
+      } else {
+        this.domNode.removeAttribute(name)
+      }
+    } else {
+      super.format(name, value)
+    }
+  }
+
+  html() {
+    const { video } = this.value()
+    return `<a href="${video}" rel="external nofollow"  rel="external nofollow" >${video}</a>`
+  }
+}
+Video.blotName = 'video' // 这里不用改，不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot
+Video.className = 'ql-video'
+Video.tagName = 'video' // 用video标签替换iframe
+
+export default Video

src/view/mst/knowledge/form.vue

@@ -37,7 +37,7 @@
           <DkFormItem prop="kgContent" :required="true" :span="24">
             <!--富文本编译器-->
             <QuillEditor :index="0" :value="formData.kgContent" @value-change="change"
-                         prefix="t_mst_knowledge/kg_content"/>
+                         prefix="DK/t_mst_knowledge"/>
           </DkFormItem>
 
         </DkForm>