介绍

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

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

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

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

<template>  <div id="app">    <vue-editor id="editor" useCustomImageHandler @imageAdded="handleImageAdded" v-model="htmlForEditor"> </vue-editor>  </div></template><script>import { VueEditor } from "vue2-editor";import axios from "axios";export default {  components: {    VueEditor  },  data() {    return {      htmlForEditor: ""    };  },  methods: {    handleImageAdded: function(file, Editor, cursorLocation, resetUploader) {      // An example of using FormData      // NOTE: Your key could be different such as:      // formData.append('file', file)      var formData = new FormData();      formData.append("image", file);      axios({        url: ";,        method: "POST",        data: formData      })        .then(result => {          let url = result.data.url; // Get url from response          Editor.insertEmbed(cursorLocation, "image", url);          resetUploader();        })        .catch(err => {          console.log(err);        });    }  }};</script>

<template>  <div>    <button @click="setEditorContent">Set Editor Content</button>    <vue-editor v-model="content" />  </div></template><script>import { VueEditor } from "vue2-editor";export default {  components: { VueEditor },  data: () => ({    content: null  }),  methods: {    setEditorContent() {      this.content = "<h1>Html For Editor</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><style>#editor1,#editor2 {  height: 350px;}</style>

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

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

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

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