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">
|
<script setup lang="ts">
|
||||||
import { onMounted, onBeforeUnmount, ref, watch, computed } from 'vue'
|
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 Document from '@tiptap/extension-document'
|
||||||
import Paragraph from '@tiptap/extension-paragraph'
|
import Paragraph from '@tiptap/extension-paragraph'
|
||||||
import Text from '@tiptap/extension-text'
|
import Text from '@tiptap/extension-text'
|
||||||
@ -67,6 +67,24 @@ let editor: Editor | null = null
|
|||||||
let sourceShowing = false
|
let sourceShowing = false
|
||||||
let sourceTextarea: HTMLTextAreaElement | null = null
|
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
|
// FontSize 扩展:对齐 jingrow 实现,基于 TextStyle,提供 setFontSize/unsetFontSize
|
||||||
// 保留实现以对齐 jingrow;如需启用,加入 extensions
|
// 保留实现以对齐 jingrow;如需启用,加入 extensions
|
||||||
const FontSize = Extension.create({
|
const FontSize = Extension.create({
|
||||||
@ -147,7 +165,7 @@ function dropdown(title: string, iconName: string, items: Array<{ label: string;
|
|||||||
menu.appendChild(item)
|
menu.appendChild(item)
|
||||||
})
|
})
|
||||||
btn.onmousedown = (e) => { e.preventDefault(); menu.style.display = menu.style.display === 'block' ? 'none' : 'block' }
|
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)
|
btn.appendChild(caret)
|
||||||
wrap.appendChild(menu)
|
wrap.appendChild(menu)
|
||||||
return wrap
|
return wrap
|
||||||
@ -606,7 +624,10 @@ function mountControl() {
|
|||||||
content: props.modelValue || '',
|
content: props.modelValue || '',
|
||||||
editable: !props.disabled,
|
editable: !props.disabled,
|
||||||
extensions: [
|
extensions: [
|
||||||
Document,
|
Document.extend({
|
||||||
|
content: '(heading | paragraph | blockquote | codeBlock | horizontalRule | customDiv | table | bulletList | orderedList | taskList)+',
|
||||||
|
}),
|
||||||
|
CustomDiv,
|
||||||
Paragraph,
|
Paragraph,
|
||||||
Text,
|
Text,
|
||||||
Bold,
|
Bold,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user