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

package/package.json

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

package/src/customHrMenu.js

@@ -0,0 +1,231 @@
+import { Transforms, Element } from 'slate'
+import { h } from 'snabbdom'
+
+class CustomHrMenu {
+  constructor() {
+    this.title = '彩色分割线'
+    this.tag = 'button'
+    this.showDropPanel = true  // ✅ 关键：必须设置为 true 才能弹出面板
+    this.iconSvg = '<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>' // 可选，设置菜单图标
+  }
+
+  // 判断菜单是否禁用
+  isDisabled(editor) {
+    return false
+  }
+
+  // 判断菜单是否激活
+  isActive(editor) {
+    return false
+  }
+
+  // 获取当前值
+  getValue(editor) {
+    return ''
+  }
+
+  // 点击菜单时执行（当没有下拉面板时才会调用此方法）
+  exec(editor, value) {
+    if (value) {
+      this.insertColoredHr(editor, value)
+    }
+  }
+
+  // ✅ 关键：创建下拉面板内容（颜色选择器）
+  getPanelContentElem(editor) {
+    const panel = document.createElement('div')
+    panel.style.cssText = `
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      gap: 8px;
+      padding: 12px;
+      background: white;
+      border-radius: 4px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+    `
+
+    // 预设颜色列表
+    const colors = [
+      '#000000', '#333333', '#666666', '#999999', '#cccccc',
+      '#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff',
+      '#ff6600', '#00ccff', '#ff0066', '#9933ff', '#33ff99'
+    ]
+
+    colors.forEach(color => {
+      const btn = document.createElement('button')
+      btn.setAttribute('data-color', color)
+      btn.style.cssText = `
+        width: 32px;
+        height: 32px;
+        background-color: ${color};
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: transform 0.2s;
+      `
+      btn.addEventListener('mouseenter', () => {
+        btn.style.transform = 'scale(1.1)'
+      })
+      btn.addEventListener('mouseleave', () => {
+        btn.style.transform = 'scale(1)'
+      })
+      btn.addEventListener('click', () => {
+        // 点击颜色时插入彩色分割线
+        this.insertColoredHr(editor, color)
+        // 关闭下拉面板
+        editor.hidePanelOrModal()
+      })
+      panel.appendChild(btn)
+    })
+
+    return panel
+  }
+
+  // 插入彩色分割线的公共方法
+  insertColoredHr(editor, color) {
+    // 插入自定义节点
+    editor.insertNode({
+      type: 'colored-hr',
+      color: color,
+      children: [{ text: '' }]
+    })
+
+    // 插入换行段落，方便继续编辑
+    editor.insertNode({
+      type: 'paragraph',
+      children: [{ text: '' }]
+    })
+  }
+}
+
+const renderColoredHr = (elem, children, editor) => {
+  const color = elem.color || '#cccccc'
+
+  // 使用 snabbdom 的 h() 函数创建 VNode
+  return h('hr', {
+    attrs: {
+      'data-color': color,
+      'data-w-e-type': 'colored-hr'
+    },
+    style: {
+      border: 'none',
+      borderTop: `2px solid ${color}`,
+      margin: '16px 0'
+    }
+  })
+}
+
+// 2. HTML 转换函数：保存时把自定义节点转成 HTML
+const hrToHtml = (elem, childrenHtml) => {
+  // 调试：打印 elem 看看是什么
+
+  const color = elem.color || '#cccccc'
+  const html = `<hr style="border: none; border-top: 2px solid ${color}; margin: 16px 0;" data-color="${color}" data-w-e-type="colored-hr">`
+  return html
+}
+
+// 3. HTML 解析函数：加载时把 HTML 转回自定义节点
+const parseHrHtml = (domElem, children, editor) => {
+  console.log('parseHrHtml received domElem:', domElem)
+  const color = domElem.getAttribute('data-color') || '#cccccc'
+  console.log('parseHrHtml color:', color)
+  return {
+    type: 'colored-hr',
+    color: color,
+    children: [{ text: '' }]
+  }
+}
+
+function withColoredHr(editor) {
+  const { isVoid, normalizeNode } = editor
+
+  // 标记 colored-hr 为 void 元素（不能输入文字）
+  editor.isVoid = (elem) => {
+    if (Element.isElement(elem) && elem.type === 'colored-hr') {
+      return true
+    }
+    return isVoid(elem)
+  }
+
+  // 可选：规范化节点，确保结构正确
+  editor.normalizeNode = ([node, path]) => {
+    if (Element.isElement(node) && node.type === 'colored-hr') {
+      // 确保 colored-hr 有 color 属性
+      if (node.color == null) {
+        Transforms.setNodes(editor, { color: '#cccccc' }, { at: path })
+        return
+      }
+    }
+    normalizeNode([node, path])
+  }
+
+  return editor
+}
+
+// 4. 组装模块并注册
+const coloredHrModule = {
+  elemsToHtml: [{
+    type: 'colored-hr',
+    elemToHtml: hrToHtml
+  }],
+  renderElems: [{
+    type: 'colored-hr',
+    renderElem: renderColoredHr
+  }],
+  parseElemsHtml: [{
+    selector: 'hr[data-w-e-type="colored-hr"]',
+    parseElemHtml: parseHrHtml
+  }],
+
+  editorPlugin: withColoredHr,
+
+  menus: [{
+    key: 'customHrMenu',
+    factory() {
+      return new CustomHrMenu()
+    }
+  }]
+}
+
+
+
+export function registerMenu(Boot) {
+  try {
+    // 1. 注册菜单（你确认这个可以）
+    Boot.registerMenu({
+      key: 'customHrMenu',
+      factory: () => new CustomHrMenu()
+    })
+    console.log('✅ 菜单注册成功')
+
+    // 2. 注册渲染
+    Boot.registerRenderElem({
+      type: 'colored-hr',
+      renderElem: renderColoredHr
+    })
+    console.log('✅ 渲染注册成功')
+
+    // 3. 注册 HTML 导出
+    Boot.registerElemToHtml({
+      type: 'colored-hr',
+      elemToHtml: hrToHtml
+    })
+    console.log('✅ HTML导出注册成功')
+
+    // 4. 注册 HTML 解析
+    Boot.registerParseElemHtml({
+      selector: 'hr[data-color]',
+      parseElemHtml: parseHrHtml
+    })
+    console.log('✅ HTML解析注册成功')
+
+    // 5. 注册插件
+    Boot.registerPlugin(withColoredHr)
+    console.log('✅ 插件注册成功')
+  } catch (e) {
+    if (!e.message.includes('already') && !e.message.includes('duplicate')) {
+      console.warn('注册失败:', e)
+      throw e
+    }
+  }
+}

