vue中使用vue-quill-editor富文本编辑器

迈不过友情╰ 2022-02-03 01:37 334阅读 0赞

最近项目中接触到了富文本编辑器，最终选择了vue-quill-editor。  
第一步：首先下载安装

npm install vue-quill-editor --save

第二步：在main.js中引用

// 使用quill富文本编辑器
    import  VueQuillEditor from 'vue-quill-editor'
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    
    Vue.use(VueQuillEditor);

第三步：创建一个新的js文件，取名为 quill-title.js

第四步：创建一个新的vue文件，取名为 quillEditor.vue

<template>
    	
    	<div class="edit_container">
    		<quill-editor
    			v-model="content"
    			ref="myQuillEditor"
    			:options="editorOption"
    			@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
    			@change="onEditorChange($event)">
    		</quill-editor>
    	</div>
    </template>
    
    <script type="text/ecmascript-6">
      import ElButton from "../../../node_modules/element-ui/packages/button/src/button.vue";
      import { addQuillTitle } from './quill-title.js';
      export default {
        components: {ElButton},
        name: 'App',
           data(){
             return {
               content: ``,
               // 定义富文本编辑器显示
               editorOption: {
                  modules:{
                      toolbar:[
                           ['bold','italic','underline','strike'], // 加粗、倾斜、下划线、删除线
                           [{'header':1},{'header':2}], // 标题一、标题二
                           [{'list':'ordered'},{'list':'bullet'}], // 列表
    					   [{'color':[]},{'background':[]}], // 字体颜色、背景颜色
                      ]
                }
     	  },
       }
    },
    computed: {
        editor() {
             return this.$refs.myQuillEditor.quill;
       }
    },
    methods: {
    	  // 准备编辑器
          onEditorReady(editor) {},
          // 失去焦点事件
          onEditorBlur(){}, 
          // 获得焦点事件
          onEditorFocus(){}, 
           // 内容改变事件
          onEditorChange(){},
          saveHtml:function(event){
             alert(this.content);
          }
        },
       mounted(){  addQuillTitle(); }
    }
    </script>

第五步：在别的页面引入就可以了

<template>
    	<div>
    		<quill-editor
    			v-model="content"
    			ref="myQuillEditor"
    			:options="editorOption"
    			@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
    			@change="onEditorChange($event)">
    		</quill-editor>
    	</div>
    </template>
    <script type="text/ecmascript-6">
         import ElButton from "../../../node_modules/element-ui/packages/button/src/button.vue";
         import QuillEditor from './quillEditor.vue';
            export default {
    			components: { ElButton },
    		    name: 'App',
    		    computed: {
                   editor() {
                        return this.$refs.myQuillEditor.quill;
                    }
                },
                methods:{
                	// 准备编辑器
                    onEditorReady(editor) {},
                    // 失去焦点事件
                    onEditorBlur(){},
                    // 获得焦点事件
                    onEditorFocus(){},
                    // 内容改变事件
                    onEditorChange(){},
                    saveHtml:function(event){},
                }
    	  }
    </script>