推荐一款适用于vue的h5富文本编辑器

zx-editor

github地址

支持两种图片上传方式,一个是自动转化为base不上传到服务器,另一种是直接上传到服务器插入网络图片
支持图文混排、引用、大标题、无序列表,字体颜色、加粗、斜体。
vue中实例化ZxEditor对象后,可将其赋值给data模板,然后当前vue文件可全局使用改对象中的方法:
var zxEditor = new ZxEditor("#editorContainer", {
// 编辑器固定
fixed: false,
// 20秒自动保存一次编辑内容
autoSave: 0,
disableBackspaceDelete: false,
showToolbar: false
});
this.zxEditor = zxEditor;

change事件,当文本域中有值变化执行,我是将其存在vuex中:
zxEditor.on(“change”, function(type, zxeditor) {
that.setVuex();
});

当然,使用改插件时会遇到各种各样的问题,一、要先思考 二、留意github更新,作者很勤快,经常改bug以及 上传新的优化代码

  • 4
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据您提供的引用内容,我可以向您推荐两款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> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值