基于 Vue+quill.js 图文编辑器组件Vue2-Editor-文章教程-杰人编程网

今天给小伙伴们分享一款超好用的Vue富文本编辑器Vue2Editor。

vue2-editor 一个底层基于 Quill.js 构建的vue2.x版本图文编辑器组件，star高达2K+。简单易上手的API及丰富的自定义参数配置。

特性

快速且轻量级、易于上手
基于vue.js & Quill.js
标准化HTML
支持自定义配置

安装

$ npm i vue2-editor -S

引入插件

// 在main.js全局引入
import Vue from "vue";
import Vue2Editor from "vue2-editor";
Vue.use(Vue2Editor);

// 在.vue页面局部引入
<script>
import { VueEditor } from "vue2-editor";
export default {
  components: {
    VueEditor
  },
};
</script>

基础版

<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>

多个编辑器并存实例

<template>
  <div id="app">
    <vue-editor id="editor1" v-model="editor1Content"></vue-editor>
    <vue-editor id="editor2" v-model="editor2Content"></vue-editor>
  </div>
</template>
<script>
import { VueEditor } from "vue2-editor";

export default {
  components: {
    VueEditor
  },
  data() {
    return {
      editor1Content: "<h1>Editor 1 Starting Content</h1>",
      editor2Content: "<h1>Editor 2 Starting Content</h1>"
    };
  }
};
</script>

自定义工具栏

<template>
  <vue-editor v-model="content" :editor-toolbar="customToolbar" />
</template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  components: { VueEditor },
  data: () => ({
    content: "<h1>Html For Editor</h1>",
    customToolbar: [
      ["bold", "italic", "underline"],
      [{ list: "ordered" }, { list: "bullet" }],
      ["image", "code-block"]
    ]
  })
};
</script>

两个常用方法

<vue-editor ref="editor" v-model="content" />

获取光标位置

let cursorPos = this.$refs.editor.quill.selection.savedRange.index

在光标处插入字符串或其它数据类型

this.$refs.editor.quill.insertText(this.$refs.editor.quill.selection.savedRange.index, '插入的内容');

更多用法大家可自行去查阅文档。

# 文档地址
https://www.vue2editor.com/

# 仓库地址
https://github.com/davidroyer/vue2-editor

ok，就介绍到这里。如果感兴趣的话，可以去看下哈。欢迎交流讨论~