vue quill Vue-Quill-Editor 富文本调试记录

一故事会~

项目中刚开始用的 vue-ueditor-wrap 富文本编辑器 后来，想换掉（内容庞大且项目功能简单）

遇见 Vue-Quill-Editor ，使用没问题，但发现一个问题：该插件在赋值后 会自动获得焦点并进行页面滚动到文本编译区域（不可忍~）

一番调试（网上也有很多遇到这个问题，通用解决方式也有记录）无果！（由于本项目中较为复杂，通过v-if 判断的 网上的ref方式 没法实现！！）

换了思路 既然Vue-Quill-Editor是基于quil.js的 那么 我是否可以直接用quill 

直接上手quill 发现也存在这个焦点问题（顿时明白 原来焦点问题 不是 Vue-Quill-Editor的，而是从根上 quill就有~~~）

 

记录一：Vue-Quill-Editor 相关资料

Vue-Quill-Editor的使用方式 网上很多 就不单独记录！

 使用文档参考：

1.https://blog.csdn.net/senmage/article/details/82388728

2.https://www.jianshu.com/p/a6cba69d6e49

3.npm 地址：https://www.npmjs.com/package/vue-quill-editor

4.GitHub 地址：https://github.com/surmon-china/vue-quill-editor

5.扩展功能 https://blog.csdn.net/liuqiao0327/article/details/107126784/

 

记录二：为何网上的关于解决焦点问题的方式（this.$refs.myQuillEditor.quill.enable(false)）对我不起作用？

首先 说明一点，这个方式是有效果的，在我单独基于quill的使用中 就是用这个方式处理的！

由于项目中的表单字段很多 且是动态的，封装了一个表单组件，通过v-if 方式加载各个表单的子组件。由于ref和vif在vue中是有冲突的！ ref不是响应式的，所有的动态加载的模板更新它都无法相应的变化。导致 this.$refs.myQuillEditor.quill方式报错未定义！

 

 

记录三 vue中 直接使用quill.js 

参考！ https://segmentfault.com/a/1190000019606714 

百度应该很多的使用，比如quill官网文档~  http://doc.quilljs.cn/1409364

这篇文章还需要补充一些内容！ 

补充一：如何获取完整的html内容 

quill移除了getHTML()方法，所以现在使用quill.getContents()方法获取到的是一个JSON对像

但是 下面的方式可以实现自己补充 getHTML(方式)

quill.root.innerHTML;
quill.container.firstChild.innerHTML;　　

补充二： html内容如何展示在文本框中

 quill.pasteHTML(<p>这里是HTML内容</p>)
   这个方法适用于HTML标签哟

补充三：quill.getContents() quill.setContents() 数据格式

{ops:[{ insert: this.content }]}

样例代码 （由于项目之前存的数据都是html格式的，）

<template>
<div>
    <div class="editor"></div>
</div>
</template>

<script>
import Quill from 'quill'
import 'quill/dist/quill.snow.css'
export default {
    name: 'wfyediter',
    props: {
        value: Object,
        content:String,
    },
    data() {
        return {
        quill:null,
        options: {
            theme: 'snow',
            modules: {
                toolbar: [
                ['bold', 'italic', 'underline', 'strike'],
                ['blockquote', 'code-block'],
                [{ 'header': 1 }, { 'header': 2 }],
                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                [{ 'script': 'sub' }, { 'script': 'super' }],
                [{ 'indent': '-1' }, { 'indent': '+1' }],
                [{ 'direction': 'rtl' }],
                [{ 'size': ['small', false, 'large', 'huge'] }],
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                [],//{ 'color': [] }, { 'background': [] }
                [{ 'font': [] }],
                [{ 'align': [] }],
                ['clean'],
                [] //'link', 'image', 'video'
                ]
            },
            placeholder: 'Insert text here ...'
        }
        }
    },
    mounted() {
        let dom = this.$el.querySelector('.editor')
        this.quill = new Quill(dom, this.options);
        // this.quill.setContents(this.value);
        //setContents de 参数格式 {ops:[{ insert: 'Hello' }]}
        // this.quill.setContents({ops:[{ insert: this.content }]});
        // this.quill.setContents(delta);
        // this.quill.pasteHTML('<p>这里是HTML内容</p>')
        this.quill.enable(false);
        this.quill.pasteHTML(this.content)
        this.quill.blur();
        this.quill.enable(true);
        this.quill.on('text-change', () => {
            let cont = this.quill.getContents();
            // this.$emit('input', cont.ops[0].insert);  ;
            // this.$emit('input', this.quill.getContents());
            this.$emit('input', this.quill.root.innerHTML);
        });
    },
}
</script>

 

记录四：如何解决焦点问题

测试发现 

先把数据获取到，连同数据和组件一起加载！就不会出现此情况（使用content 手动数据方式）

 

记录五：quill以及Vue-Quill-Editor的强大之处及参考资料

该富文本实现了可以自己定制 。扩展某些功能~

1.https://blog.csdn.net/senmage/article/details/82388728

2.https://www.jianshu.com/p/a6cba69d6e49

3.npm 地址：https://www.npmjs.com/package/vue-quill-editor

4.GitHub 地址：https://github.com/surmon-china/vue-quill-editor

5.扩展功能 https://blog.csdn.net/liuqiao0327/article/details/107126784/

 

 

 

 

 

666