Vue使用富文本編輯器vue-quill-editor

一。vue-quill-editor

內容創建從一開始就是網頁的核心，幾乎所有的Web應用使用<textarea>作為一種原生的基本解決方案。但是，在某些時候，您可能需要在文本內容中插入格式，這就需要富文本編輯器。這里有很多選擇，但Quill帶來了一些可參考的現代化思想，支持圖片的上傳和自定義內容和格式

官方中文文檔https://www.kancloud.cn/liuwave/quill/1434140

效果圖

 演示地址：https://github.surmon.me/vue-quill-editor/

二、安裝方式

1.npm

npm install vue-quill-editor --save

2.cdn

<link rel="stylesheet" href="path/to/quill.core.css"/>
<link rel="stylesheet" href="path/to/quill.snow.css"/>
<link rel="stylesheet" href="path/to/quill.bubble.css"/>
<script type="text/javascript" src="path/to/quill.js"></script>
<script type="text/javascript" src="path/to/vue.min.js"></script>
<script type="text/javascript" src="path/to/dist/vue-quill-editor.js"></script>
<script type="text/javascript">
  Vue.use(window.VueQuillEditor)
</script>

vue安裝完成示例代碼

<template>
  <div style="width:50%;height:500px">
    <quill-editor
      v-model="content" 
            ref="myQuillEditor" 
            :options="editorOption" 
            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
            @change="onEditorChange($event)">>
            </quill-editor>
            <!-- <button @click="editorSave">點擊保存</button> -->
            <div></div>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { quillEditor } from "vue-quill-editor";
export default {

  data() {
    return {
      content: 'vue-quill-editor 富文本編輯器',
      editorOption: {}
    }
  },
  components: {
    quillEditor
  },

  methods: {
        onEditorReady(editor) { // 准備編輯器
 
        },
        onEditorBlur(){}, // 失去焦點事件
        onEditorFocus(){}, // 獲得焦點事件
        onEditorChange(){}, // 內容改變事件
        editorSave(){
          alert(this.content);
          console.log(this.content)
        }
    },
    computed: {
        editor() {
            return this.$refs.myQuillEditor.quill;
        },
    }
}
</script>

<style scoped>

</style>