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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/customHrMenu.js +231 -0
  3. package/src/index.vue +337 -469
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sy-common/wang-editor",
3
- "version": "1.0.0-beta.22",
3
+ "version": "1.0.0-beta.24",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "author": "lambo",
package/src/customHrMenu.js ADDED
@@ -0,0 +1,231 @@
1
+ import { Transforms, Element } from 'slate'
2
+ import { h } from 'snabbdom'
3
+
4
+ class CustomHrMenu {
5
+ constructor() {
6
+ this.title = '彩色分割线'
7
+ this.tag = 'button'
8
+ this.showDropPanel = true // ✅ 关键：必须设置为 true 才能弹出面板
9
+ 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>' // 可选，设置菜单图标
10
+ }
11
+
12
+ // 判断菜单是否禁用
13
+ isDisabled(editor) {
14
+ return false
15
+ }
16
+
17
+ // 判断菜单是否激活
18
+ isActive(editor) {
19
+ return false
20
+ }
21
+
22
+ // 获取当前值
23
+ getValue(editor) {
24
+ return ''
25
+ }
26
+
27
+ // 点击菜单时执行（当没有下拉面板时才会调用此方法）
28
+ exec(editor, value) {
29
+ if (value) {
30
+ this.insertColoredHr(editor, value)
31
+ }
32
+ }
33
+
34
+ // ✅ 关键：创建下拉面板内容（颜色选择器）
35
+ getPanelContentElem(editor) {
36
+ const panel = document.createElement('div')
37
+ panel.style.cssText = `
38
+ display: grid;
39
+ grid-template-columns: repeat(5, 1fr);
40
+ gap: 8px;
41
+ padding: 12px;
42
+ background: white;
43
+ border-radius: 4px;
44
+ box-shadow: 0 2px 8px rgba(0,0,0,0.15);
45
+ `
46
+
47
+ // 预设颜色列表
48
+ const colors = [
49
+ '#000000', '#333333', '#666666', '#999999', '#cccccc',
50
+ '#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff',
51
+ '#ff6600', '#00ccff', '#ff0066', '#9933ff', '#33ff99'
52
+ ]
53
+
54
+ colors.forEach(color => {
55
+ const btn = document.createElement('button')
56
+ btn.setAttribute('data-color', color)
57
+ btn.style.cssText = `
58
+ width: 32px;
59
+ height: 32px;
60
+ background-color: ${color};
61
+ border: 1px solid #ddd;
62
+ border-radius: 4px;
63
+ cursor: pointer;
64
+ transition: transform 0.2s;
65
+ `
66
+ btn.addEventListener('mouseenter', () => {
67
+ btn.style.transform = 'scale(1.1)'
68
+ })
69
+ btn.addEventListener('mouseleave', () => {
70
+ btn.style.transform = 'scale(1)'
71
+ })
72
+ btn.addEventListener('click', () => {
73
+ // 点击颜色时插入彩色分割线
74
+ this.insertColoredHr(editor, color)
75
+ // 关闭下拉面板
76
+ editor.hidePanelOrModal()
77
+ })
78
+ panel.appendChild(btn)
79
+ })
80
+
81
+ return panel
82
+ }
83
+
84
+ // 插入彩色分割线的公共方法
85
+ insertColoredHr(editor, color) {
86
+ // 插入自定义节点
87
+ editor.insertNode({
88
+ type: 'colored-hr',
89
+ color: color,
90
+ children: [{ text: '' }]
91
+ })
92
+
93
+ // 插入换行段落，方便继续编辑
94
+ editor.insertNode({
95
+ type: 'paragraph',
96
+ children: [{ text: '' }]
97
+ })
98
+ }
99
+ }
100
+
101
+ const renderColoredHr = (elem, children, editor) => {
102
+ const color = elem.color || '#cccccc'
103
+
104
+ // 使用 snabbdom 的 h() 函数创建 VNode
105
+ return h('hr', {
106
+ attrs: {
107
+ 'data-color': color,
108
+ 'data-w-e-type': 'colored-hr'
109
+ },
110
+ style: {
111
+ border: 'none',
112
+ borderTop: `2px solid ${color}`,
113
+ margin: '16px 0'
114
+ }
115
+ })
116
+ }
117
+
118
+ // 2. HTML 转换函数：保存时把自定义节点转成 HTML
119
+ const hrToHtml = (elem, childrenHtml) => {
120
+ // 调试：打印 elem 看看是什么
121
+
122
+ const color = elem.color || '#cccccc'
123
+ const html = `<hr style="border: none; border-top: 2px solid ${color}; margin: 16px 0;" data-color="${color}" data-w-e-type="colored-hr">`
124
+ return html
125
+ }
126
+
127
+ // 3. HTML 解析函数：加载时把 HTML 转回自定义节点
128
+ const parseHrHtml = (domElem, children, editor) => {
129
+ console.log('parseHrHtml received domElem:', domElem)
130
+ const color = domElem.getAttribute('data-color') || '#cccccc'
131
+ console.log('parseHrHtml color:', color)
132
+ return {
133
+ type: 'colored-hr',
134
+ color: color,
135
+ children: [{ text: '' }]
136
+ }
137
+ }
138
+
139
+ function withColoredHr(editor) {
140
+ const { isVoid, normalizeNode } = editor
141
+
142
+ // 标记 colored-hr 为 void 元素（不能输入文字）
143
+ editor.isVoid = (elem) => {
144
+ if (Element.isElement(elem) && elem.type === 'colored-hr') {
145
+ return true
146
+ }
147
+ return isVoid(elem)
148
+ }
149
+
150
+ // 可选：规范化节点，确保结构正确
151
+ editor.normalizeNode = ([node, path]) => {
152
+ if (Element.isElement(node) && node.type === 'colored-hr') {
153
+ // 确保 colored-hr 有 color 属性
154
+ if (node.color == null) {
155
+ Transforms.setNodes(editor, { color: '#cccccc' }, { at: path })
156
+ return
157
+ }
158
+ }
159
+ normalizeNode([node, path])
160
+ }
161
+
162
+ return editor
163
+ }
164
+
165
+ // 4. 组装模块并注册
166
+ const coloredHrModule = {
167
+ elemsToHtml: [{
168
+ type: 'colored-hr',
169
+ elemToHtml: hrToHtml
170
+ }],
171
+ renderElems: [{
172
+ type: 'colored-hr',
173
+ renderElem: renderColoredHr
174
+ }],
175
+ parseElemsHtml: [{
176
+ selector: 'hr[data-w-e-type="colored-hr"]',
177
+ parseElemHtml: parseHrHtml
178
+ }],
179
+
180
+ editorPlugin: withColoredHr,
181
+
182
+ menus: [{
183
+ key: 'customHrMenu',
184
+ factory() {
185
+ return new CustomHrMenu()
186
+ }
187
+ }]
188
+ }
189
+
190
+
191
+
192
+ export function registerMenu(Boot) {
193
+ try {
194
+ // 1. 注册菜单（你确认这个可以）
195
+ Boot.registerMenu({
196
+ key: 'customHrMenu',
197
+ factory: () => new CustomHrMenu()
198
+ })
199
+ console.log('✅ 菜单注册成功')
200
+
201
+ // 2. 注册渲染
202
+ Boot.registerRenderElem({
203
+ type: 'colored-hr',
204
+ renderElem: renderColoredHr
205
+ })
206
+ console.log('✅ 渲染注册成功')
207
+
208
+ // 3. 注册 HTML 导出
209
+ Boot.registerElemToHtml({
210
+ type: 'colored-hr',
211
+ elemToHtml: hrToHtml
212
+ })
213
+ console.log('✅ HTML导出注册成功')
214
+
215
+ // 4. 注册 HTML 解析
216
+ Boot.registerParseElemHtml({
217
+ selector: 'hr[data-color]',
218
+ parseElemHtml: parseHrHtml
219
+ })
220
+ console.log('✅ HTML解析注册成功')
221
+
222
+ // 5. 注册插件
223
+ Boot.registerPlugin(withColoredHr)
224
+ console.log('✅ 插件注册成功')
225
+ } catch (e) {
226
+ if (!e.message.includes('already') && !e.message.includes('duplicate')) {
227
+ console.warn('注册失败:', e)
228
+ throw e
229
+ }
230
+ }
231
+ }
package/src/index.vue CHANGED
@@ -1,469 +1,337 @@
1
- <template>
2
- <div style="z-index: 999">
3
- <!-- 工具栏 -->
4
- <Toolbar
5
- :editor="editor"
6
- :defaultConfig="toolbarConfig"
7
- />
8
- <!-- 编辑器 -->
9
- <Editor
10
- :style="editorStyle"
11
- :defaultConfig="editorConfig"
12
- v-model="html"
13
- @onChange="onChange"
14
- @onCreated="onCreated"
15
- />
16
- </div>
17
- </template>
18
-
19
- <script>
20
- import '@wangeditor-next/editor/dist/css/style.css'
21
- import {oneOf} from '@lambo-design/shared/utils/platform';
22
- import {Editor, Toolbar} from '@wangeditor-next/editor-for-vue2'
23
- import {Boot} from '@wangeditor-next/editor'
24
- import {registerHrColorMenu, MENU_KEY, extractHrColorsFromHtml} from './hr-color-menu'
25
-
26
- // 注册分割线颜色菜单（模块级别，只执行一次）
27
- registerHrColorMenu(Boot)
28
-
29
- export default {
30
- name: 'WangEditor',
31
- components: {Editor, Toolbar},
32
- props: {
33
- value: {
34
- type: String,
35
- default: ''
36
- },
37
- /**
38
- * 绑定的值的类型, enum: ['html', 'text']
39
- */
40
- valueType: {
41
- type: String,
42
- default: 'html',
43
- validator: (val) => {
44
- return oneOf(val, ['html', 'text'])
45
- }
46
- },
47
- /**
48
- * @description 设置change事件触发时间间隔
49
- */
50
- changeInterval: {
51
- type: Number,
52
- default: 200
53
- },
54
- /**
55
- * @description 是否开启本地存储
56
- */
57
- cache: {
58
- type: Boolean,
59
- default: true
60
- },
61
- /**
62
- * @description 是否使用 base64 保存图片
63
- */
64
- uploadImgShowBase64: {
65
- type: Boolean,
66
- default: false
67
- },
68
- /**
69
- * 上传图片上下文
70
- */
71
- ossServerContext: {
72
- type: String,
73
- default: ''
74
- },
75
- /**
76
- * 上传图片Url地址
77
- */
78
- ossFilePutUrl: {
79
- type: String,
80
- default: "/oss/file/put"
81
- },
82
- /**
83
- * 获取图片url地址
84
- */
85
- ossFileGetImgUrl: {
86
- type: String,
87
- default: "/oss/file/get/"
88
- },
89
- /**
90
- * @description 是否保留粘贴内容的样式
91
- */
92
- preservePasteStyle: {
93
- type: Boolean,
94
- default: false
95
- },
96
-
97
- readOnly: {
98
- type: Boolean,
99
- default: false
100
- },
101
- /**
102
- * @description: 隐藏菜单
103
- */
104
- hideMenu: {
105
- type: Array,
106
- default: () => []
107
- },
108
-
109
- height: {
110
- type: [Number, String],
111
- default: 400
112
- }
113
- },
114
- data() {
115
- return {
116
- editor: null,
117
- html: '',
118
- hrCount: 0, // 追踪分割线数量
119
- toolbarConfig: {
120
- insertKeys: {
121
- index: 24, // 在分割线菜单后面插入
122
- keys: [MENU_KEY]
123
- }
124
- },
125
- editorConfig: {
126
- placeholder: '请输入内容...',
127
- MENU_CONF: {
128
- fontFamily: {
129
- fontFamilyList: [
130
- "黑体",
131
- {
132
- name: "仿宋",
133
- value: "仿宋"
134
- },
135
- "仿宋_GB2312",
136
- "楷体",
137
- "楷体_GB2312",
138
- "标楷体",
139
- "华文仿宋",
140
- "华文楷体",
141
- {
142
- name: "宋体",
143
- value: "宋体"
144
- }, "隶书", "方正小标宋简体", "思源宋体‌", "微软雅黑", "Arial", "Tahoma", "Verdana", "Times New Roman", "Courier New"]
145
- },
146
- color: {
147
- colors: [
148
- "rgb(0, 0, 0)",
149
- "rgb(38, 38, 38)",
150
- "rgb(89, 89, 89)",
151
- "rgb(140, 140, 140)",
152
- "rgb(191, 191, 191)",
153
- "rgb(217, 217, 217)",
154
- "rgb(233, 233, 233)",
155
- "rgb(245, 245, 245)",
156
- "rgb(250, 250, 250)",
157
- "rgb(255, 255, 255)",
158
- "rgb(225, 60, 57)",
159
- "rgb(231, 95, 51)",
160
- "rgb(235, 144, 58)",
161
- "rgb(245, 219, 77)",
162
- "rgb(114, 192, 64)",
163
- "rgb(89, 191, 192)",
164
- "rgb(66, 144, 247)",
165
- "rgb(54, 88, 226)",
166
- "rgb(106, 57, 201)",
167
- "rgb(216, 68, 147)",
168
- "rgb(251, 233, 230)",
169
- "rgb(252, 237, 225)",
170
- "rgb(252, 239, 212)",
171
- "rgb(252, 251, 207)",
172
- "rgb(231, 246, 213)",
173
- "rgb(218, 244, 240)",
174
- "rgb(217, 237, 250)",
175
- "rgb(224, 232, 250)",
176
- "rgb(237, 225, 248)",
177
- "rgb(246, 226, 234)",
178
- "rgb(255, 163, 158)",
179
- "rgb(255, 187, 150)",
180
- "rgb(255, 213, 145)",
181
- "rgb(255, 251, 143)",
182
- "rgb(183, 235, 143)",
183
- "rgb(135, 232, 222)",
184
- "rgb(145, 213, 255)",
185
- "rgb(173, 198, 255)",
186
- "rgb(211, 173, 247)",
187
- "rgb(255, 173, 210)",
188
- "rgb(255, 77, 79)",
189
- "rgb(255, 122, 69)",
190
- "rgb(255, 169, 64)",
191
- "rgb(255, 236, 61)",
192
- "rgb(115, 209, 61)",
193
- "rgb(54, 207, 201)",
194
- "rgb(64, 169, 255)",
195
- "rgb(89, 126, 247)",
196
- "rgb(146, 84, 222)",
197
- "rgb(247, 89, 171)",
198
- "rgb(207, 19, 34)",
199
- "rgb(212, 56, 13)",
200
- "rgb(212, 107, 8)",
201
- "rgb(212, 177, 6)",
202
- "rgb(56, 158, 13)",
203
- "rgb(8, 151, 156)",
204
- "rgb(9, 109, 217)",
205
- "rgb(29, 57, 196)",
206
- "rgb(83, 29, 171)",
207
- "rgb(196, 29, 127)",
208
- "rgb(130, 0, 20)",
209
- "rgb(135, 20, 0)",
210
- "rgb(135, 56, 0)",
211
- "rgb(97, 71, 0)",
212
- "rgb(19, 82, 0)",
213
- "rgb(0, 71, 79)",
214
- "rgb(0, 58, 140)",
215
- "rgb(6, 17, 120)",
216
- "rgb(34, 7, 94)",
217
- "rgb(120, 6, 80)",
218
- "rgb(250,64,6)"
219
- ]
220
- },
221
- uploadImage: {
222
- //上传图片配置
223
- server: this.ossServerContext + this.ossFilePutUrl, //上传接口地址
224
- fieldName: 'file', //上传文件名
225
- methods: 'post',
226
- metaWithUrl: true, // 参数拼接到 url 上
227
- //自定义插入图片
228
- customInsert: (res, insertFn) => {
229
- let self = this;
230
- const imgInfo = res.data[0] || {}
231
- const {fileId, fileName, contentType} = imgInfo
232
- insertFn(self.ossServerContext + self.ossFileGetImgUrl + fileId, fileName, self.ossServerContext + self.ossFileGetImgUrl + fileId)
233
- },
234
-
235
- },
236
- }
237
- }
238
- }
239
- },
240
- watch: {
241
- value: {
242
- handler: function (newVal, oldVal) {
243
- const isEmpty = !newVal || newVal === '<p><br></p>'
244
- const wasEmpty = !oldVal || oldVal === '<p><br></p>'
245
-
246
- if (!isEmpty && wasEmpty) {
247
- if (this.valueType === 'html') {
248
- let html = newVal;
249
- const hrColors = extractHrColorsFromHtml(html)
250
-
251
- // 【关键修复】在 setHtml 之前，先从 HTML 字符串计算 hr 数量
252
- // 这样 setHtml 触发 onChange 时，hrCount 已经是正确的
253
- const tempDivForCount = document.createElement('div')
254
- tempDivForCount.innerHTML = html
255
- this.hrCount = tempDivForCount.querySelectorAll('hr').length
256
-
257
- // 表格处理...
258
- const tableRegex = /(<table)([\s\S]*?)(<\/table>)/gi;
259
- html = html.replace(tableRegex, (match, startTag, content, endTag) => {
260
- const updatedContent = content.replace(/border-width:\s*(\d+)px;/g, 'border-width: $1;');
261
- return `${startTag}${updatedContent}${endTag}`;
262
- });
263
-
264
- const tempDiv = document.createElement('div');
265
- tempDiv.innerHTML = html;
266
- const tables = tempDiv.querySelectorAll('table');
267
- tables.forEach(table => {
268
- table.setAttribute('data-processed', 'true');
269
- });
270
-
271
- this.editor.setHtml(tempDiv.innerHTML)
272
-
273
- // setHtml 后异步设置 hr 颜色样式到 DOM
274
- if (hrColors.length > 0) {
275
- setTimeout(() => {
276
- try {
277
- const container = this.editor.getEditableContainer()
278
- if (!container) return
279
- const hrs = container.querySelectorAll('hr')
280
- hrs.forEach((hr, index) => {
281
- const color = hrColors[index] || ''
282
- if (color) {
283
- hr.style.border = 'none'
284
- hr.style.borderTop = '2px solid ' + color
285
- hr.style.margin = '10px 0'
286
- hr.setAttribute('data-divider-color', color)
287
- }
288
- })
289
- this.hrCount = hrs.length
290
- } catch (e) {
291
- console.warn('设置 hr 颜色失败:', e)
292
- }
293
- }, 100)
294
- }
295
- } else {
296
- this.editor.insertText(newVal)
297
- }
298
- }
299
- }
300
- },
301
-
302
- readOnly: {
303
- handler(newVal){
304
- this.editorConfig.readOnly = newVal
305
- if(newVal){
306
- this.toolbarConfig.toolbarKeys = ['fullScreen']
307
- }
308
- },
309
- immediate: true,
310
- },
311
-
312
- hideMenu: {
313
- handler(newVal){
314
- this.toolbarConfig.excludeKeys = newVal
315
- },
316
- immediate: true,
317
- deep: true
318
- }
319
- },
320
- computed: {
321
- editorStyle() {
322
- let finalHeight = this.height;
323
- // 如果是数字，自动拼接 px 单位
324
- if (typeof finalHeight === 'number') {
325
- finalHeight = `${finalHeight}px`;
326
- }
327
-
328
- return {
329
- height: finalHeight,
330
- 'overflow-y': 'hidden'
331
- }
332
- }
333
- },
334
- methods: {
335
-
336
- onCreated(editor) {
337
- this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
338
-
339
- let html = this.value
340
- if (html) {
341
- this.editor.setHtml(html)
342
- // 处理已有颜色的 hr 元素，从 style 中提取颜色
343
- this.$nextTick(() => {
344
- try {
345
- const container = this.editor.getEditableContainer()
346
- if (!container) return
347
- const hrs = container.querySelectorAll('hr')
348
- // 初始化 hrCount，记录已有分割线数量
349
- this.hrCount = hrs.length
350
- hrs.forEach(hr => {
351
- const style = hr.getAttribute('style') || ''
352
- // 匹配 border 中的颜色
353
- const colorMatch = style.match(/border\s*:[^;]*solid\s+(rgb\([^)]+\)|#[a-fA-F0-9]+)/i)
354
- if (colorMatch) {
355
- hr.setAttribute('data-divider-color', colorMatch[1])
356
- }
357
- })
358
- } catch (e) {
359
- console.warn('处理已存在 hr 颜色失败:', e)
360
- }
361
- })
362
- }
363
- },
364
- onChange(editor) {
365
- let self = this;
366
- let html = this.editor.getHtml()
367
-
368
- // 创建一个临时的 div 容器来解析 HTML
369
- const tempDiv = document.createElement('div');
370
- tempDiv.innerHTML = html;
371
-
372
- // 从编辑器 DOM 获取所有 hr 的颜色，写入输出 HTML
373
- const editorContainer = this.editor.getEditableContainer()
374
- const editorHrs = editorContainer ? editorContainer.querySelectorAll('hr') : []
375
- const outputHrs = tempDiv.querySelectorAll('hr')
376
-
377
- // 检测新增的分割线，设置默认颜色
378
- const DEFAULT_HR_COLOR = 'rgb(250, 64, 6)'
379
- if (editorHrs.length > this.hrCount) {
380
- // 有新增的分割线：只给没有颜色的 hr 设置默认色
381
- for (let i = this.hrCount; i < editorHrs.length; i++) {
382
- const hr = editorHrs[i]
383
- // 【关键】如果 hr 已经有颜色（回显的），不要覆盖
384
- if (!hr.getAttribute('data-divider-color')) {
385
- hr.style.border = 'none'
386
- hr.style.borderTop = '2px solid ' + DEFAULT_HR_COLOR
387
- hr.style.margin = '10px 0'
388
- hr.setAttribute('data-divider-color', DEFAULT_HR_COLOR)
389
- }
390
- }
391
- this.hrCount = editorHrs.length
392
- }
393
-
394
- editorHrs.forEach((hr, index) => {
395
- const color = hr.getAttribute('data-divider-color') || ''
396
- if (color && outputHrs[index]) {
397
- outputHrs[index].setAttribute('style', 'border: none; border-top: 2px solid ' + color + '; margin: 10px 0;')
398
- }
399
- })
400
-
401
- // 处理 table 元素 -- 查找新增的表格并添加默认样式
402
- const tables = tempDiv.querySelectorAll('table:not([data-processed])');
403
- tables.forEach(table => {
404
- const currentStyle = table.getAttribute('style') || '';
405
- const newStyle = `border-collapse: collapse;border-style: solid; border-color: rgb(204, 204, 204);border-width: 1;${currentStyle}`.trim();
406
- table.setAttribute('class', 'wangeditor-styled-table');
407
- table.setAttribute('style', newStyle);
408
-
409
- // 处理表头
410
- const thCells = table.querySelectorAll('th');
411
- thCells.forEach(cell => {
412
- const cellCurrentStyle = cell.getAttribute('style') || '';
413
- 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();
414
- cell.setAttribute('style', cellNewStyle);
415
- });
416
-
417
- // 处理单元格
418
- const tdCells = table.querySelectorAll('td');
419
- tdCells.forEach(cell => {
420
- const cellCurrentStyle = cell.getAttribute('style') || '';
421
- const cellNewStyle = `border-style: solid; border-color: rgb(204, 204, 204);border-width: 1;padding: 3px 5px;${cellCurrentStyle}`.trim();
422
- cell.setAttribute('style', cellNewStyle);
423
- });
424
-
425
- // 标记已处理
426
- table.setAttribute('data-processed', 'true');
427
- });
428
-
429
- // 更新处理后的 HTML
430
- html = tempDiv.innerHTML;
431
- this.$emit('input', self.valueType === 'html' ? html : editor.getText())
432
- this.$emit('on-change', html, editor.getText())
433
- },
434
- customPaste(editor, event, callback) {
435
- //console.log('ClipboardEvent 粘贴事件对象', event)
436
- const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
437
- const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
438
- const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）
439
-
440
- //console.log("customPaste-html",rtf)
441
- // 自定义插入内容
442
- editor.setHtml(html)
443
-
444
- // 返回 false ，阻止默认粘贴行为
445
- event.preventDefault()
446
- callback(false) // 返回值（注意，vue 事件的返回值，不能用 return）
447
-
448
- // 返回 true ，继续默认的粘贴行为
449
- // callback(true)
450
- },
451
- },
452
- mounted() {
453
-
454
- },
455
- beforeDestroy() {
456
- const editor = this.editor
457
- if (editor == null) return
458
- editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
459
- },
460
-
461
- }
462
- </script>
463
-
464
- <style lang="less" scoped>
465
- /deep/ .table-container {
466
- width: fit-content !important;
467
- margin: 10px auto !important;
468
- }
469
- </style>
1
+ <template>
2
+ <div style="z-index: 999">
3
+ <!-- 工具栏 -->
4
+ <Toolbar
5
+ :editor="editor"
6
+ :defaultConfig="toolbarConfig"
7
+ />
8
+ <!-- 编辑器 -->
9
+ <Editor
10
+ :style="editorStyle"
11
+ :defaultConfig="editorConfig"
12
+ v-model="html"
13
+ @onChange="onChange"
14
+ @onCreated="onCreated"
15
+ />
16
+ </div>
17
+ </template>
18
+
19
+ <script>
20
+ import '@wangeditor-next/editor/dist/css/style.css'
21
+ import {oneOf} from '@lambo-design/shared/utils/platform';
22
+ import {Editor, Toolbar} from '@wangeditor-next/editor-for-vue2'
23
+ import {Boot} from '@wangeditor-next/editor'
24
+ import {registerMenu} from './customHrMenu'
25
+ // 注册分割线颜色菜单（模块级别，只执行一次）
26
+ registerMenu(Boot)
27
+
28
+ export default {
29
+ name: 'WangEditor',
30
+ components: {Editor, Toolbar},
31
+ props: {
32
+ value: {
33
+ type: String,
34
+ default: ''
35
+ },
36
+ /**
37
+ * 绑定的值的类型, enum: ['html', 'text']
38
+ */
39
+ valueType: {
40
+ type: String,
41
+ default: 'html',
42
+ validator: (val) => {
43
+ return oneOf(val, ['html', 'text'])
44
+ }
45
+ },
46
+ /**
47
+ * @description 设置change事件触发时间间隔
48
+ */
49
+ changeInterval: {
50
+ type: Number,
51
+ default: 200
52
+ },
53
+ /**
54
+ * @description 是否开启本地存储
55
+ */
56
+ cache: {
57
+ type: Boolean,
58
+ default: true
59
+ },
60
+ /**
61
+ * @description 是否使用 base64 保存图片
62
+ */
63
+ uploadImgShowBase64: {
64
+ type: Boolean,
65
+ default: false
66
+ },
67
+ /**
68
+ * 上传图片上下文
69
+ */
70
+ ossServerContext: {
71
+ type: String,
72
+ default: ''
73
+ },
74
+ /**
75
+ * 上传图片Url地址
76
+ */
77
+ ossFilePutUrl: {
78
+ type: String,
79
+ default: "/oss/file/put"
80
+ },
81
+ /**
82
+ * 获取图片url地址
83
+ */
84
+ ossFileGetImgUrl: {
85
+ type: String,
86
+ default: "/oss/file/get/"
87
+ },
88
+ /**
89
+ * @description 是否保留粘贴内容的样式
90
+ */
91
+ preservePasteStyle: {
92
+ type: Boolean,
93
+ default: false
94
+ },
95
+
96
+ readOnly: {
97
+ type: Boolean,
98
+ default: false
99
+ },
100
+ /**
101
+ * @description: 隐藏菜单
102
+ */
103
+ hideMenu: {
104
+ type: Array,
105
+ default: () => []
106
+ },
107
+
108
+ height: {
109
+ type: [Number, String],
110
+ default: 400
111
+ }
112
+ },
113
+ data() {
114
+ return {
115
+ editor: null,
116
+ html: '',
117
+ hrCount: 0, // 追踪分割线数量
118
+ toolbarConfig: {
119
+ insertKeys: {
120
+ index: 24, // 在分割线菜单后面插入
121
+ keys: ['customHrMenu']
122
+ }
123
+ },
124
+ editorConfig: {
125
+ placeholder: '请输入内容...',
126
+ MENU_CONF: {
127
+ fontFamily: {
128
+ fontFamilyList: [
129
+ "黑体",
130
+ {
131
+ name: "仿宋",
132
+ value: "仿宋"
133
+ },
134
+ "仿宋_GB2312",
135
+ "楷体",
136
+ "楷体_GB2312",
137
+ "标楷体",
138
+ "华文仿宋",
139
+ "华文楷体",
140
+ {
141
+ name: "宋体",
142
+ value: "宋体"
143
+ }, "隶书", "方正小标宋简体", "思源宋体‌", "微软雅黑", "Arial", "Tahoma", "Verdana", "Times New Roman", "Courier New"]
144
+ },
145
+ color: {
146
+ colors: [
147
+ "rgb(0, 0, 0)",
148
+ "rgb(38, 38, 38)",
149
+ "rgb(89, 89, 89)",
150
+ "rgb(140, 140, 140)",
151
+ "rgb(191, 191, 191)",
152
+ "rgb(217, 217, 217)",
153
+ "rgb(233, 233, 233)",
154
+ "rgb(245, 245, 245)",
155
+ "rgb(250, 250, 250)",
156
+ "rgb(255, 255, 255)",
157
+ "rgb(225, 60, 57)",
158
+ "rgb(231, 95, 51)",
159
+ "rgb(235, 144, 58)",
160
+ "rgb(245, 219, 77)",
161
+ "rgb(114, 192, 64)",
162
+ "rgb(89, 191, 192)",
163
+ "rgb(66, 144, 247)",
164
+ "rgb(54, 88, 226)",
165
+ "rgb(106, 57, 201)",
166
+ "rgb(216, 68, 147)",
167
+ "rgb(251, 233, 230)",
168
+ "rgb(252, 237, 225)",
169
+ "rgb(252, 239, 212)",
170
+ "rgb(252, 251, 207)",
171
+ "rgb(231, 246, 213)",
172
+ "rgb(218, 244, 240)",
173
+ "rgb(217, 237, 250)",
174
+ "rgb(224, 232, 250)",
175
+ "rgb(237, 225, 248)",
176
+ "rgb(246, 226, 234)",
177
+ "rgb(255, 163, 158)",
178
+ "rgb(255, 187, 150)",
179
+ "rgb(255, 213, 145)",
180
+ "rgb(255, 251, 143)",
181
+ "rgb(183, 235, 143)",
182
+ "rgb(135, 232, 222)",
183
+ "rgb(145, 213, 255)",
184
+ "rgb(173, 198, 255)",
185
+ "rgb(211, 173, 247)",
186
+ "rgb(255, 173, 210)",
187
+ "rgb(255, 77, 79)",
188
+ "rgb(255, 122, 69)",
189
+ "rgb(255, 169, 64)",
190
+ "rgb(255, 236, 61)",
191
+ "rgb(115, 209, 61)",
192
+ "rgb(54, 207, 201)",
193
+ "rgb(64, 169, 255)",
194
+ "rgb(89, 126, 247)",
195
+ "rgb(146, 84, 222)",
196
+ "rgb(247, 89, 171)",
197
+ "rgb(207, 19, 34)",
198
+ "rgb(212, 56, 13)",
199
+ "rgb(212, 107, 8)",
200
+ "rgb(212, 177, 6)",
201
+ "rgb(56, 158, 13)",
202
+ "rgb(8, 151, 156)",
203
+ "rgb(9, 109, 217)",
204
+ "rgb(29, 57, 196)",
205
+ "rgb(83, 29, 171)",
206
+ "rgb(196, 29, 127)",
207
+ "rgb(130, 0, 20)",
208
+ "rgb(135, 20, 0)",
209
+ "rgb(135, 56, 0)",
210
+ "rgb(97, 71, 0)",
211
+ "rgb(19, 82, 0)",
212
+ "rgb(0, 71, 79)",
213
+ "rgb(0, 58, 140)",
214
+ "rgb(6, 17, 120)",
215
+ "rgb(34, 7, 94)",
216
+ "rgb(120, 6, 80)",
217
+ "rgb(250,64,6)"
218
+ ]
219
+ },
220
+ uploadImage: {
221
+ //上传图片配置
222
+ server: this.ossServerContext + this.ossFilePutUrl, //上传接口地址
223
+ fieldName: 'file', //上传文件名
224
+ methods: 'post',
225
+ metaWithUrl: true, // 参数拼接到 url 上
226
+ //自定义插入图片
227
+ customInsert: (res, insertFn) => {
228
+ let self = this;
229
+ const imgInfo = res.data[0] || {}
230
+ const {fileId, fileName, contentType} = imgInfo
231
+ insertFn(self.ossServerContext + self.ossFileGetImgUrl + fileId, fileName, self.ossServerContext + self.ossFileGetImgUrl + fileId)
232
+ },
233
+
234
+ },
235
+ }
236
+ }
237
+ }
238
+ },
239
+ watch: {
240
+ value: {
241
+ handler: function (newVal, oldVal) {
242
+ const isEmpty = !newVal || newVal === '<p><br></p>'
243
+ const wasEmpty = !oldVal || oldVal === '<p><br></p>'
244
+
245
+ if (!isEmpty && wasEmpty) {
246
+ if (this.valueType === 'html') {
247
+ this.editor.setHtml(this.normalizeTableBorderWidth(newVal));
248
+ } else {
249
+ this.editor.insertText(newVal)
250
+ }
251
+ }
252
+ }
253
+ },
254
+
255
+ readOnly: {
256
+ handler(newVal){
257
+ this.editorConfig.readOnly = newVal
258
+ if(newVal){
259
+ this.toolbarConfig.toolbarKeys = ['fullScreen']
260
+ }
261
+ },
262
+ immediate: true,
263
+ },
264
+
265
+ hideMenu: {
266
+ handler(newVal){
267
+ this.toolbarConfig.excludeKeys = newVal
268
+ },
269
+ immediate: true,
270
+ deep: true
271
+ }
272
+ },
273
+ computed: {
274
+ editorStyle() {
275
+ let finalHeight = this.height;
276
+ // 如果是数字，自动拼接 px 单位
277
+ if (typeof finalHeight === 'number') {
278
+ finalHeight = `${finalHeight}px`;
279
+ }
280
+
281
+ return {
282
+ height: finalHeight,
283
+ 'overflow-y': 'hidden'
284
+ }
285
+ }
286
+ },
287
+ methods: {
288
+
289
+ normalizeTableBorderWidth(value) {
290
+ let html = value;
291
+ // 正则匹配 <table>...</table> 区域
292
+ const tableRegex = /(<table)([\s\S]*?)(<\/table>)/gi;
293
+ // 替换表格区域中的 border-width: **px;
294
+ html = html.replace(tableRegex, (match, startTag, content, endTag) => {
295
+ // 只对表格内容进行替换
296
+ const updatedContent = content.replace(/border-width:\s*(\d+)px;/g, 'border-width: $1;');
297
+ return `${startTag}${updatedContent}${endTag}`;
298
+ });
299
+
300
+ // 标记已存表格
301
+ const tempDiv = document.createElement('div'); // 创建临时容器解析 HTML
302
+ tempDiv.innerHTML = html;
303
+ const tables = tempDiv.querySelectorAll('table');
304
+ tables.forEach(table => {
305
+ table.setAttribute('data-processed', 'true');
306
+ });
307
+ return tempDiv.innerHTML;
308
+ },
309
+
310
+ onCreated(editor) {
311
+ this.editor = Object.seal(editor)
312
+ if (this.value) {
313
+ this.editor.setHtml(this.normalizeTableBorderWidth(this.value))
314
+ }
315
+ },
316
+ onChange(editor) {
317
+ let html = editor.getHtml()
318
+ this.$emit('input', this.valueType === 'html' ? html : editor.getText())
319
+ this.$emit('on-change', html, editor.getText())
320
+ },
321
+ },
322
+
323
+ beforeDestroy() {
324
+ const editor = this.editor
325
+ if (editor == null) return
326
+ editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
327
+ },
328
+
329
+ }
330
+ </script>
331
+
332
+ <style lang="less" scoped>
333
+ /deep/ .table-container {
334
+ width: fit-content !important;
335
+ margin: 10px auto !important;
336
+ }
337
+ </style>