Titpap Output 支持输出JSON对象或Html字符串存储编辑器的内容,我们将来在下面的例子演示如何使用这两种格式。
获取编辑器内容的JSON对象
const json = editor.getJSON()
通过JSON对象初始化编辑器内容
new Editor({
content: {
"type": "doc",
"content": [
// …
]
},
})
通过JSON对象设置编辑器内容
editor.commands.setContent({
"type": "doc",
"content": [
// …
]
})
获取编辑器内容的html字符串
const html = editor.getHTML()
通过JSON对象初始化编辑器内容
new Editor({
content: `<p>www.itxst.com</p>`,
})
通过html字符串设置编辑器内容
editor.commands.setContent(`<p>Example Text</p>`)
tiptap 支持通过 Y.js 实现多人实时协助,具体用法参考collaborative-editing菜单
tiptap目前并不支持Markdown格式,因为json和html都是嵌套格式而Markdown是扁平的,如果你需要存储Markdown格式,需要通过第三方库将Json或html转换成Markdown格式
const editor = new Editor({
// intial content
content: `<p>Example Content</p>`,
// 接听编辑器内容的变化
onUpdate: ({ editor }) => {
const json = editor.getJSON()
// send the content to an API here
},
})
设置tiptap编辑器是否只读
//只读
editor.setEditable(false);
//可编辑
editor.setEditable(true);
ProseMirror JSON 生成 HTML,在浏览页我们只需要显示存储在数据库的JSON,不需要创建tiptap编辑器实例。
<template>
<pre><code>{{ output }}</code></pre>
</template>
<script>
import Bold from '@tiptap/extension-bold'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import { generateHTML } from '@tiptap/html'
const json = {
type: 'doc',
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'Example ',
},
{
type: 'text',
marks: [
{
type: 'bold',
},
],
text: 'Text',
},
],
},
],
}
export default {
computed: {
output() {
return generateHTML(json, [
Document,
Paragraph,
Text,
Bold,
// other extensions …
])
},
},
}
</script>
import Bold from '@tiptap/extension-bold'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import { generateHTML } from '@tiptap/html'
import React, { useMemo } from 'react'
const json = {
type: 'doc',
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'www.itxst.com',
},
{
type: 'text',
marks: [
{
type: 'bold',
},
],
text: 'Text',
},
],
},
],
}
export default () => {
const output = useMemo(() => {
return generateHTML(json, [
Document,
Paragraph,
Text,
Bold,
// other extensions …
])
}, [json])
return (
<pre>
<code>{output}</code>
</pre>
)
}
本教程Demo的源码点击这里下载,Tiptap Demo,下载完成后运行npm i初始化依赖包。