简单方便的富文本（Vue2Editor）

参考过很多的案例，也有很多好用的富文本，但是这个相对于来说简单易用吧，可以自定义选项，能满足大部分需求，接下来跟我一起探讨吧

1、首先来说如何安装：

可以使用npm或yarn，没有安装包管理工具的可以参考：npm安装-详细教程-优快云博客

npm install vue2-editor
//或者
yarn add vue2-editor

2、使用

可以全局注册和局部注册使用

//全局注册
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";

接下来看一个简单示例吧

<template>
  <vue-editor v-model="content" />
</template>
 
<script>
import { VueEditor } from "vue2-editor";
 
export default {
  components: { VueEditor },
 
  data: () => ({
    content: "您好"
  })
};
</script>

可能大家也会遇到一些情况，需要自定义这些工具，这里我项目中是不需要这么多复杂的功能，所以简单定义一下

<template>
  <vue-editor v-model="content" :editor-toolbar="customToolbar" />
</template>
 
<script>
import { VueEditor } from "vue2-editor";
 
export default {
  components: { VueEditor },
 
  data: () => ({
    content: "您好",
    customToolbar: [
        ["bold", "italic", "underline"],
        [{ list: "ordered" }, { list: "bullet" }],
        ["image", "code-block"],
      ],
  })
};
</script>

以上的简单配置，大家看下源码，定制自己需要的