美化编辑器

前面介绍过，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(`Example Text`)

监听改变

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

const editor = new Editor({// intial contentcontent: `<p>Example Content</p>`,// triggered on every changeonUpdate: ({ 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>

显示结果：Example Text

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>

显示结果：Example Text

基于vue的tiptap编辑器插件（三）相关推荐

基于vue的tiptap编辑器插件（一）
前言最近在重构我的vue项目,发现vue-quill-editor这个插件的自定义配置有些局限,我也不是很懂,然后去查的时候发现,这个插件已经没有团队在维护了,这个插件是基于quill的,我如果要了 ...
基于vue的tiptap编辑器插件（二）
配置如标题所见,这一篇我们讲配置,也是官方guide的第一节内容.我会按照文档的guide顺序,根据我自己的理解方式,一点点解读其内容,所以如果你不着急,我建议你看第一手资料:如果你的时间比较紧迫, ...
基于vue.js的dialog插件art-dialog-vue2.0发布
art-dialog-vue -- 经典.优雅的网页对话框控件优点支持普通与 12 方向气泡状对话框支持 ARIA 标准面向未来:基于 HTML5 Dialog 的 API 支持标准与模态对话 ...
vue img src 动态赋值_一个基于Vue的开源延迟加载插件——vuelazyload
介绍 vue-lazyload是一个基于Vue的延迟加载插件,用于延迟加载Vue组件或者图像. Github https://github.com/hilongjw/vue-lazyload 特点轻 ...
Vue 富文本编辑器插件 vue-quill-editor 坑！
Vue3 + vue-quill-editor 安装步骤: vue3 安装vue-quill-editor npm install @vueup/vue-quill vue2 安装vue-quill- ...
基于vue的图片裁剪插件vue-cropper
我在网上找了很多关于vue裁剪图片的文章,demo都太长了,实在是太长了.有些还都看不懂,最后还是用了个大佬的demo,但是项目实践过程中还是有问题没解决.先介绍吧.效果是下面这样的, 我这里采用了4 ...
『开源』基于jq的数学公式编辑器插件（可嵌入项目）（web前端）
数学公式编辑器初体验 API options配置演示(参考test/simple.html) 嵌入演示 wangEditor(参考test/wangEditor/wangEditor.html) ...
基于Vue的拖拽插件的实战应用，但最后我还是选择了手写
因为项目上有一个在规定区域内自由拖拽的小需求,自己纯js写又有点小麻烦,就花了点时间寻找到这个小组件. 介绍 vue-drag-resize是一个用于拖拽,缩放的组件根据网上搜索到的使用教程,都是照 ...
一款好用的基于vue的录屏插件recordrtc，拿走不谢
第一步:下载安装包 npm i recordrtc 第二步:复制代码,即可使用: <template> <div class="record-page">& ...

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