@sy-common/wang-editor 1.0.0-beta.23 → 1.0.0-beta.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sy-common/wang-editor",
-  "version": "1.0.0-beta.23",
+  "version": "1.0.0-beta.24",
   "description": "",
   "main": "index.js",
   "author": "lambo",

package/src/index.vue

@@ -1,317 +1,337 @@
-<template>
-  <div style="z-index: 999">
-    <!-- 工具栏 -->
-    <Toolbar
-      :editor="editor"
-      :defaultConfig="toolbarConfig"
-    />
-    <!-- 编辑器 -->
-    <Editor
-      :style="editorStyle"
-      :defaultConfig="editorConfig"
-      v-model="html"
-      @onChange="onChange"
-      @onCreated="onCreated"
-    />
-  </div>
-</template>
-
-<script>
-import '@wangeditor-next/editor/dist/css/style.css'
-import {oneOf} from '@lambo-design/shared/utils/platform';
-import {Editor, Toolbar} from '@wangeditor-next/editor-for-vue2'
-import {Boot} from '@wangeditor-next/editor'
-import {registerMenu} from './customHrMenu'
-// 注册分割线颜色菜单（模块级别，只执行一次）
-registerMenu(Boot)
-
-export default {
-  name: 'WangEditor',
-  components: {Editor, Toolbar},
-  props: {
-    value: {
-      type: String,
-      default: ''
-    },
-    /**
-     * 绑定的值的类型, enum: ['html', 'text']
-     */
-    valueType: {
-      type: String,
-      default: 'html',
-      validator: (val) => {
-        return oneOf(val, ['html', 'text'])
-      }
-    },
-    /**
-     * @description 设置change事件触发时间间隔
-     */
-    changeInterval: {
-      type: Number,
-      default: 200
-    },
-    /**
-     * @description 是否开启本地存储
-     */
-    cache: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * @description 是否使用 base64 保存图片
-     */
-    uploadImgShowBase64: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * 上传图片上下文
-     */
-    ossServerContext: {
-      type: String,
-      default: ''
-    },
-    /**
-     * 上传图片Url地址
-     */
-    ossFilePutUrl: {
-      type: String,
-      default: "/oss/file/put"
-    },
-    /**
-     * 获取图片url地址
-     */
-    ossFileGetImgUrl: {
-      type: String,
-      default: "/oss/file/get/"
-    },
-    /**
-     * @description 是否保留粘贴内容的样式
-     */
-    preservePasteStyle: {
-      type: Boolean,
-      default: false
-    },
-
-    readOnly: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * @description: 隐藏菜单
-     */
-    hideMenu: {
-      type: Array,
-      default: () => []
-    },
-
-    height: {
-      type: [Number, String],
-      default: 400
-    }
-  },
-  data() {
-    return {
-      editor: null,
-      html: '',
-      hrCount: 0, // 追踪分割线数量
-      toolbarConfig: {
-        insertKeys: {
-          index: 24, // 在分割线菜单后面插入
-          keys: ['customHrMenu']
-        }
-      },
-      editorConfig: {
-        placeholder: '请输入内容...',
-        MENU_CONF: {
-          fontFamily: {
-            fontFamilyList: [
-              "黑体",
-              {
-                name: "仿宋",
-                value: "仿宋"
-              },
-              "仿宋_GB2312",
-              "楷体",
-              "楷体_GB2312",
-              "标楷体",
-              "华文仿宋",
-              "华文楷体",
-              {
-                name: "宋体",
-                value: "宋体"
-              }, "隶书", "方正小标宋简体", "思源宋体‌", "微软雅黑", "Arial", "Tahoma", "Verdana", "Times New Roman", "Courier New"]
-          },
-          color: {
-            colors: [
-              "rgb(0, 0, 0)",
-              "rgb(38, 38, 38)",
-              "rgb(89, 89, 89)",
-              "rgb(140, 140, 140)",
-              "rgb(191, 191, 191)",
-              "rgb(217, 217, 217)",
-              "rgb(233, 233, 233)",
-              "rgb(245, 245, 245)",
-              "rgb(250, 250, 250)",
-              "rgb(255, 255, 255)",
-              "rgb(225, 60, 57)",
-              "rgb(231, 95, 51)",
-              "rgb(235, 144, 58)",
-              "rgb(245, 219, 77)",
-              "rgb(114, 192, 64)",
-              "rgb(89, 191, 192)",
-              "rgb(66, 144, 247)",
-              "rgb(54, 88, 226)",
-              "rgb(106, 57, 201)",
-              "rgb(216, 68, 147)",
-              "rgb(251, 233, 230)",
-              "rgb(252, 237, 225)",
-              "rgb(252, 239, 212)",
-              "rgb(252, 251, 207)",
-              "rgb(231, 246, 213)",
-              "rgb(218, 244, 240)",
-              "rgb(217, 237, 250)",
-              "rgb(224, 232, 250)",
-              "rgb(237, 225, 248)",
-              "rgb(246, 226, 234)",
-              "rgb(255, 163, 158)",
-              "rgb(255, 187, 150)",
-              "rgb(255, 213, 145)",
-              "rgb(255, 251, 143)",
-              "rgb(183, 235, 143)",
-              "rgb(135, 232, 222)",
-              "rgb(145, 213, 255)",
-              "rgb(173, 198, 255)",
-              "rgb(211, 173, 247)",
-              "rgb(255, 173, 210)",
-              "rgb(255, 77, 79)",
-              "rgb(255, 122, 69)",
-              "rgb(255, 169, 64)",
-              "rgb(255, 236, 61)",
-              "rgb(115, 209, 61)",
-              "rgb(54, 207, 201)",
-              "rgb(64, 169, 255)",
-              "rgb(89, 126, 247)",
-              "rgb(146, 84, 222)",
-              "rgb(247, 89, 171)",
-              "rgb(207, 19, 34)",
-              "rgb(212, 56, 13)",
-              "rgb(212, 107, 8)",
-              "rgb(212, 177, 6)",
-              "rgb(56, 158, 13)",
-              "rgb(8, 151, 156)",
-              "rgb(9, 109, 217)",
-              "rgb(29, 57, 196)",
-              "rgb(83, 29, 171)",
-              "rgb(196, 29, 127)",
-              "rgb(130, 0, 20)",
-              "rgb(135, 20, 0)",
-              "rgb(135, 56, 0)",
-              "rgb(97, 71, 0)",
-              "rgb(19, 82, 0)",
-              "rgb(0, 71, 79)",
-              "rgb(0, 58, 140)",
-              "rgb(6, 17, 120)",
-              "rgb(34, 7, 94)",
-              "rgb(120, 6, 80)",
-              "rgb(250,64,6)"
-            ]
-          },
-          uploadImage: {
-            //上传图片配置
-            server: this.ossServerContext + this.ossFilePutUrl, //上传接口地址
-            fieldName: 'file', //上传文件名
-            methods: 'post',
-            metaWithUrl: true, // 参数拼接到 url 上
-            //自定义插入图片
-            customInsert: (res, insertFn) => {
-              let self = this;
-              const imgInfo = res.data[0] || {}
-              const {fileId, fileName, contentType} = imgInfo
-              insertFn(self.ossServerContext + self.ossFileGetImgUrl + fileId, fileName, self.ossServerContext + self.ossFileGetImgUrl + fileId)
-            },
-
-          },
-        }
-      }
-    }
-  },
-  watch: {
-    value: {
-      handler: function (newVal, oldVal) {
-        const isEmpty = !newVal || newVal === '<p><br></p>'
-        const wasEmpty = !oldVal || oldVal === '<p><br></p>'
-
-        if (!isEmpty && wasEmpty) {
-          if (this.valueType === 'html') {
-            let html = newVal
-            this.editor.setHtml(html)
-          } else {
-            this.editor.insertText(newVal)
-          }
-        }
-      }
-    },
-
-    readOnly: {
-      handler(newVal){
-        this.editorConfig.readOnly = newVal
-        if(newVal){
-          this.toolbarConfig.toolbarKeys = ['fullScreen']
-        }
-      },
-      immediate: true,
-    },
-
-    hideMenu: {
-      handler(newVal){
-        this.toolbarConfig.excludeKeys = newVal
-      },
-      immediate: true,
-      deep: true
-    }
-  },
-  computed: {
-    editorStyle() {
-      let finalHeight = this.height;
-      // 如果是数字，自动拼接 px 单位
-      if (typeof finalHeight === 'number') {
-        finalHeight = `${finalHeight}px`;
-      }
-
-      return {
-        height: finalHeight,
-        'overflow-y': 'hidden'
-      }
-    }
-  },
-  methods: {
-
-    onCreated(editor) {
-      this.editor = Object.seal(editor)
-      if (this.value) {
-        this.editor.setHtml(this.value)
-      }
-    },
-    onChange(editor) {
-      let html = editor.getHtml()
-      this.$emit('input', this.valueType === 'html' ? html : editor.getText())
-      this.$emit('on-change', html, editor.getText())
-    },
-  },
-
-  beforeDestroy() {
-    const editor = this.editor
-    if (editor == null) return
-    editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
-  },
-
-}
-</script>
-
-<style lang="less" scoped>
-/deep/ .table-container {
-  width: fit-content !important;
-  margin: 10px auto !important;
-}
-</style>
+<template>
+  <div style="z-index: 999">
+    <!-- 工具栏 -->
+    <Toolbar
+      :editor="editor"
+      :defaultConfig="toolbarConfig"
+    />
+    <!-- 编辑器 -->
+    <Editor
+      :style="editorStyle"
+      :defaultConfig="editorConfig"
+      v-model="html"
+      @onChange="onChange"
+      @onCreated="onCreated"
+    />
+  </div>
+</template>
+
+<script>
+import '@wangeditor-next/editor/dist/css/style.css'
+import {oneOf} from '@lambo-design/shared/utils/platform';
+import {Editor, Toolbar} from '@wangeditor-next/editor-for-vue2'
+import {Boot} from '@wangeditor-next/editor'
+import {registerMenu} from './customHrMenu'
+// 注册分割线颜色菜单（模块级别，只执行一次）
+registerMenu(Boot)
+
+export default {
+  name: 'WangEditor',
+  components: {Editor, Toolbar},
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    /**
+     * 绑定的值的类型, enum: ['html', 'text']
+     */
+    valueType: {
+      type: String,
+      default: 'html',
+      validator: (val) => {
+        return oneOf(val, ['html', 'text'])
+      }
+    },
+    /**
+     * @description 设置change事件触发时间间隔
+     */
+    changeInterval: {
+      type: Number,
+      default: 200
+    },
+    /**
+     * @description 是否开启本地存储
+     */
+    cache: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * @description 是否使用 base64 保存图片
+     */
+    uploadImgShowBase64: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 上传图片上下文
+     */
+    ossServerContext: {
+      type: String,
+      default: ''
+    },
+    /**
+     * 上传图片Url地址
+     */
+    ossFilePutUrl: {
+      type: String,
+      default: "/oss/file/put"
+    },
+    /**
+     * 获取图片url地址
+     */
+    ossFileGetImgUrl: {
+      type: String,
+      default: "/oss/file/get/"
+    },
+    /**
+     * @description 是否保留粘贴内容的样式
+     */
+    preservePasteStyle: {
+      type: Boolean,
+      default: false
+    },
+
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * @description: 隐藏菜单
+     */
+    hideMenu: {
+      type: Array,
+      default: () => []
+    },
+
+    height: {
+      type: [Number, String],
+      default: 400
+    }
+  },
+  data() {
+    return {
+      editor: null,
+      html: '',
+      hrCount: 0, // 追踪分割线数量
+      toolbarConfig: {
+        insertKeys: {
+          index: 24, // 在分割线菜单后面插入
+          keys: ['customHrMenu']
+        }
+      },
+      editorConfig: {
+        placeholder: '请输入内容...',
+        MENU_CONF: {
+          fontFamily: {
+            fontFamilyList: [
+              "黑体",
+              {
+                name: "仿宋",
+                value: "仿宋"
+              },
+              "仿宋_GB2312",
+              "楷体",
+              "楷体_GB2312",
+              "标楷体",
+              "华文仿宋",
+              "华文楷体",
+              {
+                name: "宋体",
+                value: "宋体"
+              }, "隶书", "方正小标宋简体", "思源宋体‌", "微软雅黑", "Arial", "Tahoma", "Verdana", "Times New Roman", "Courier New"]
+          },
+          color: {
+            colors: [
+              "rgb(0, 0, 0)",
+              "rgb(38, 38, 38)",
+              "rgb(89, 89, 89)",
+              "rgb(140, 140, 140)",
+              "rgb(191, 191, 191)",
+              "rgb(217, 217, 217)",
+              "rgb(233, 233, 233)",
+              "rgb(245, 245, 245)",
+              "rgb(250, 250, 250)",
+              "rgb(255, 255, 255)",
+              "rgb(225, 60, 57)",
+              "rgb(231, 95, 51)",
+              "rgb(235, 144, 58)",
+              "rgb(245, 219, 77)",
+              "rgb(114, 192, 64)",
+              "rgb(89, 191, 192)",
+              "rgb(66, 144, 247)",
+              "rgb(54, 88, 226)",
+              "rgb(106, 57, 201)",
+              "rgb(216, 68, 147)",
+              "rgb(251, 233, 230)",
+              "rgb(252, 237, 225)",
+              "rgb(252, 239, 212)",
+              "rgb(252, 251, 207)",
+              "rgb(231, 246, 213)",
+              "rgb(218, 244, 240)",
+              "rgb(217, 237, 250)",
+              "rgb(224, 232, 250)",
+              "rgb(237, 225, 248)",
+              "rgb(246, 226, 234)",
+              "rgb(255, 163, 158)",
+              "rgb(255, 187, 150)",
+              "rgb(255, 213, 145)",
+              "rgb(255, 251, 143)",
+              "rgb(183, 235, 143)",
+              "rgb(135, 232, 222)",
+              "rgb(145, 213, 255)",
+              "rgb(173, 198, 255)",
+              "rgb(211, 173, 247)",
+              "rgb(255, 173, 210)",
+              "rgb(255, 77, 79)",
+              "rgb(255, 122, 69)",
+              "rgb(255, 169, 64)",
+              "rgb(255, 236, 61)",
+              "rgb(115, 209, 61)",
+              "rgb(54, 207, 201)",
+              "rgb(64, 169, 255)",
+              "rgb(89, 126, 247)",
+              "rgb(146, 84, 222)",
+              "rgb(247, 89, 171)",
+              "rgb(207, 19, 34)",
+              "rgb(212, 56, 13)",
+              "rgb(212, 107, 8)",
+              "rgb(212, 177, 6)",
+              "rgb(56, 158, 13)",
+              "rgb(8, 151, 156)",
+              "rgb(9, 109, 217)",
+              "rgb(29, 57, 196)",
+              "rgb(83, 29, 171)",
+              "rgb(196, 29, 127)",
+              "rgb(130, 0, 20)",
+              "rgb(135, 20, 0)",
+              "rgb(135, 56, 0)",
+              "rgb(97, 71, 0)",
+              "rgb(19, 82, 0)",
+              "rgb(0, 71, 79)",
+              "rgb(0, 58, 140)",
+              "rgb(6, 17, 120)",
+              "rgb(34, 7, 94)",
+              "rgb(120, 6, 80)",
+              "rgb(250,64,6)"
+            ]
+          },
+          uploadImage: {
+            //上传图片配置
+            server: this.ossServerContext + this.ossFilePutUrl, //上传接口地址
+            fieldName: 'file', //上传文件名
+            methods: 'post',
+            metaWithUrl: true, // 参数拼接到 url 上
+            //自定义插入图片
+            customInsert: (res, insertFn) => {
+              let self = this;
+              const imgInfo = res.data[0] || {}
+              const {fileId, fileName, contentType} = imgInfo
+              insertFn(self.ossServerContext + self.ossFileGetImgUrl + fileId, fileName, self.ossServerContext + self.ossFileGetImgUrl + fileId)
+            },
+
+          },
+        }
+      }
+    }
+  },
+  watch: {
+    value: {
+      handler: function (newVal, oldVal) {
+        const isEmpty = !newVal || newVal === '<p><br></p>'
+        const wasEmpty = !oldVal || oldVal === '<p><br></p>'
+
+        if (!isEmpty && wasEmpty) {
+          if (this.valueType === 'html') {
+            this.editor.setHtml(this.normalizeTableBorderWidth(newVal));
+          } else {
+            this.editor.insertText(newVal)
+          }
+        }
+      }
+    },
+
+    readOnly: {
+      handler(newVal){
+        this.editorConfig.readOnly = newVal
+        if(newVal){
+          this.toolbarConfig.toolbarKeys = ['fullScreen']
+        }
+      },
+      immediate: true,
+    },
+
+    hideMenu: {
+      handler(newVal){
+        this.toolbarConfig.excludeKeys = newVal
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  computed: {
+    editorStyle() {
+      let finalHeight = this.height;
+      // 如果是数字，自动拼接 px 单位
+      if (typeof finalHeight === 'number') {
+        finalHeight = `${finalHeight}px`;
+      }
+
+      return {
+        height: finalHeight,
+        'overflow-y': 'hidden'
+      }
+    }
+  },
+  methods: {
+
+    normalizeTableBorderWidth(value) {
+      let html = value;
+      // 正则匹配 <table>...</table> 区域
+      const tableRegex = /(<table)([\s\S]*?)(<\/table>)/gi;
+      // 替换表格区域中的 border-width: **px;
+      html = html.replace(tableRegex, (match, startTag, content, endTag) => {
+        // 只对表格内容进行替换
+        const updatedContent = content.replace(/border-width:\s*(\d+)px;/g, 'border-width: $1;');
+        return `${startTag}${updatedContent}${endTag}`;
+      });
+
+      // 标记已存表格
+      const tempDiv = document.createElement('div'); // 创建临时容器解析 HTML
+      tempDiv.innerHTML = html;
+      const tables = tempDiv.querySelectorAll('table');
+      tables.forEach(table => {
+        table.setAttribute('data-processed', 'true');
+      });
+      return tempDiv.innerHTML;
+    },
+
+    onCreated(editor) {
+      this.editor = Object.seal(editor)
+      if (this.value) {
+        this.editor.setHtml(this.normalizeTableBorderWidth(this.value))
+      }
+    },
+    onChange(editor) {
+      let html = editor.getHtml()
+      this.$emit('input', this.valueType === 'html' ? html : editor.getText())
+      this.$emit('on-change', html, editor.getText())
+    },
+  },
+
+  beforeDestroy() {
+    const editor = this.editor
+    if (editor == null) return
+    editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
+  },
+
+}
+</script>
+
+<style lang="less" scoped>
+/deep/ .table-container {
+  width: fit-content !important;
+  margin: 10px auto !important;
+}
+</style>