知识中心-知识分类，修复视频上传异常问题

cfc-web/src/views/admin/ArticleEdit.vue

@@ -245,6 +245,13 @@ export default {
     this.publishing = false
     next()
   },
+  beforeDestroy() {
+    this.unbindVideoFullscreen()
+    if (this.editorInstance && this.editorInstance.destroy) {
+      this.editorInstance.destroy()
+      this.editorInstance = null
+    }
+  },
   methods: {
       initEditorConfig() {
         const baseURL = process.env.VUE_APP_BASE_API || ''
@@ -303,6 +310,54 @@ onError: (file, err, res) => {
       },
     handleEditorCreated(editor) {
       this.editorInstance = editor
+      this.bindVideoFullscreen(editor)
+    },
+    bindVideoFullscreen(editor) {
+      const root = (editor && editor.getEditableContainer && editor.getEditableContainer())
+        || (this.$el && this.$el.querySelector('.w-e-text-container'))
+      if (!root || this._videoFsBound) return
+      this._videoFsBound = true
+      this._onVideoDblClick = (e) => {
+        const video = this.findEventVideo(e)
+        if (!video) return
+        e.preventDefault()
+        this.enterVideoFullscreen(video)
+      }
+      this._onVideoFsClick = (e) => {
+        const box = e.target && e.target.closest && (
+          e.target.closest('.w-e-textarea-video-container') || e.target.closest('[data-w-e-type="video"]')
+        )
+        if (!box) return
+        const rect = box.getBoundingClientRect()
+        const x = e.clientX - rect.left
+        const y = e.clientY - rect.top
+        if (x < rect.width - 36 || y > 36) return
+        const video = box.querySelector('video')
+        if (!video) return
+        e.preventDefault()
+        e.stopPropagation()
+        this.enterVideoFullscreen(video)
+      }
+      root.addEventListener('dblclick', this._onVideoDblClick)
+      root.addEventListener('click', this._onVideoFsClick, true)
+    },
+    findEventVideo(e) {
+      const t = e && e.target
+      if (!t) return null
+      if (t.tagName === 'VIDEO') return t
+      return t.closest ? t.closest('video') : null
+    },
+    enterVideoFullscreen(video) {
+      if (!video) return
+      const req = video.requestFullscreen || video.webkitRequestFullscreen || video.msRequestFullscreen
+      if (req) req.call(video)
+    },
+    unbindVideoFullscreen() {
+      const root = (this.editorInstance && this.editorInstance.getEditableContainer && this.editorInstance.getEditableContainer())
+        || (this.$el && this.$el.querySelector('.w-e-text-container'))
+      if (root && this._onVideoDblClick) root.removeEventListener('dblclick', this._onVideoDblClick)
+      if (root && this._onVideoFsClick) root.removeEventListener('click', this._onVideoFsClick, true)
+      this._videoFsBound = false
     },
     async loadCategories() {
       try {
@@ -607,6 +662,55 @@ onError: (file, err, res) => {
   max-height: 600px;
   overflow-y: auto;
 }
+.rich-editor /deep/ .w-e-textarea-video-container,
+.rich-editor /deep/ [data-w-e-type="video"] {
+  position: relative;
+  background-image: none !important;
+  background-color: #111;
+  border: 1px solid #dcdfe6;
+  border-radius: 6px;
+  margin: 10px 0;
+  padding: 0;
+  max-width: 360px;
+  width: 360px;
+  overflow: hidden;
+  line-height: 0;
+  text-align: left;
+}
+.rich-editor /deep/ .w-e-textarea-video-container video,
+.rich-editor /deep/ [data-w-e-type="video"] video {
+  display: block;
+  width: 100%;
+  max-height: 202px;
+  height: auto;
+  background: #000;
+  object-fit: contain;
+  cursor: zoom-in;
+}
+.rich-editor /deep/ .w-e-textarea-video-container::after,
+.rich-editor /deep/ [data-w-e-type="video"]::after {
+  content: '';
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.55);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 14px;
+  z-index: 3;
+  pointer-events: none;
+}
+@media (max-width: 768px) {
+  .rich-editor /deep/ .w-e-textarea-video-container,
+  .rich-editor /deep/ [data-w-e-type="video"] {
+    width: 100%;
+    max-width: 100%;
+  }
+}
 
 /* ========== 响应式表单 ========== */