基于vue的tiptap编辑器插件（三）

美化编辑器

        前面介绍过，tiptap是一个headless的编辑器，所以他自己是没有样式的，我们需要手动给他添加一些样式。文档中介绍了三种美化编辑器的方式，听我一一道来。

Option 1: Style the plain HTML

        整个编辑器都是被一个class为ProseMirror的div所包裹，所以你可以直接在样式表中对class为ProseMirror的样式进行修饰。比如：

/* Scoped to the editor */
.ProseMirror p {
  margin: 1em 0;
}

Option 2: Add custom classes

        你可以自定义一些class，然后将这些class通过配置项载入到对应扩展或editor本身中。如果是editor本身，则如下所示

new Editor({
  editorProps: {
    attributes: {
      class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none',
    },
  },
})

如果是一些扩展，如下所示

new Editor({
  extensions: [
    Document,
    Paragraph.configure({
      HTMLAttributes: {
        class: 'my-custom-paragraph',
      },
    }),
    Heading.configure({
      HTMLAttributes: {
        class: 'my-custom-heading',
      },
    }),
    Text,
  ],
})

Option 3: Customize the HTML

        你也可以在原来扩展的基础上做一些样式上的修改，成为一个新的扩展

import Bold from '@tiptap/extension-bold'

const CustomBold = Bold.extend({
  renderHTML({ HTMLAttributes }) {
    // Original:
    // return ['strong', HTMLAttributes, 0]
    return ['b', HTMLAttributes, 0]
  },
})

new Editor({
  extensions: [
    // …
    CustomBold,
  ],
})

        这三种方式，我比较推荐第二种，一方面这种配置的方式比较灵活，另一方面，可以操作到node上，比第一种方式更精细也不容易出错。

输出

        这一节主要讲，如何将编辑器里的内容转化为json字符串或者html字符串存储起来，以及如何把这两种格式的字符串传给编辑器并呈现内容。

导出字符串

        如何得到当前编辑器文本内容的json字符串？

        const json = editor.getJSON()

        同理对于html字符串：

        const html = editor.getHTML()

        如何将json字符串传给编辑器并显示内容？

        首先，你要知道，getJSON()返回的json字符串是类似以下的格式：

{
  "type": "doc",
  "content": [
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "Wow, this editor instance exports its content as JSON."
        }
      ]
    }
  ]
}

符合这样的格式，且最外层的"type"为"doc"，那么将该字符串content传入以下方法

editor.commands.setContent(content)

同理对于html字符串

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

监听改变

        如果你想监听内容的改变，那么可以这么做

const editor = new Editor({
  // intial content
  content: `<p>Example Content</p>`,

  // triggered on every change
  onUpdate: ({ editor }) => {
    const json = editor.getJSON()
    // send the content to an API here
  },
})

HTML与JSON格式的转换

        在某些场景下，需要对内容的格式进行转换。比如，用户在web端的某个tiptap编辑器内写了内容并以json格式保存至远程服务器中，而远程服务器需要根据这段内容生成html并返回，那么就需要用到这个功能。

JSON转HTML

<template>
  <pre><code>{{ output }}</code></pre>
</template>

<script>
// Option 1: Browser + server-side
import Bold from '@tiptap/extension-bold'
// Option 2: Browser-only (lightweight)
// import { generateHTML } from '@tiptap/core'
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>

显示结果：<p>Example <strong>Text</strong></p>

HTML转JSON

<template>
  <pre><code>{{ output }}</code></pre>
</template>

<script>
// Option 1: Browser + server-side
import Bold from '@tiptap/extension-bold'
// Option 2: Browser-only (lightweight)
// import { generateHTML } from '@tiptap/core'
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>

显示结果：<p>Example <strong>Text</strong></p>