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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sy-common/wang-editor",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.21",
   "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/hr-color-menu.js

@@ -0,0 +1,177 @@
+/**
+ * 分割线颜色菜单插件
+ */
+
+const MENU_KEY = 'hrColor'
+
+// 颜色列表
+const COLOR_LIST = [
+  '',
+  'rgb(0, 0, 0)',
+  'rgb(38, 38, 38)',
+  'rgb(89, 89, 89)',
+  'rgb(140, 140, 140)',
+  'rgb(191, 191, 191)',
+  '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)',
+]
+
+// 图标 SVG：分割线 + 彩色条
+const HR_COLOR_SVG = '<svg viewBox="0 0 1092 1024"><path d="M0 51.2m51.2 0l989.866667 0q51.2 0 51.2 51.2l0 0q0 51.2-51.2 51.2l-989.866667 0q-51.2 0-51.2-51.2l0 0q0 51.2 51.2-51.2Z" fill="#999"/><path d="M0 460.8m51.2 0l170.666667 0q51.2 0 51.2 51.2l0 0q0 51.2-51.2 51.2l-170.666667 0q-51.2 0-51.2-51.2l0 0q0 51.2 51.2-51.2Z" fill="#ff4d4f"/><path d="M273 460.8m51.2 0l170.666667 0q51.2 0 51.2 51.2l0 0q0 51.2-51.2 51.2l-170.666667 0q-51.2 0-51.2-51.2l0 0q0 51.2 51.2-51.2Z" fill="#faad14"/><path d="M546 460.8m51.2 0l170.666667 0q51.2 0 51.2 51.2l0 0q0 51.2-51.2 51.2l-170.666667 0q-51.2 0-51.2-51.2l0 0q0 51.2 51.2-51.2Z" fill="#52c41a"/><path d="M819 460.8m51.2 0l170.666667 0q51.2 0 51.2 51.2l0 0q0 51.2-51.2 51.2l-170.666667 0q-51.2 0-51.2-51.2l0 0q0 51.2 51.2-51.2Z" fill="#1890ff"/><path d="M0 870.4m51.2 0l989.866667 0q51.2 0 51.2 51.2l0 0q0 51.2-51.2 51.2l-989.866667 0q-51.2 0-51.2-51.2l0 0q0 51.2 51.2-51.2Z" fill="#999"/></svg>'
+
+function checkHrSelected(editor) {
+  if (editor.isDisabled()) return false
+  if (!editor.selection) return false
+  try {
+    const nodeGen = editor.nodes({ match: n => n.type === 'divider', universal: true })
+    for (const [node] of nodeGen) {
+      if (node) return true
+    }
+  } catch (e) {}
+  return false
+}
+
+function getDividerCurrentColor(editor) {
+  try {
+    const [nodeEntry] = editor.nodes({ match: n => n.type === 'divider', universal: true })
+    if (!nodeEntry) return ''
+    const [node] = nodeEntry
+    const domNode = editor.toDOMNode(node)
+    if (domNode) {
+      const hrElement = domNode.querySelector('hr') || domNode
+      return hrElement.getAttribute('data-divider-color') || ''
+    }
+  } catch (e) {}
+  return ''
+}
+
+function setDividerColor(editor, color) {
+  try {
+    const [nodeEntry] = editor.nodes({ match: n => n.type === 'divider', universal: true })
+    if (!nodeEntry) return
+    const [node] = nodeEntry
+
+    const domNode = editor.toDOMNode(node)
+    if (domNode) {
+      const hrElement = domNode.querySelector('hr') || domNode
+      if (color) {
+        hrElement.style.border = 'none'
+        hrElement.style.borderTop = '2px solid ' + color
+        hrElement.style.margin = '10px 0'
+        hrElement.setAttribute('data-divider-color', color)
+      } else {
+        hrElement.style.border = ''
+        hrElement.style.borderTop = ''
+        hrElement.style.margin = ''
+        hrElement.removeAttribute('data-divider-color')
+      }
+    }
+  } catch (e) {
+    console.warn('setDividerColor error:', e)
+  }
+  editor.emit('change')
+}
+
+// 创建颜色选择面板
+function createColorPanel() {
+  const $content = document.createElement('div')
+  $content.style.cssText = 'padding: 10px; display: flex; flex-wrap: wrap; gap: 4px; width: 200px;'
+
+  COLOR_LIST.forEach(color => {
+    const $item = document.createElement('button')
+    $item.type = 'button'
+    $item.style.cssText = color
+      ? 'width: 24px; height: 24px; border: 1px solid #d9d9d9; border-radius: 4px; cursor: pointer; background-color: ' + color + ';'
+      : 'width: 24px; height: 24px; border: 2px dashed #d9d9d9; border-radius: 4px; cursor: pointer; background: transparent;'
+    $item.setAttribute('data-color', color || '')
+    $content.appendChild($item)
+  })
+
+  return $content
+}
+
+// 从 HTML 提取所有 hr 的颜色
+function extractHrColorsFromHtml(html) {
+  const colors = []
+  const tempDiv = document.createElement('div')
+  tempDiv.innerHTML = html
+  const hrs = tempDiv.querySelectorAll('hr')
+  hrs.forEach(hr => {
+    const style = hr.getAttribute('style') || ''
+    const colorMatch = style.match(/border-top\s*:\s*\d+px\s+solid\s+(rgb\([^)]+\)|#[a-fA-F0-9]+)/i)
+    colors.push(colorMatch ? colorMatch[1] : '')
+  })
+  return colors
+}
+
+function registerHrColorMenu(Boot) {
+  const menuConf = {
+    key: MENU_KEY,
+    factory() {
+      let $panel = null
+
+      return {
+        title: '分割线颜色',
+        iconSvg: HR_COLOR_SVG,
+        tag: 'button',
+        showDropPanel: true,
+
+        isDisabled(editor) {
+          return !checkHrSelected(editor)
+        },
+
+        isActive(editor) {
+          return false
+        },
+
+        getValue(editor) {
+          return getDividerCurrentColor(editor)
+        },
+
+        exec(editor, value) {
+          setDividerColor(editor, value)
+        },
+
+        getPanelContentElem(editor) {
+          if (!$panel) {
+            $panel = createColorPanel()
+            $panel.querySelectorAll('button').forEach(btn => {
+              btn.addEventListener('click', () => {
+                const color = btn.getAttribute('data-color')
+                setDividerColor(editor, color)
+                editor.hidePanelOrModal()
+              })
+            })
+          }
+          return $panel
+        }
+      }
+    }
+  }
+
+  try {
+    Boot.registerMenu(menuConf)
+  } catch (e) {
+    if (!e.message.includes('already') && !e.message.includes('duplicate')) {
+      console.warn('HrColorMenu register warning:', e.message)
+    }
+  }
+}
+
+export {
+  MENU_KEY,
+  COLOR_LIST,
+  registerHrColorMenu,
+  checkHrSelected,
+  getDividerCurrentColor,
+  setDividerColor,
+  extractHrColorsFromHtml
+}

package/src/index.vue

@@ -1,17 +1,17 @@
 <template>
-  <div >
+  <div style="z-index: 999">
     <!-- 工具栏 -->
     <Toolbar
-        :editor="editor"
-        :defaultConfig="toolbarConfig"
+      :editor="editor"
+      :defaultConfig="toolbarConfig"
     />
     <!-- 编辑器 -->
     <Editor
-        style="height: 400px; overflow-y: hidden;"
-        :defaultConfig="editorConfig"
-        v-model="html"
-        @onChange="onChange"
-        @onCreated="onCreated"
+      :style="editorStyle"
+      :defaultConfig="editorConfig"
+      v-model="html"
+      @onChange="onChange"
+      @onCreated="onCreated"
     />
   </div>
 </template>
@@ -19,11 +19,16 @@
 <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'
+import {Boot} from '@wangeditor-next/editor'
+import {registerHrColorMenu, MENU_KEY, extractHrColorsFromHtml} from './hr-color-menu'
+
+// 注册分割线颜色菜单（模块级别，只执行一次）
+registerHrColorMenu(Boot)
 
 export default {
   name: 'WangEditor',
-  components: { Editor, Toolbar },
+  components: {Editor, Toolbar},
   props: {
     value: {
       type: String,
@@ -89,32 +94,143 @@ export default {
       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: {
-        // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
-        // excludeKeys: [ /* 隐藏哪些菜单 */ ],
+        insertKeys: {
+          index: 24, // 在分割线菜单后面插入
+          keys: [MENU_KEY]
+        }
       },
       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 +240,191 @@ export default {
   watch: {
     value: {
       handler: function (newVal, oldVal) {
-        //  console.log('watch',newVal+"  "+oldVal)
-        if (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(newVal)
+            let html = newVal;
+
+            // 先从 HTML 提取所有 hr 的颜色
+            const hrColors = extractHrColorsFromHtml(html)
+
+            // 正则匹配 <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
+            this.editor.setHtml(tempDiv.innerHTML)
+
+            // setHtml 后设置 hr 颜色到 DOM
+            if (hrColors.length > 0) {
+              // 用 setTimeout 等待 DOM 渲染完成
+              setTimeout(() => {
+                try {
+                  const container = this.editor.getEditableContainer()
+                  if (!container) return
+                  const hrs = container.querySelectorAll('hr')
+                  hrs.forEach((hr, index) => {
+                    const color = hrColors[index] || ''
+                    if (color) {
+                      hr.style.border = 'none'
+                      hr.style.borderTop = '2px solid ' + color
+                      hr.style.margin = '10px 0'
+                      hr.setAttribute('data-divider-color', color)
+                    }
+                  })
+                } catch (e) {
+                  console.warn('设置 hr 颜色失败:', e)
+                }
+              }, 100)
+            }
           } 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)
+      if (html) {
+        this.editor.setHtml(html)
+        // 处理已有颜色的 hr 元素，从 style 中提取颜色
+        this.$nextTick(() => {
+          try {
+            const container = this.editor.getEditableContainer()
+            if (!container) return
+            const hrs = container.querySelectorAll('hr')
+            // 初始化 hrCount，记录已有分割线数量
+            this.hrCount = hrs.length
+            hrs.forEach(hr => {
+              const style = hr.getAttribute('style') || ''
+              // 匹配 border 中的颜色
+              const colorMatch = style.match(/border\s*:[^;]*solid\s+(rgb\([^)]+\)|#[a-fA-F0-9]+)/i)
+              if (colorMatch) {
+                hr.setAttribute('data-divider-color', colorMatch[1])
+              }
+            })
+          } catch (e) {
+            console.warn('处理已存在 hr 颜色失败:', e)
+          }
+        })
+      }
     },
     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;"');  // 添加边框)
+
+      // 创建一个临时的 div 容器来解析 HTML
+      const tempDiv = document.createElement('div');
+      tempDiv.innerHTML = html;
+
+      // 从编辑器 DOM 获取所有 hr 的颜色，写入输出 HTML
+      const editorContainer = this.editor.getEditableContainer()
+      const editorHrs = editorContainer ? editorContainer.querySelectorAll('hr') : []
+      const outputHrs = tempDiv.querySelectorAll('hr')
+
+      // 检测新增的分割线，设置默认颜色
+      const DEFAULT_HR_COLOR = 'rgb(250, 64, 6)'
+      if (editorHrs.length > this.hrCount) {
+        // 有新增的分割线
+        for (let i = this.hrCount; i < editorHrs.length; i++) {
+          const hr = editorHrs[i]
+          hr.style.border = 'none'
+          hr.style.borderTop = '2px solid ' + DEFAULT_HR_COLOR
+          hr.style.margin = '10px 0'
+          hr.setAttribute('data-divider-color', DEFAULT_HR_COLOR)
+        }
+        this.hrCount = editorHrs.length
       }
-      console.log(html)
+
+      editorHrs.forEach((hr, index) => {
+        const color = hr.getAttribute('data-divider-color') || ''
+        if (color && outputHrs[index]) {
+          outputHrs[index].setAttribute('style', 'border: none; border-top: 2px solid ' + color + '; margin: 10px 0;')
+        }
+      })
+
+      // 处理 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');
+      });
+
+      // 更新处理后的 HTML
+      html = tempDiv.innerHTML;
       this.$emit('input', self.valueType === 'html' ? html : editor.getText())
       this.$emit('on-change', html, editor.getText())
     },
@@ -187,3 +457,10 @@ export default {
 
 }
 </script>
+
+<style lang="less" scoped>
+/deep/ .table-container {
+  width: fit-content !important;
+  margin: 10px auto !important;
+}
+</style>