富文本编辑器——Vue2Editor

介绍

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

Github

特性

简单易用；
基于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";

基本案例

1.基本用法

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

2.自定义工具栏

<template>
  <div>
    <div>
      <h3>富文本——content1</h3>
      <vue-editor v-model="content1" />
    </div>
    <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
    <div>
      <h3>自定义富文本——content2</h3>
      <vue-editor v-model="content2" :editor-toolbar="customToolbar" />
    </div>
  </div>
</template>
 
<script>
import { VueEditor } from 'vue2-editor'

export default {
  components: { VueEditor },

  data: () => ({
    content1: '',
    content2: '<h1>Html For Editor</h1>',
    customToolbar: [
      ['bold', 'italic', 'underline'],
      [{ list: 'ordered' }, { list: 'bullet' }],
      ['image', 'code-block']
    ]
  })
}
</script>