feat: 新增富文本编辑器开发版

src/components/tiptap/HbAdminTipTap.vue

@@ -4,14 +4,14 @@ import StarterKit from '@tiptap/starter-kit'
 import MenuBar from "./MenuBar"
 import Highlight from '@tiptap/extension-highlight'
 import Image from '@tiptap/extension-image'
+import Video from './extension/video'
 import Table from '@tiptap/extension-table'
 import TableRow from '@tiptap/extension-table-row'
 import TableCell from '@tiptap/extension-table-cell'
 import TableHeader from '@tiptap/extension-table-header'
 import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
-import 'github-markdown-css'
 // load all highlight.js languages
-import { lowlight } from 'lowlight'
+import {lowlight} from 'lowlight'
 
 import CodeBlockComponent from './CodeBlockComponent.vue'
 
@@ -38,6 +38,7 @@ const editor = useEditor({
   extensions: [
     StarterKit,
     Image,
+    Video,
     Highlight.configure({multicolor: true}),
     Table.configure({
       resizable: true
@@ -46,12 +47,12 @@ const editor = useEditor({
     TableHeader,
     CustomTableCell,
     CodeBlockLowlight
-      .extend({
-        addNodeView() {
-          return VueNodeViewRenderer(CodeBlockComponent)
-        },
-      })
-      .configure({ lowlight }),
+        .extend({
+          addNodeView() {
+            return VueNodeViewRenderer(CodeBlockComponent)
+          },
+        })
+        .configure({lowlight}),
   ],
 })
 </script>

src/components/tiptap/MenuBar.vue

@@ -163,6 +163,16 @@ export default {
           }
         }
       },
+      {
+        icon: 'video-line',
+        title: '插入视频',
+        action: () => {
+          const url = window.prompt('URL')
+          if (url) {
+            props.editor.chain().focus().setVideo({ src: url }).run()
+          }
+        }
+      },
       {
         type: 'divider'
       },

src/components/tiptap/extension/video.js

@@ -0,0 +1,82 @@
+import {
+  mergeAttributes,
+  Node,
+  nodeInputRule,
+} from '@tiptap/core'
+
+// https://oss.injs.jsxww.cn/net-disk-smh/07597e2562d44311aefc82095e3f19df.mp4
+export const inputRegex = /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/
+
+export const Video = Node.create({
+  name: 'video',
+
+  addOptions() {
+    return {
+      inline: false,
+      HTMLAttributes: {},
+    }
+  },
+
+  inline() {
+    return this.options.inline
+  },
+
+  group() {
+    return this.options.inline ? 'inline' : 'block'
+  },
+
+  draggable: false,
+
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+      },
+      alt: {
+        default: null,
+      },
+      title: {
+        default: null,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'video[src]'
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['video', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)]
+  },
+
+  addCommands() {
+    return {
+      setVideo: options => ({ commands }) => {
+        return commands.insertContent({
+          type: this.name,
+          attrs: options,
+        })
+      },
+    }
+  },
+
+  addInputRules() {
+    return [
+      nodeInputRule({
+        find: inputRegex,
+        type: this.type,
+        getAttributes: match => {
+          const [,, alt, src, title] = match
+
+          return { src, alt, title }
+        },
+      }),
+    ]
+  },
+})
+
+export default Video

src/utils/imageFactory.js

@@ -1,8 +1,8 @@
 /**
  * 图片添加水印
  *  callback  //回调方法，返回base64的图片
- *  image: Image()  //底图对象
- *  sign: Image()  //水印对象
+ *  image: Video()  //底图对象
+ *  sign: Video()  //水印对象
  *  left: Number  //水印左侧位置
  *  top: Number  //水印顶部位置
  *  imageWidth: Number  //底图宽度
@@ -50,7 +50,7 @@ export function watermark (
 /**
  * 图片裁剪
  * callback  //回调方法，返回base64的图片
- * image: Image()  //底图对象
+ * image: Video()  //底图对象
  * left: Number  //裁剪左侧距离
  * right: Number  //裁剪右侧距离
  * top: Number  //裁剪顶部距离
@@ -119,7 +119,7 @@ export function cropper (
 /**
  * 调整图片宽高
  * callback  //回调方法，返回base64的图片
- * image: Image()  //底图对象
+ * image: Video()  //底图对象
  * width: Number  //调整的宽度
  * height: Number  //调整的高度
  * */
@@ -157,7 +157,7 @@ export function resize (
 /**
  * 调整图片质量
  * callback  //回调方法，返回base64的图片
- * image: Image()  //底图对象
+ * image: Video()  //底图对象
  * quality: Number  //图片质量 0 - 1
  * */
 export function quality (callback, image, quality = 1) {

src/views/image-factory-demo/index.vue

@@ -11,8 +11,8 @@ hljs.registerLanguage('xml', xml)
 const code1 = '1.首先引入 \nimport { watermark } from \'@/utils/imageFactory\' \n2.然后调用 \n/**\n' +
     ' * 图片添加水印\n' +
     ' *  callback  //回调方法，返回base64的图片【{success: true, data: "base64数据"}】\n' +
-    ' *  image: Image()  //底图对象\n' +
-    ' *  sign: Image()  //水印对象\n' +
+    ' *  image: Video()  //底图对象\n' +
+    ' *  sign: Video()  //水印对象\n' +
     ' *  left: Number  //水印左侧位置\n' +
     ' *  top: Number  //水印顶部位置\n' +
     ' *  imageWidth: Number  //底图宽度\n' +
@@ -26,7 +26,7 @@ const code2 = '1.首先引入 \nimport { cropper } from \'@/utils/imageFactory\'
     '/**\n' +
     ' * 图片裁剪\n' +
     ' * callback  //回调方法，返回base64的图片\n' +
-    ' * image: Image()  //底图对象\n' +
+    ' * image: Video()  //底图对象\n' +
     ' * left: Number  //裁剪左侧距离\n' +
     ' * right: Number  //裁剪右侧距离\n' +
     ' * top: Number  //裁剪顶部距离\n' +
@@ -40,7 +40,7 @@ const code3 = '1.首先引入 \nimport { resize } from \'@/utils/imageFactory\'
     '/**\n' +
     ' * 调整图片尺寸\n' +
     ' * callback  //回调方法，返回base64的图片\n' +
-    ' * image: Image()  //底图对象\n' +
+    ' * image: Video()  //底图对象\n' +
     ' * width: Number  //调整的宽度\n' +
     ' * height: Number  //调整的高度\n' +
     ' * */\n' +
@@ -50,7 +50,7 @@ const code4 = '1.首先引入 \nimport { quality } from \'@/utils/imageFactory\'
     '/**\n' +
     ' * 调整图片质量\n' +
     ' * callback  //回调方法，返回base64的图片\n' +
-    ' * image: Image()  //底图对象\n' +
+    ' * image: Video()  //底图对象\n' +
     ' * quality: Number  //图片质量 0 - 1\n' +
     ' * */\n' +
     'quality(callback, image, quality)'