vue+tiptap ,基于vue的无渲染的富文本编辑器
// 如果点击按钮，页面文本的样式没有改变，查看元素的标签是否已经改变，标签已改变，只是页面的样式没有改变，可以查看示例的css样式，
<template>
<div class="editor">
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
<div class="menubar">
<el-button
class="menubar__button"
:class="{ 'is-active': () }"
@click=""
title="加粗"
>
<!-- <icon name="bold" /> -->
<i class="iconfont r-bold"></i>
</el-button>
<el-button
class="menubar__button"
:class="{ 'is-active': () }"
@click=""
title="斜体"
>
<!-- <icon name="italic" /> -->
<i class="iconfont r-italic"></i>
</el-button>
<el-button
class="menubar__button"
:class="{ 'is-active': () }"
@click=""
>
<!-- <icon name="strike" /> -->
<i class="iconfont r-strike"></i>
</el-button>
<el-button
class="menubar__button"
:class="{ 'is-active': () }"
@click=""
title="下划线"
>
<!-- <icon name="underline" /> -->
<i class="iconfont r-underline"></i>
</el-button>
<el-button
class="menubar__button"
:class="{ 'is-active': () }"
@click=""
title="代码"
>
<!-- <icon name="code" /> -->
<i class="iconfont r-code"></i>
</el-button>
<el-button
class="menubar__button"
:class="{ 'is-active': () }"
@click=""
>
<!-- <icon name="paragraph" /> -->
<i class="iconfont r-paragraph"></i>
</el-button>
<el-button
class="menubar__button"
:class="{ 'is-active': ({ level: 1 }) }"
@click="({ level: 1 })"
title="标题1"
>
H1
</el-button>
<el-button
class="menubar__button"
:class="{ 'is-active': ({ level: 2 }) }"
@click="({ level: 2 })"
title="标题2"
>
H2
</el-button>
<el-button
class="menubar__button"
:class="{ 'is-active': ({ level: 3 }) }"
@click="({ level: 3 })"
title="标题3"
>
H3
</el-button>
<el-button
class="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-button
class="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-button
class="menubar__button"
:class="{ 'is-active': () }"
@click=""
title="引用"
>
<!-- <icon name="quote" /> -->
<i class="iconfont r-TextQuote-1"></i>
</el-button>
<el-button
class="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-button
class="menubar__button"
@click="commands.horizontal_rule"
title="基准线"
>
<!-- <icon name="hr" /> -->
<i class="iconfont r-hr"></i>
</el-button>
<el-button
class="menubar__button"
@click=""
title="恢复"
>
<!-- <icon name="undo" /> -->
<i class="iconfont r-undo"></i>
</el-button>
<el-button
class="menubar__button"
@click=""
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>