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

最新推荐文章于 2024-11-06 11:01:34 发布

qq_40519017

最新推荐文章于 2024-11-06 11:01:34 发布

阅读量266

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_40519017/article/details/89672826

本文详细介绍了在Vue项目中如何使用vue-quill-editor组件实现富文本编辑功能。通过HTML和JS代码示例，展示了编辑器的安装、引入、配置及基本用法，帮助开发者快速掌握富文本编辑器的集成和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML:

<!--利用quill-editor标签，在标签内部定义ref v-model :options（配置项）这些属性  还定义了一些事件-->

<div class="edit_container">
    <!--  新增时输入 -->
    <quill-editor v-model="addForm.content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
    </quill-editor>
    <!-- 从数据库读取 -->
    <div v-html="addForm.str" class="str-editor"></div>
</div>


<!--v-html="addForm.str" 绑定str变量，可以调试看到富文本输入的内容传入到后端的数据-->

JS：

//引入vue-quill-editor 使得可以在代码中用vue-quill-editor的方法

import  VueQuillEditor from 'vue-quill-editor'
import { quillEditor } from 'vue-quill-editor'
Vue.use(VueQuillEditor)

//定义要用到的数据
   data: {
        editorOption:{
            // modules:{
            //     toolbar:[
            //         ['bold', 'italic', 'underline', 'strike','blockquote', 'code-block']
            //     ]
            // }
        },
        addForm: {
            content: "",
            str: ''
        }
    },

    computed: {
        editor() {
            return this.$refs.myQuillEditor.quill;
        }
    },

    methods: {
        // 定义富文本函数开始
        onEditorReady: function(editor) {

        },
        onEditorBlur: function(){

        },
        onEditorFocus: function(){

        },
        onEditorChange: function(){

        },
        //作用：从后端拿到奖品详情数据，将'&gt;'转换成'>' （规则）
        escapeStringHTML(str) {
            str = str.replace(/&lt;/g,'<');
            str = str.replace(/&gt;/g,'>');
            return str;
        },
        // 定义富文本函数结束
    }