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

最新推荐文章于 2025-07-25 14:28:23 发布

丶淅淅沥沥

最新推荐文章于 2025-07-25 14:28:23 发布

阅读量1.5w

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44051839/article/details/86678419

zx-editor是一款基于Vue的富文本编辑器，支持图片上传、图文混排、引用、标题、列表等功能，并能自动保存编辑内容。可在Vue项目中全局使用，通过监听change事件实现内容同步。

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以及上传新的优化代码