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

package/package.json

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

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

@@ -2,16 +2,16 @@
   <div style="z-index: 999">
     <!-- 工具栏 -->
     <Toolbar
-        :editor="editor"
-        :defaultConfig="toolbarConfig"
+      :editor="editor"
+      :defaultConfig="toolbarConfig"
     />
     <!-- 编辑器 -->
     <Editor
-        :style="editorStyle"
-        :defaultConfig="editorConfig"
-        v-model="html"
-        @onChange="onChange"
-        @onCreated="onCreated"
+      :style="editorStyle"
+      :defaultConfig="editorConfig"
+      v-model="html"
+      @onChange="onChange"
+      @onCreated="onCreated"
     />
   </div>
 </template>
@@ -20,6 +20,11 @@
 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 {registerHrColorMenu, MENU_KEY, extractHrColorsFromHtml} from './hr-color-menu'
+
+// 注册分割线颜色菜单（模块级别，只执行一次）
+registerHrColorMenu(Boot)
 
 export default {
   name: 'WangEditor',
@@ -110,9 +115,12 @@ export default {
     return {
       editor: null,
       html: '',
+      hrCount: 0, // 追踪分割线数量
       toolbarConfig: {
-        // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
-        // excludeKeys: [ /* 隐藏哪些菜单 */ ],
+        insertKeys: {
+          index: 24, // 在分割线菜单后面插入
+          keys: [MENU_KEY]
+        }
       },
       editorConfig: {
         placeholder: '请输入内容...',
@@ -232,10 +240,17 @@ export default {
   watch: {
     value: {
       handler: function (newVal, oldVal) {
-        // 只有初次赋值需要处理：解决wangeditor表格、单元格边框属性赋值会丢失问题
-        if (oldVal === '<p><br></p>') {
+        // 初次赋值或从空内容变为有内容时处理
+        const isEmpty = !newVal || newVal === '<p><br></p>'
+        const wasEmpty = !oldVal || oldVal === '<p><br></p>'
+
+        if (!isEmpty && wasEmpty) {
           if (this.valueType === 'html') {
             let html = newVal;
+
+            // 先从 HTML 提取所有 hr 的颜色
+            const hrColors = extractHrColorsFromHtml(html)
+
             // 正则匹配 <table>...</table> 区域
             const tableRegex = /(<table)([\s\S]*?)(<\/table>)/gi;
             // 替换表格区域中的 borderWidth: **px;
@@ -253,9 +268,30 @@ export default {
               table.setAttribute('data-processed', 'true');
             });
             // 更新处理后的 HTML
-            const updatedHtml = tempDiv.innerHTML;
-            this.editor.setHtml(updatedHtml);
-            // this.editor.setHtml(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)
           }
@@ -299,17 +335,66 @@ export default {
 
     onCreated(editor) {
       this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
-      let html = this.value
-      if (html) this.editor.setHtml(html)
 
+      let html = this.value
+      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()
+
       // 创建一个临时的 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
+      }
+
+      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 => {
@@ -338,13 +423,6 @@ export default {
         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())
@@ -379,3 +457,10 @@ export default {
 
 }
 </script>
+
+<style lang="less" scoped>
+/deep/ .table-container {
+  width: fit-content !important;
+  margin: 10px auto !important;
+}
+</style>