介紹

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

基本案例基本用法

<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: "https://fakeapi.yoursite.com/images",        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是一個簡單易用的富文字編輯器，如果沒有複雜的需求，你可以毫無保留的使用它，如果你需要複雜的功能，也可以使用其自定義能力進行自定義擴充套件！