package/src/index.vue

@@ -21,10 +21,9 @@ 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'
-
+import {registerMenu} from './customHrMenu'
 // 注册分割线颜色菜单（模块级别，只执行一次）
-registerHrColorMenu(Boot)
+registerMenu(Boot)
 
 export default {
   name: 'WangEditor',
@@ -99,8 +98,8 @@ export default {
       default: false
     },
     /**
-    * @description: 隐藏菜单
-    */
+     * @description: 隐藏菜单
+     */
     hideMenu: {
       type: Array,
       default: () => []
@@ -119,7 +118,7 @@ export default {
       toolbarConfig: {
         insertKeys: {
           index: 24, // 在分割线菜单后面插入
-          keys: [MENU_KEY]
+          keys: ['customHrMenu']
         }
       },
       editorConfig: {
@@ -245,53 +244,8 @@ export default {
 
         if (!isEmpty && wasEmpty) {
           if (this.valueType === 'html') {
-            let html = newVal;
-            const hrColors = extractHrColorsFromHtml(html)
-
-            // 【关键修复】在 setHtml 之前，先从 HTML 字符串计算 hr 数量
-            // 这样 setHtml 触发 onChange 时，hrCount 已经是正确的
-            const tempDivForCount = document.createElement('div')
-            tempDivForCount.innerHTML = html
-            this.hrCount = tempDivForCount.querySelectorAll('hr').length
-
-            // 表格处理...
-            const tableRegex = /(<table)([\s\S]*?)(<\/table>)/gi;
-            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');
-            tempDiv.innerHTML = html;
-            const tables = tempDiv.querySelectorAll('table');
-            tables.forEach(table => {
-              table.setAttribute('data-processed', 'true');
-            });
-
-            this.editor.setHtml(tempDiv.innerHTML)
-
-            // setHtml 后异步设置 hr 颜色样式到 DOM
-            if (hrColors.length > 0) {
-              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)
-                    }
-                  })
-                  this.hrCount = hrs.length
-                } catch (e) {
-                  console.warn('设置 hr 颜色失败:', e)
-                }
-              }, 100)
-            }
+            let html = newVal
+            this.editor.setHtml(html)
           } else {
             this.editor.insertText(newVal)
           }
@@ -334,124 +288,18 @@ export default {
   methods: {
 
     onCreated(editor) {
-      this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
-
-      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)
-          }
-        })
+      this.editor = Object.seal(editor)
+      if (this.value) {
+        this.editor.setHtml(this.value)
       }
     },
     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) {
-        // 有新增的分割线：只给没有颜色的 hr 设置默认色
-        for (let i = this.hrCount; i < editorHrs.length; i++) {
-          const hr = editorHrs[i]
-          // 【关键】如果 hr 已经有颜色（回显的），不要覆盖
-          if (!hr.getAttribute('data-divider-color')) {
-            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 => {
-        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())
+      let html = editor.getHtml()
+      this.$emit('input', this.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