Titpap Output 输出格式

Titpap Output 支持输出JSON对象或Html字符串存储编辑器的内容，我们将来在下面的例子演示如何使用这两种格式。

输出 JSON 格式

获取编辑器内容的JSON对象

const json = editor.getJSON()

通过JSON对象初始化编辑器内容

new Editor({
  content: {
    "type": "doc",
    "content": [
      // …
    ]
  },
})

通过JSON对象设置编辑器内容

editor.commands.setContent({
  "type": "doc",
  "content": [
    // …
  ]
})

在线试一试

输出 html 格式

获取编辑器内容的html字符串

const html = editor.getHTML()

通过JSON对象初始化编辑器内容

new Editor({
  content: `<p>www.itxst.com</p>`,
})

通过html字符串设置编辑器内容

editor.commands.setContent(`<p>Example Text</p>`)

在线试一试

Y.js 实时协作

tiptap 支持通过 Y.js 实现多人实时协助，具体用法参考collaborative-editing菜单

Markdown 格式

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
  },
})

渲染 html

设置tiptap编辑器是否只读

//只读
editor.setEditable(false);
//可编辑
editor.setEditable(true);

ProseMirror JSON 生成 HTML,在浏览页我们只需要显示存储在数据库的JSON,不需要创建tiptap编辑器实例。

vue3 渲染 html

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

React 渲染 html

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

本教程Demo的源码点击这里下载，Tiptap Demo，下载完成后运行npm i初始化依赖包。