@sy-common/wang-editor 1.0.0-beta.2 → 1.0.0-beta.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sy-common/wang-editor",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.20",
   "description": "",
   "main": "index.js",
   "author": "lambo",
@@ -9,13 +9,15 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "devDependencies": {
-    "@lambo-design/core": "^4.7.1-beta.140",
+  "dependencies": {
     "@wangeditor-next/editor": "^5.6.0",
     "@wangeditor-next/editor-for-vue2": "^1.0.2"
   },
+  "devDependencies": {
+    "@lambo-design/core": "^4.7.1-beta.140"
+  },
   "scripts": {
-    "release-upload-file": "pnpm release-beta && git push --follow-tags && pnpm re-publish",
+    "release": "pnpm release-beta && git push --follow-tags && pnpm re-publish",
     "release-major": "standard-version --release-as major",
     "release-minor": "standard-version --release-as minor",
     "release-patch": "standard-version --release-as patch",

package/src/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div >
+  <div style="z-index: 999">
     <!-- 工具栏 -->
     <Toolbar
         :editor="editor"
@@ -7,7 +7,7 @@
     />
     <!-- 编辑器 -->
     <Editor
-        style="height: 400px; overflow-y: hidden;"
+        :style="editorStyle"
         :defaultConfig="editorConfig"
         v-model="html"
         @onChange="onChange"
@@ -19,11 +19,11 @@
 <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 {Editor, Toolbar} from '@wangeditor-next/editor-for-vue2'
 
 export default {
   name: 'WangEditor',
-  components: { Editor, Toolbar },
+  components: {Editor, Toolbar},
   props: {
     value: {
       type: String,
@@ -89,6 +89,22 @@ export default {
       default: false
     },
 
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
+    /**
+    * @description: 隐藏菜单
+    */
+    hideMenu: {
+      type: Array,
+      default: () => []
+    },
+
+    height: {
+      type: [Number, String],
+      default: 400
+    }
   },
   data() {
     return {
@@ -101,20 +117,112 @@ export default {
       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, //上传接口地址
+            server: this.ossServerContext + this.ossFilePutUrl, //上传接口地址
             fieldName: 'file', //上传文件名
             methods: 'post',
             metaWithUrl: true, // 参数拼接到 url 上
             //自定义插入图片
-            customInsert:(res, insertFn)=>{
+            customInsert: (res, insertFn) => {
               let self = this;
               const imgInfo = res.data[0] || {}
-              const { fileId, fileName, contentType } = imgInfo
+              const {fileId, fileName, contentType} = imgInfo
               insertFn(self.ossServerContext + self.ossFileGetImgUrl + fileId, fileName, self.ossServerContext + self.ossFileGetImgUrl + fileId)
-            } ,
+            },
 
           },
         }
@@ -124,37 +232,121 @@ export default {
   watch: {
     value: {
       handler: function (newVal, oldVal) {
-        //  console.log('watch',newVal+"  "+oldVal)
-        if (oldVal === '') {
+        // 只有初次赋值需要处理：解决wangeditor表格、单元格边框属性赋值会丢失问题
+        if (oldVal === '<p><br></p>') {
           if (this.valueType === 'html') {
-            this.editor.setHtml(newVal)
+            let html = newVal;
+            // 正则匹配 <table>...</table> 区域
+            const tableRegex = /(<table)([\s\S]*?)(<\/table>)/gi;
+            // 替换表格区域中的 borderWidth: **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');
+            });
+            // 更新处理后的 HTML
+            const updatedHtml = tempDiv.innerHTML;
+            this.editor.setHtml(updatedHtml);
+            // 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: {
-    // editorId() {
-    //   return `editor${this._uid}`
-    // }
+    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()
-      if (html.includes('table')){
-        html = html.replace(/<table /g,'<table class="wangeditor-styled-table" style= "border-collapse: collapse;"');  // 添加边框)
-      }
-      console.log(html)
+      // 创建一个临时的 div 容器来解析 HTML
+      const tempDiv = document.createElement('div');
+      tempDiv.innerHTML = html;
+
+      // 处理 table 元素 -- 查找新增的表格并添加默认样式
+      const tables = tempDiv.querySelectorAll('table:not([data-processed])');
+      tables.forEach(table => {
+        const currentStyle = table.getAttribute('style') || '';
+        const newStyle = `border-collapse: collapse;border-style: solid; border-color: rgb(204, 204, 204);border-width: 1;${currentStyle}`.trim();
+        table.setAttribute('class', 'wangeditor-styled-table');
+        table.setAttribute('style', newStyle);
+
+        // 处理表头
+        const thCells = table.querySelectorAll('th');
+        thCells.forEach(cell => {
+          const cellCurrentStyle = cell.getAttribute('style') || '';
+          const cellNewStyle = `background-color: rgb(245, 242, 240);border-style: solid; border-color: rgb(204, 204, 204);border-width: 1;padding: 3px 5px;${cellCurrentStyle}`.trim();
+          cell.setAttribute('style', cellNewStyle);
+        });
+
+        // 处理单元格
+        const tdCells = table.querySelectorAll('td');
+        tdCells.forEach(cell => {
+          const cellCurrentStyle = cell.getAttribute('style') || '';
+          const cellNewStyle = `border-style: solid; border-color: rgb(204, 204, 204);border-width: 1;padding: 3px 5px;${cellCurrentStyle}`.trim();
+          cell.setAttribute('style', cellNewStyle);
+        });
+
+        // 标记已处理
+        table.setAttribute('data-processed', 'true');
+      });
+
+      // 处理 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;
       this.$emit('input', self.valueType === 'html' ? html : editor.getText())
       this.$emit('on-change', html, editor.getText())
     },