安装tiptap
官网：
github：/ueberdosis/tiptap
演示：/code_demo.php?id=975
npm install tiptapnpm install tiptap-extensions
该编辑器基于prosemiror，完全可扩展且无渲染。您可以轻松地将自定义节点添加为Vue组件。
基础案例
// 如果点击按钮，页面文本的样式没有改变，查看元素的标签是否已经改变，标签已改变，只是页面的样式没有改变，可以查看示例的css样式，<template><div class="editor"><editor-menu-bar :editor="editor" v-slot="{ commands, isActive }"><div class="menubar"><el-buttonclass="menubar__button":class="{ 'is-active': isActive.bold() }"@click="commands.bold"title="加粗"><!-- <icon name="bold" /> --><i class="iconfont r-bold"></i></el-button><el-buttonclass="menubar__button":class="{ 'is-active': isActive.italic() }"@click="commands.italic"title="斜体"><!-- <icon name="italic" /> --><i class="iconfont r-italic"></i></el-button><el-buttonclass="menubar__button":class="{ 'is-active': isActive.strike() }"@click="commands.strike"><!-- <icon name="strike" /> --><i class="iconfont r-strike"></i></el-button><el-buttonclass="menubar__button":class="{ 'is-active': isActive.underline() }"@click="commands.underline"title="下划线"><!-- <icon name="underline" /> --><i class="iconfont r-underline"></i></el-button><el-buttonclass="menubar__button":class="{ 'is-active': isActive.code() }"@click="commands.code"title="代码"><!-- <icon name="code" /> --><i class="iconfont r-code"></i></el-button><el-buttonclass="menubar__button":class="{ 'is-active': isActive.paragraph() }"@click="commands.paragraph"><!-- <icon name="paragraph" /> --><i class="iconfont r-paragraph"></i></el-button><el-buttonclass="menubar__button":class="{ 'is-active': isActive.heading({ level: 1 }) }"@click="commands.heading({ level: 1 })"title="标题1">H1</el-button><el-buttonclass="menubar__button":class="{ 'is-active': isActive.heading({ level: 2 }) }"@click="commands.heading({ level: 2 })"title="标题2">H2</el-button><el-buttonclass="menubar__button":class="{ 'is-active': isActive.heading({ level: 3 }) }"@click="commands.heading({ level: 3 })"title="标题3">H3</el-button><el-buttonclass="menubar__button":class="{ 'is-active': isActive.bullet_list() }"@click="commands.bullet_list"title="有序列表"><!-- <icon name="ul" /> --><i class="iconfont r-ul"></i></el-button><el-buttonclass="menubar__button":class="{ 'is-active': isActive.ordered_list() }"@click="commands.ordered_list"title="无序列表"><!-- <icon name="ol" /> --><i class="iconfont r-ol"></i></el-button><el-buttonclass="menubar__button":class="{ 'is-active': isActive.blockquote() }"@click="commands.blockquote"title="引用"><!-- <icon name="quote" /> --><i class="iconfont r-TextQuote-1"></i></el-button><el-buttonclass="menubar__button":class="{ 'is-active': isActive.code_block() }"@click="commands.code_block"title="代码块"><!-- <icon name="code" /> --><i class="iconfont r-code"></i></el-button><el-buttonclass="menubar__button"@click="commands.horizontal_rule"title="基准线"><!-- <icon name="hr" /> --><i class="iconfont r-hr"></i></el-button><el-buttonclass="menubar__button"@click="commands.undo"title="恢复"><!-- <icon name="undo" /> --><i class="iconfont r-undo"></i></el-button><el-buttonclass="menubar__button"@click="commands.redo"title="重做"><!-- <icon name="redo" /> --><i class="iconfont r-redo"></i></el-button></div></editor-menu-bar><editor-content class="editor__content" :editor="editor" /></div></template><script>import {Editor, EditorContent, EditorMenuBar } from 'tiptap'import {Blockquote,CodeBlock,HardBreak,Heading,HorizontalRule,OrderedList,BulletList,ListItem,TodoItem,TodoList,Bold,Code,Italic,Link,Strike,Underline,History} from 'tiptap-extensions'export default {components: {EditorContent,EditorMenuBar},data () {return {editor: new Editor({extensions: [new Blockquote(),new BulletList(),new CodeBlock(),new HardBreak(),new Heading({levels: [1, 2, 3] }),new HorizontalRule(),new ListItem(),new OrderedList(),new TodoItem(),new TodoList(),new Link(),new Bold(),new Code(),new Italic(),new Strike(),new Underline(),new History()],content: `<h2>Hi there,</h2><p>this is a very <em>basic</em> example of tiptap.</p><pre><code>body { display: none; }</code></pre><ul><li>A regular list</li><li>With regular items</li></ul><blockquote>It's amazing 👏<br />– mom</blockquote>`})}},beforeDestroy () {this.editor.destroy()}}</script><style>.editor__content .ProseMirror pre {padding: .7rem 1rem;border-radius: 5px;background: #000;color: #fff;font-size: .8rem;overflow-x: auto;}.editor__content .ProseMirror blockquote {border-left: 3px solid rgba(0,0,0,.1);color: rgba(0,0,0,.8);padding-left: .8rem;font-style: italic;}.editor__content .ProseMirror p code {padding: .2rem .4rem;border-radius: 5px;font-size: .8rem;font-weight: 700;background: rgba(0,0,0,.1);color: rgba(0,0,0,.8);}</style>
图示：
