h5 富文本编辑器_简单易用、功能强大的富文本编辑器——Vue2Editor

介绍

Vue2Editor是一个简单易用且功能强大的Vue版本的富文本编辑器，其基于Quill.js和Vuejs构建！

Github

https://github.com/davidroyer/vue2-editor

特性

• 简单易用；
• 基于Vue.js & Quill.js构建；
• 为更复杂的场景提供自定义的选项

安装使用

第一种方式就是使用cdn或者

npm install vue2-editor#或者使用yarn add vue2-editor

有两种方法可以设置和使用Vue2Editor。可以将其全局设置为Vue插件，也可以导入VueEditor组件以在本地注册并使用它。两种方法的例子如下

import Vue from "vue";import Vue2Editor from "vue2-editor";Vue.use(Vue2Editor);

// 基本用途-涵盖大多数情况import { VueEditor } from "vue2-editor";// 高级使用-HookQuill的API定制功能import { VueEditor, Quill } from "vue2-editor";

基本案例

• 基本用法

• 自定义图像处理程序

如果选择使用自定义图像处理程序，则在选择照片时会发出一个事件。可以看到下面传递了3个参数。

1. 它传递要处理的文件
2. 编辑器实例
3. 上传时的光标位置，以便成功时可以将图像插入到正确的位置

• 页面加载后设置内容

Set Editor Content

• 使用多个编辑器

• 自定义工具栏

• 保存内容

• 使用实时预览

{{ content }}

总结

Vue2Editor是一个简单易用的富文本编辑器，如果没有复杂的需求，你可以毫无保留的使用它，如果你需要复杂的功能，也可以使用其自定义能力进行自定义扩展！