Vue+Element+Vue-Quill-Editor富文本编辑器

Vue+Element+Vue-Quill-Editor富文本编辑器

1.下载Vue-Quill-Editor

npm install vue-quill-editor --save

2.下载quill（Vue-Quill-Editor需要依赖）

  npm install quill --save

3.代码

 <template>
     <el-dialog
  title="编辑文章"
  :visible.sync="showquillEditor"
  align="center"
  :before-close="handleClose"
>
    <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>
     </el-dialog>
</template>
<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
    export default {
        components: {
            quillEditor
        },
        data() {
            return {
                content: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`,
                editorOption: {},
                showquillEditor: true,
            }
        },
        methods: {
            onEditorReady(editor) { // 准备编辑器
    
            },
            onEditorBlur(){}, // 失去焦点事件
            onEditorFocus(){}, // 获得焦点事件
            onEditorChange(){
            console.log(this.content);//获取文本框的全部内容
            }, // 内容改变事件
             handleClose(done) {
             this.$confirm("确认关闭？")
            .then(_ => {
               done();
              })
           .catch(_ => {});
         },
        },
        computed: {
            editor() {
                return this.$refs.myQuillEditor.quill;
            },
        }
    }
    </script>

4.重要坑（解决编辑内容时按ctrl+v粘贴内容，滚动条自动回滚到编辑器的顶部）

//在html页面直接加这一段css代码，或者其他地方添加，优先级比 import "quill/dist/quill.snow.css";里面的css样式高就行

.ql-container {
  height: 500px !important;
  overflow: auto !important;
}