Add CustomDiv extension to preserve div tags in Jeditor
This commit is contained in:
parent
be79e5e46d
commit
ffc10a7089
@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onBeforeUnmount, ref, watch, computed } from 'vue'
|
||||
import { Editor, Extension } from '@tiptap/core'
|
||||
import { Editor, Extension, Node } from '@tiptap/core'
|
||||
import Document from '@tiptap/extension-document'
|
||||
import Paragraph from '@tiptap/extension-paragraph'
|
||||
import Text from '@tiptap/extension-text'
|
||||
@ -67,6 +67,24 @@ let editor: Editor | null = null
|
||||
let sourceShowing = false
|
||||
let sourceTextarea: HTMLTextAreaElement | null = null
|
||||
|
||||
// CustomDiv 扩展:支持 div 标签,避免被转换为 p 标签
|
||||
// 关键:content 设置为 'block*' 允许包含其他块级元素(如 heading, paragraph, table 等)
|
||||
const CustomDiv = Node.create({
|
||||
name: 'customDiv',
|
||||
group: 'block',
|
||||
content: 'block*',
|
||||
parseHTML() {
|
||||
return [
|
||||
{
|
||||
tag: 'div',
|
||||
},
|
||||
]
|
||||
},
|
||||
renderHTML({ HTMLAttributes }) {
|
||||
return ['div', HTMLAttributes, 0]
|
||||
},
|
||||
})
|
||||
|
||||
// FontSize 扩展:对齐 jingrow 实现,基于 TextStyle,提供 setFontSize/unsetFontSize
|
||||
// 保留实现以对齐 jingrow;如需启用,加入 extensions
|
||||
const FontSize = Extension.create({
|
||||
@ -147,7 +165,7 @@ function dropdown(title: string, iconName: string, items: Array<{ label: string;
|
||||
menu.appendChild(item)
|
||||
})
|
||||
btn.onmousedown = (e) => { e.preventDefault(); menu.style.display = menu.style.display === 'block' ? 'none' : 'block' }
|
||||
document.addEventListener('mousedown', (e) => { if (!wrap.contains(e.target as Node)) menu.style.display = 'none' })
|
||||
document.addEventListener('mousedown', (e) => { if (!wrap.contains(e.target as globalThis.Node)) menu.style.display = 'none' })
|
||||
btn.appendChild(caret)
|
||||
wrap.appendChild(menu)
|
||||
return wrap
|
||||
@ -606,7 +624,10 @@ function mountControl() {
|
||||
content: props.modelValue || '',
|
||||
editable: !props.disabled,
|
||||
extensions: [
|
||||
Document,
|
||||
Document.extend({
|
||||
content: '(heading | paragraph | blockquote | codeBlock | horizontalRule | customDiv | table | bulletList | orderedList | taskList)+',
|
||||
}),
|
||||
CustomDiv,
|
||||
Paragraph,
|
||||
Text,
|
||||
Bold,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user