vue3 富文本编辑器推荐
时间: 2023-11-20 09:05:19 浏览: 253
Vue3富文本编辑器组件封装
5星 · 资源好评率100%
根据您提供的引用内容,我可以向您推荐两款Vue3富文本编辑器:
1. TinyMCE - 这是一款功能非常丰富的富文本编辑器,被称为“富文本编辑器里的Word”。它支持多种格式的文本编辑,包括HTML、Markdown等。此外,它还支持插入表格、图片、视频等多种媒体类型,并且可以自定义工具栏和快捷键。TinyMCE还提供了多种语言的支持,可以轻松地实现国际化。
2. vue-quill-text-editor - 这是一款基于Vue3封装的Quill组件,非常简单易用。它支持多种格式的文本编辑,包括HTML、Markdown等。此外,它还支持插入表格、图片、视频等多种媒体类型,并且可以自定义工具栏和快捷键。vue-quill-text-editor还提供了多种语言的支持,可以轻松地实现国际化。
以下是使用vue-quill-text-editor的示例代码:
```vue
<template>
<div>
<quill-editor v-model="content" :options="editorOption"></quill-editor>
</div>
</template>
<script>
import { QuillEditor } from 'vue-quill-text-editor'
export default {
components: {
QuillEditor
},
data () {
return {
content: '',
editorOption: {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'indent': '-1' }, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }],
['clean'],
['link', 'image', 'video']
]
}
}
}
}
}
</script>
```
阅读全文