Add CustomDiv extension to preserve div tags in Jeditor

This commit is contained in:
jingrow 2025-11-14 12:52:18 +08:00
parent be79e5e46d
commit ffc10a7089

View File

@ -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,