博客

Quill是一个跨平台的功能强大的富文本编辑器。开发者可以通过简单的API来控制编辑器的内容。

废话不多说！

使用场景：在线协同编辑，技术栈 laravel9+vue3

1、安装quill

npm install quill@1.3.7   #版本自己选择

2、安装vue-quill-editor

npm install vue-quill-editor

3、如果全局使用你就全局导入，如果组件使用就下组件内导入，我是组件内导入

import Quill from 'quill';
import "quill/dist/quill.core.css"; // 导入核心样式文件
import "quill/dist/quill.snow.css"; // 导入snow 主题样式
import "quill/dist/quill.bubble.css"; // 导入bubble 主题样式

4、设置编辑器样式和实例化编辑器

<script>

import Quill from 'quill';
import "quill/dist/quill.core.css"; // import styles
import "quill/dist/quill.snow.css"; // for snow theme
import "quill/dist/quill.bubble.css"; // for bubble theme
var toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    ['blockquote', 'code-block'],
    [{'list': 'ordered'}, {'list': 'bullet'}],
    [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
    [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
    [{'direction': 'rtl'}],                         // text direction

    [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
    [{'header': [1, 2, 3, 4, 5, 6, false]}],

    [{'color': []}, {'background': []}],          // dropdown with defaults from theme
    [{'font': []}],
    [{'align': []}],
    ['image'],
    ['clean'],                                    // remove formatting button
];
export default {
    components: {
        Quill,
    },
    data() {
        return {
            content: '1111',
            options: {
                height: '200px',
                debug: 'info',
                modules: {
                    toolbar: toolbarOptions,
                    history: {
                        delay: 2000,
                        maxStack: 500,
                        userOnly: true
                    }
                },
                placeholder: 'Compose an epic...',
                readOnly: false,
                theme: 'snow'
            },
        };
    },
    mounted() {
        this.initQuill();
    },
    methods: {
        initQuill() {
            const quillEditor = new Quill('.quill-container', this.options);
        },
    },
}
</script>

具体配置文件，建议去查看文档,地址：



配置(configuration) · Quill官方中文文档 · 看云 (kancloud.cn)



https://www.kancloud.cn/liuwave/quill/1409366



5、然后 运行 npm run dev

这是我本地截图