@sy-common/wang-editor 1.0.0-beta.15 → 1.0.0-beta.18

package/package.json

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

package/src/index.vue

@@ -1,301 +1,343 @@
-<template>
-  <div style="z-index: 999">
-    <!-- 工具栏 -->
-    <Toolbar
-        :editor="editor"
-        :defaultConfig="toolbarConfig"
-    />
-    <!-- 编辑器 -->
-    <Editor
-        style="height: 400px; overflow-y: hidden;"
-        :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'
-
-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
-    },
-
-  },
-  data() {
-    return {
-      editor: null,
-      html: '',
-      toolbarConfig: {
-        // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
-        // excludeKeys: [ /* 隐藏哪些菜单 */ ],
-      },
-      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) {
-        //  console.log('watch',newVal+"  "+oldVal)
-        if (oldVal === '') {
-          if (this.valueType === 'html') {
-            this.editor.setHtml(newVal)
-          } else {
-            this.editor.insertText(newVal)
-          }
-        }
-      }
-    },
-  },
-  computed: {
-    // editorId() {
-    //   return `editor${this._uid}`
-    // }
-  },
-  methods: {
-
-    onCreated(editor) {
-      this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
-      // 如果本地有存储加载本地存储内容
-      let html = this.value
-      if (html) this.editor.setHtml(html)
-
-    },
-    onChange(editor) {
-      let self = this;
-      let html = this.editor.getHtml()
-      // 创建一个临时的 div 容器来解析 HTML
-      const tempDiv = document.createElement('div');
-      tempDiv.innerHTML = html;
-
-      // 处理 table 元素
-      const tables = tempDiv.querySelectorAll('table');
-      tables.forEach(table => {
-        const currentStyle = table.getAttribute('style') || '';
-        const newStyle = `${currentStyle}; border-collapse: collapse;`.trim();
-        table.setAttribute('class', 'wangeditor-styled-table');
-        table.setAttribute('style', newStyle);
-      });
-
-      // 处理 hr 元素
-      const hrs = tempDiv.querySelectorAll('hr');
-      hrs.forEach(hr => {
-        const currentStyle = hr.getAttribute('style') || '';
-        const newStyle = `${currentStyle}; border: 1px solid rgb(250, 64, 6);`.trim();
-        hr.setAttribute('style', newStyle);
-      });
-      // 更新处理后的 HTML
-      html = tempDiv.innerHTML;
-      console.log("this.editor.getMenuConfig('color')", this.editor.getMenuConfig('color'))
-      this.$emit('input', self.valueType === 'html' ? html : editor.getText())
-      this.$emit('on-change', html, editor.getText())
-    },
-    customPaste(editor, event, callback) {
-      //console.log('ClipboardEvent 粘贴事件对象', event)
-      const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
-      const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
-      const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）
-
-      //console.log("customPaste-html",rtf)
-      // 自定义插入内容
-      editor.setHtml(html)
-
-      // 返回 false ，阻止默认粘贴行为
-      event.preventDefault()
-      callback(false) // 返回值（注意，vue 事件的返回值，不能用 return）
-
-      // 返回 true ，继续默认的粘贴行为
-      // callback(true)
-    },
-  },
-  mounted() {
-
-  },
-  beforeDestroy() {
-    const editor = this.editor
-    if (editor == null) return
-    editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
-  },
-
-}
-</script>
+<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'
+
+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,
+      default: 400
+    }
+  },
+  data() {
+    return {
+      editor: null,
+      html: '',
+      toolbarConfig: {
+        // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
+        // excludeKeys: [ /* 隐藏哪些菜单 */ ],
+      },
+      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) {
+        if (oldVal === '') {
+          if (this.valueType === 'html') {
+            this.editor.setHtml(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: {
+
+    onCreated(editor) {
+      this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
+      // 如果本地有存储加载本地存储内容
+      let html = this.value
+      if (html) this.editor.setHtml(html)
+
+    },
+    onChange(editor) {
+      let self = this;
+      let html = this.editor.getHtml()
+      // 创建一个临时的 div 容器来解析 HTML
+      const tempDiv = document.createElement('div');
+      tempDiv.innerHTML = html;
+
+      // 处理 table 元素
+      const tables = tempDiv.querySelectorAll('table');
+      tables.forEach(table => {
+        const currentStyle = table.getAttribute('style') || '';
+        const newStyle = `${currentStyle}; border-collapse: collapse;`.trim();
+        table.setAttribute('class', 'wangeditor-styled-table');
+        table.setAttribute('style', newStyle);
+      });
+
+      // 处理 hr 元素
+      const hrs = tempDiv.querySelectorAll('hr');
+      hrs.forEach(hr => {
+        const currentStyle = hr.getAttribute('style') || '';
+        const newStyle = `${currentStyle}; border: 1px solid rgb(250, 64, 6);`.trim();
+        hr.setAttribute('style', newStyle);
+      });
+      // 更新处理后的 HTML
+      html = tempDiv.innerHTML;
+      console.log("this.editor.getMenuConfig('color')", this.editor.getMenuConfig('color'))
+      this.$emit('input', self.valueType === 'html' ? html : editor.getText())
+      this.$emit('on-change', html, editor.getText())
+    },
+    customPaste(editor, event, callback) {
+      //console.log('ClipboardEvent 粘贴事件对象', event)
+      const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
+      const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
+      const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）
+
+      //console.log("customPaste-html",rtf)
+      // 自定义插入内容
+      editor.setHtml(html)
+
+      // 返回 false ，阻止默认粘贴行为
+      event.preventDefault()
+      callback(false) // 返回值（注意，vue 事件的返回值，不能用 return）
+
+      // 返回 true ，继续默认的粘贴行为
+      // callback(true)
+    },
+  },
+  mounted() {
+
+  },
+  beforeDestroy() {
+    const editor = this.editor
+    if (editor == null) return
+    editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
+  },
+
+}
+</script>