富文本编辑器（vue-quill-editor）自定义工具栏按钮

最新推荐文章于 2024-05-25 16:04:51 发布
最新推荐文章于 2024-05-25 16:04:51 发布
阅读量6.9k 收藏 10
点赞数 5
分类专栏： 前端 # vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31970227/article/details/111239220
版权
前端 同时被 2 个专栏收录
13 篇文章 1 订阅
订阅专栏
vue
8 篇文章 1 订阅
订阅专栏
安装
npm install vue-quill-editor --save
使用
1、引用

（1）局部引用，在使用页面引入

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  }
}

（2）全局引用，在main.js中注册

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)
2、工具栏配置
  • toolbar为菜单工具栏，其中container为工具栏显示内容，每一个工具在页面上为一个按钮，handlers为按钮点击事件
  • 修改container控制工具栏的顺序和增删，其中insertMetric为自定义按钮
  • 在handlers中定义点击事件insertMetric: function (){}
editorOption: {
    modules: {
        toolbar: {
            container: [
                ['bold', 'italic', 'underline', 'strike'],
                ['blockquote'],
                [
                    {
                        header: 1
                    },
                    {
                        header: 2
                    }
                ],
                [
                    {
                        list: 'ordered'
                    },
                    {
                        list: 'bullet'
                    }
                ],
                [
                    {
                        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'],
                ['insertMetric'] //新添加的工具
            ],
            handlers: {
                shadeBox: null,
                insertMetric: function () {
                    //方法体
					alert(1);
                }
            }
        }
    }
},
content: '',
3、页面元素
<quill-editor ref="editorComp" v-model="content" :options="editorOption"> </quill-editor>

//自定义按钮内容初始化
initButton() {
    const sourceEditorButton = document.querySelector('.ql-insertMetric');
    sourceEditorButton.innerHTML = '<i class="el-icon-plus" style="font-size: 18px;color: black"></i>';
}

mounted() {
   this.initButton();
}

页面效果如图所示
在这里插入图片描述

此时，发现了一个问题，按钮很多，在不测试的情况下无法知道所有按钮的含义，于是增加按钮提示

4、增加工具栏提示
  • vue-quill-editor没有默认的设置，所以手动添加一个变量，循环工具栏的button，为其添加title属性

页面元素如下：
在这里插入图片描述

代码实现：

toolbarTips: [
    {
        Choice: '.ql-bold',
        title: '加粗'
    },
    {
        Choice: '.ql-italic',
        title: '倾斜'
    },
    {
        Choice: '.ql-underline',
        title: '下划线'
    },
    {
        Choice: '.ql-header',
        title: '段落格式'
    },
    {
        Choice: '.ql-strike',
        title: '删除线'
    },
    {
        Choice: '.ql-blockquote',
        title: '块引用'
    },
    {
        Choice: '.ql-size',
        title: '字体大小'
    },
    {
        Choice: '.ql-list[value="ordered"]',
        title: '编号列表'
    },
    {
        Choice: '.ql-list[value="bullet"]',
        title: '项目列表'
    },
    {
        Choice: '.ql-header[value="1"]',
        title: 'h1'
    },
    {
        Choice: '.ql-header[value="2"]',
        title: 'h2'
    },
    {
        Choice: '.ql-align',
        title: '对齐方式'
    },
    {
        Choice: '.ql-color',
        title: '字体颜色'
    },
    {
        Choice: '.ql-direction',
        title: '文字方向'
    },
    {
        Choice: '.ql-background',
        title: '背景颜色'
    },
    {
        Choice: '.ql-image',
        title: '图像'
    },
    {
        Choice: '.ql-video',
        title: '视频'
    },
    {
        Choice: '.ql-link',
        title: '添加链接'
    },
    {
        Choice: '.ql-formula',
        title: '插入公式'
    },
    {
        Choice: '.ql-clean',
        title: '清除格式'
    },
    {
        Choice: '.ql-indent[value="-1"]',
        title: '向左缩进'
    },
    {
        Choice: '.ql-indent[value="+1"]',
        title: '向右缩进'
    },
    {
        Choice: '.ql-header .ql-picker-label',
        title: '标题大小'
    },
    {
        Choice: '.ql-header .ql-picker-item[data-value="1"]',
        title: '标题一'
    },
    {
        Choice: '.ql-header .ql-picker-item[data-value="2"]',
        title: '标题二'
    },
    {
        Choice: '.ql-header .ql-picker-item[data-value="3"]',
        title: '标题三'
    },
    {
        Choice: '.ql-header .ql-picker-item[data-value="4"]',
        title: '标题四'
    },
    {
        Choice: '.ql-header .ql-picker-item[data-value="5"]',
        title: '标题五'
    },
    {
        Choice: '.ql-header .ql-picker-item[data-value="6"]',
        title: '标题六'
    },
    {
        Choice: '.ql-header .ql-picker-item:last-child',
        title: '标准'
    },
    {
        Choice: '.ql-size .ql-picker-item[data-value="small"]',
        title: '小号'
    },
    {
        Choice: '.ql-size .ql-picker-item[data-value="large"]',
        title: '大号'
    },
    {
        Choice: '.ql-size .ql-picker-item[data-value="huge"]',
        title: '超大号'
    },
    {
        Choice: '.ql-font .ql-picker-label',
        title: '字体'
    },
    {
        Choice: '.ql-size .ql-picker-item:nth-child(2)',
        title: '标准'
    },
    {
        Choice: '.ql-align .ql-picker-item:first-child',
        title: '居左对齐'
    },
    {
        Choice: '.ql-align .ql-picker-item[data-value="center"]',
        title: '居中对齐'
    },
    {
        Choice: '.ql-align .ql-picker-item[data-value="right"]',
        title: '居右对齐'
    },
    {
        Choice: '.ql-align .ql-picker-item[data-value="justify"]',
        title: '两端对齐'
    },
    {
        Choice: '.ql-insertMetric',
        title: '插入指标'
    }
]，

initButton() {
    document.getElementsByClassName('ql-editor')[0].dataset.placeholder = '';
    for (let item of this.toolbarTips) {
        let tip = document.querySelector('.quill-editor ' + item.Choice);
        if (!tip) continue;
        tip.setAttribute('title', item.title);
    }
},

mounted() {
   this.initButton();
}

实现效果：

在这里插入图片描述

5、自定义按钮方法

  • 在第三步中，定义了一个简单的按钮方法，此处，对方法内容进行详细描述

  • 自定义按钮在项目中的需求为：点击按钮，提示用户可以输入哪些信息，然后用户可以再这些信息上进行选择，并插入到页面元素，如图所示

在这里插入图片描述

(1) 页面元素，点击按钮时显示

  • append-to-body：Dialog 自身是否插入至 body 元素上。
  • 在嵌套Dialog场景中，将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。只有一个弹窗可不必设置
<div v-if="showMetric">
    <el-dialog title="指标信息" :visible.sync="showMetric" width="600px" append-to-body>
        <el-table :data="variables" style="width: 100%">
            <el-table-column align="center" prop="name" label="时间" />
            <el-table-column align="center" prop="type" label="实例编号" />
            <el-table-column align="center" prop="ioType" label="命令" />
            <el-table-column align="center" prop="optional" label="命令" />
            <el-table-column align="center" prop="description" label="命令" />
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
<el-button @click="handleClick(scope.row)">插入</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</div>

（2）窗口显示方法

  • 注意：that: this 为自定义键值对，**insertMetric: function (){}**为匿名函数，匿名函数中this指向window，因此，自定义键值对，以便于在匿名函数内部可以获取到vue的this、
  • 点击按钮，showMetric = true，显示dialog
showMetric: false,
quill_this: this,
editorOption: {
	modules: {
		//省略其他内容
		handlers: {
            shadeBox: null,
            that: this,
            insertMetric: function () {
				//获取vue的this
                let self = this.handlers.that;
                self.showMetric = true;
				//获取window的this
                self.quill_this = this;
			}
		}
	}
},

（3）插入方法

  • 点击插入按钮，插入指标信息的name
import Delta from 'quill-delta';

handleClick(row) {
    this.insert(row.name);
    this.showMetric = false;
},

insert(name) {
	//获取editor实例
    let quill_this = this.quill_this;
	//editor自带方法：获取当前鼠标位置
    let range = quill_this.quill.getSelection(true);
	//插入内容
    let insert_value = '${' + name + '}';
	//editor自带方法：插入内容，更新页面元素，updateContents的第一个参数为Delta，需要引入
    quill_this.quill.updateContents(new Delta().retain(range.index).delete(range.length).insert(insert_value));
    quill_this.quill.setSelection(range.index + insert_value.length);
},
  • 插入方法参考工具栏中插入图片的方法，打印editor实例可见
    在这里插入图片描述
    在这里插入图片描述
完整代码
<template>
    <div>
        <el-card :style="contentHeight(120)">
            <quill-editor ref="editorComp" v-model="content" :options="editorOption"> </quill-editor>
            <div v-if="showMetric">
                <el-dialog title="指标信息" :visible.sync="showMetric" width="600px" append-to-body>
                    <el-table :data="variables" style="width: 100%">
                        <el-table-column align="center" prop="name" label="时间" />
                        <el-table-column align="center" prop="type" label="实例编号" />
                        <el-table-column align="center" prop="ioType" label="命令" />
                        <el-table-column align="center" prop="optional" label="命令" />
                        <el-table-column align="center" prop="description" label="命令" />
                        <el-table-column align="center" label="操作">
                            <template slot-scope="scope">
                                <el-button @click="handleClick(scope.row)">插入</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-dialog>
            </div>
        </el-card>
    </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor';
import Delta from 'quill-delta';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { deleteKey, deepClone } from '@/utils';
export default {
    name: 'editor',
    components: {
        quillEditor
    },
    data() {
        return {
            variables: [
                {
                    name: 'eventTime',
                    type: 'TIMEVAL',
                    ioType: 'OUT',
                    optional: false,
                    description: '事件时间'
                },
                {
                    name: 'begin',
                    type: 'TIMEVAL',
                    ioType: 'OUT',
                    optional: false,
                    description: '开始时间'
                },
                {
                    name: 'end',
                    type: 'TIMEVAL',
                    ioType: 'OUT',
                    optional: false,
                    description: '结束时间'
                },
                {
                    name: 'metricCode',
                    type: 'STRING',
                    ioType: 'OUT',
                    optional: false,
                    description: '指标代码'
                },
                {
                    name: 'metricName',
                    type: 'STRING',
                    ioType: 'OUT',
                    optional: false,
                    description: '指标名称'
                },
                {
                    name: 'metricValue',
                    type: 'STRING',
                    ioType: 'OUT',
                    optional: false,
                    description: '指标值'
                },
                {
                    name: 'ruleName',
                    type: 'STRING',
                    ioType: 'OUT',
                    optional: false,
                    description: '规则名称-事件标题'
                },
                {
                    name: 'port',
                    type: 'STRING',
                    ioType: 'IN',
                    optional: false,
                    description: '端口号'
                }
            ],
            editorOption: {
                modules: {
                    toolbar: {
                        container: [
                            ['bold', 'italic', 'underline', 'strike'],
                            ['blockquote'],
                            [
                                {
                                    header: 1
                                },
                                {
                                    header: 2
                                }
                            ],
                            [
                                {
                                    list: 'ordered'
                                },
                                {
                                    list: 'bullet'
                                }
                            ],
                            [
                                {
                                    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'],
                            ['insertMetric'] //新添加的工具
                        ],
                        handlers: {
                            shadeBox: null,
                            that: this,
                            insertMetric: function () {
                                let self = this.handlers.that;
                                self.showMetric = true;
                                self.quill_this = this;
                            }
                        }
                    }
                }
            },
            toolbarTips: [
                {
                    Choice: '.ql-bold',
                    title: '加粗'
                },
                {
                    Choice: '.ql-italic',
                    title: '倾斜'
                },
                {
                    Choice: '.ql-underline',
                    title: '下划线'
                },
                {
                    Choice: '.ql-header',
                    title: '段落格式'
                },
                {
                    Choice: '.ql-strike',
                    title: '删除线'
                },
                {
                    Choice: '.ql-blockquote',
                    title: '块引用'
                },
                {
                    Choice: '.ql-size',
                    title: '字体大小'
                },
                {
                    Choice: '.ql-list[value="ordered"]',
                    title: '编号列表'
                },
                {
                    Choice: '.ql-list[value="bullet"]',
                    title: '项目列表'
                },
                {
                    Choice: '.ql-header[value="1"]',
                    title: 'h1'
                },
                {
                    Choice: '.ql-header[value="2"]',
                    title: 'h2'
                },
                {
                    Choice: '.ql-align',
                    title: '对齐方式'
                },
                {
                    Choice: '.ql-color',
                    title: '字体颜色'
                },
                {
                    Choice: '.ql-direction',
                    title: '文字方向'
                },
                {
                    Choice: '.ql-background',
                    title: '背景颜色'
                },
                {
                    Choice: '.ql-image',
                    title: '图像'
                },
                {
                    Choice: '.ql-video',
                    title: '视频'
                },
                {
                    Choice: '.ql-link',
                    title: '添加链接'
                },
                {
                    Choice: '.ql-formula',
                    title: '插入公式'
                },
                {
                    Choice: '.ql-clean',
                    title: '清除格式'
                },
                {
                    Choice: '.ql-indent[value="-1"]',
                    title: '向左缩进'
                },
                {
                    Choice: '.ql-indent[value="+1"]',
                    title: '向右缩进'
                },
                {
                    Choice: '.ql-header .ql-picker-label',
                    title: '标题大小'
                },
                {
                    Choice: '.ql-header .ql-picker-item[data-value="1"]',
                    title: '标题一'
                },
                {
                    Choice: '.ql-header .ql-picker-item[data-value="2"]',
                    title: '标题二'
                },
                {
                    Choice: '.ql-header .ql-picker-item[data-value="3"]',
                    title: '标题三'
                },
                {
                    Choice: '.ql-header .ql-picker-item[data-value="4"]',
                    title: '标题四'
                },
                {
                    Choice: '.ql-header .ql-picker-item[data-value="5"]',
                    title: '标题五'
                },
                {
                    Choice: '.ql-header .ql-picker-item[data-value="6"]',
                    title: '标题六'
                },
                {
                    Choice: '.ql-header .ql-picker-item:last-child',
                    title: '标准'
                },
                {
                    Choice: '.ql-size .ql-picker-item[data-value="small"]',
                    title: '小号'
                },
                {
                    Choice: '.ql-size .ql-picker-item[data-value="large"]',
                    title: '大号'
                },
                {
                    Choice: '.ql-size .ql-picker-item[data-value="huge"]',
                    title: '超大号'
                },
                {
                    Choice: '.ql-font .ql-picker-label',
                    title: '字体'
                },
                {
                    Choice: '.ql-size .ql-picker-item:nth-child(2)',
                    title: '标准'
                },
                {
                    Choice: '.ql-align .ql-picker-item:first-child',
                    title: '居左对齐'
                },
                {
                    Choice: '.ql-align .ql-picker-item[data-value="center"]',
                    title: '居中对齐'
                },
                {
                    Choice: '.ql-align .ql-picker-item[data-value="right"]',
                    title: '居右对齐'
                },
                {
                    Choice: '.ql-align .ql-picker-item[data-value="justify"]',
                    title: '两端对齐'
                },
                {
                    Choice: '.ql-insertMetric',
                    title: '插入指标'
                }
            ],
            content: '',
            showMetric: false,
            quill_this: this,
        };
    },
    methods: {
        handleClick(row) {
            this.insert(row.name);
            this.showMetric = false;
        },
        initButton() {
            document.getElementsByClassName('ql-editor')[0].dataset.placeholder = '';
            for (let item of this.toolbarTips) {
                let tip = document.querySelector('.quill-editor ' + item.Choice);
                if (!tip) continue;
                tip.setAttribute('title', item.title);
            }
            const sourceEditorButton = document.querySelector('.ql-insertMetric');
            sourceEditorButton.innerHTML = '<i class="el-icon-plus" style="font-size: 18px; color: black"></i>';
        },
        insert(name) {
            let quill_this = this.quill_this;
            console.log(quill_this);
            let range = quill_this.quill.getSelection(true);
            let insert_value = '${' + name + '}';
            quill_this.quill.updateContents(new Delta().retain(range.index).delete(range.length).insert(insert_value));
            quill_this.quill.setSelection(range.index + insert_value.length);
        },
    },
    mounted() {
        this.initButton();
    }
};
</script>
时遇倾城色
关注
  • 5
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue-quill-editor 添加自定义工具栏
且听风吟的博客
09-04 5580
import { quillEditor } from 'vue-quill-editor' import Delta from 'quill-delta' import 'quill/dist/quill.core.css'; import 'quill/dist/quill.snow.css'; import 'quill/dist/quill.bubble.css'; const toolbarOptions = [ ['bold', 'italic', 'underline', 'strike
【Vue】在quill-editor组件工具栏中添加自定义的方法（添加源码编辑功能）
热门推荐
汪小穆的博客
11-22 2万+
前言：vue-quill-editor中缺少重要的源码编辑功能，我们现在就来给vue-quill-editor工具栏中添加一个源码编辑功能。 一、实现代码 ①、新建一个quill-config.js // toolbar工具栏的工具选项（默认展示全部） const toolOptions = [ ['bold', 'italic', 'underline', 'strike'],...
quill.js官方文档(七)【Module之Toolbar】
极客神殿
09-04 2265
工具栏模块允许用户容易的设置Quill的内容格式。 可以用自定义的容器和处理程序定义。 var quill = new Quill('#editor', { modules: { toolbar: { container: '#toolbar', // Selector for toolbar container handlers: { 'bold': customBoldHandler } } } }); 因为containe
Vue3标签组件绘制--自定义按钮组件
最新发布
qq_52368602的博客
05-25 1547
这是type的设定，然后还有一个就是plain的设定，plain情况下的话，默认底色为白，框和字有色。看了一会儿感觉和普通的组件封装好像是差不多的原理，和平常使用的整体组件是一个道理，可能自定义上之前没有那么强。按照之前的技术能力应该也是没有问题的，这是我看的up主的内容。1.el-button中有个type属性，通过type的切换实现效果，而其中的color和round都是基本样式，我该如何实现同样的效果呢。由此可以看到基本所有的改变都是根据type来的，只要可以得到type，就可以简化封装~
vue-quill-editor自定义工具栏，确定光标位置、插入内容，获取选中的内容。
是秃子总会发光
02-23 4606
vue-quill-editor自定义工具栏、确定光标位置、插入内容。
vue-quill-editor 自定义功能的实现(undo、redo)
s1012544671的博客
03-07 2301
记录一下最近工作遇到的问题，需求就是在vue-quil-editor富文本自定义撤销和还原功能:undo、redo。 安装 npm install vue-quill-editor -S 当然,也可以使用CDN的方式引入,我们这里讲NPM安装 组件中挂载 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' import { quil
quill-editor实现自定义按钮,上传图片到服务器,获取文本内容并展示
weixin_42839080的博客
02-21 6359
quill-editor是一款非常强大的富文本组件,在最近的项目里也是使用到了,附上:插件源码 使用也是非常简单: 一.下载Vue-Quill-Editor npm install vue-quill-editor --save 二.在vue里的组件中使用 &amp;amp;amp;amp;amp;lt;template&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;div class=&amp;amp;amp;a
Vue中使用quill-editor之修改工具栏(toolbar)
qq_36947168的博客
08-07 8959
前言 上篇文章介绍了如何在vue中使用quill-editor，但是quill-editor的工具栏不是很好用，所以本篇文章来定制quill-editor的工具栏 提示：以下是本篇文章正文内容，下面案例可供参考 一、toolbar工具栏对应的模块 大致分为以下两类： // 1.只需要填写功能名 bold - 加粗 italic - 斜体 underline - 下划线 strike - 删除线 blockquote - 引用 code-block - 代码块 formula - 公式 image - 图片
VUE- quill-editor 编辑器使用及自定义toobar详解
qq_27909209的博客
07-14 2263
加粗-- 这里是我添加的文字，自定义，尝试过用span用div，并不能把布局弄的很好，相反会挺糟糕。-->引号
vue中使用vue-quill-editor富文本编辑器，自定义toolbar修改工具栏options
qq_36657291的博客
12-19 695
https://www.jianshu.com/p/8e6eeefcc588
搞了三天1个通宵的问题-vue-quill-editor的组件复用问题
08-26 1523
vue 富文本 quill 巨坑
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
10-15
除了基础的使用，`vue-quill-editor`还允许自定义工具栏，你可以根据需求定制按钮和功能。以下是一个自定义工具栏的例子： ```html <quill-editor v-model="content" ref="myQuillEditor" :options="editor...
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
10-16
在本文中，我们将深入探讨如何在Vue项目中集成Element UI和vue-quill-editor，创建一个功能丰富的富文本编辑器，并实现图片的自定义上传。Vue是一个轻量级、高效的前端框架，Element UI则是一个基于Vue的组件库，...
vue3.0 vue-quill-editor.rar
09-19
Vue-Quill-Editor是一款基于Quill的 Vue.js 富文本编辑器组件，提供了丰富的文本格式化选项，如字体、字号、颜色、列表等，同时支持图片和视频的插入。在Vue3.0环境下使用Vue-Quill-Editor，需要确保组件与新版本的...
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
11-19
在使用Vue.js开发Web应用时，常常会遇到需要集成富文本编辑器的需求，Vue-quill-editor是一个非常流行的轻量级富文本编辑器组件，它基于Quill库进行封装，提供了丰富的功能和良好的用户体验。然而，在实际项目中，...
浅谈vue中使用编辑器vue-quill-editor踩过的坑
10-15
在Vue项目中，使用`vue-quill-editor`作为富文本编辑器时，可能会遇到一系列问题。本文将探讨其中的关键挑战，以及如何通过引入Element UI组件和自定义处理方法来优化图片上传功能。 首先，`vue-quill-editor`默认...
vue里使用quill
qq_43688916的博客
09-07 2176
下载插件 npm install vue-quill-editor --save 在main.js里引入 //富文本 import VueQuillEditor from 'vue-quill-editor' // require styles 引入样式 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEdit
Quill 编辑器使用记录（一）
itsima
06-17 1594
配置(configuration) · Quill官方中文文档 · 看云 (kancloud.cn)Quill是一个跨平台的功能强大的富文本编辑器。开发者可以通过简单的API来控制编辑器的内容。3、如果全局使用你就全局导入，如果组件使用就下组件内导入，我是组件内导入。使用场景：在线协同编辑，技术栈 laravel9+vue3。5、然后 运行 npm run dev。4、设置编辑器样式和实例化编辑器。
Vue中使用quill富文本编辑器（可上传本地图片，视频）
MissRen920的博客
07-07 3542
前言 需求需要实现富文本的功能，同时富文本中还可以上传视频和图片,选来选去最后决定了用这个富文本编辑器 官网：https://quilljs.com/ 1、安装富文本编辑器 npm install vue-quill-editor --save 2、在main.js中引入 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' im
vue-quill-editor副文本编辑器自定义工具栏内添加多个自定义按钮
09-13
要在vue-quill-editor副文本编辑器的自定义工具栏内添加多个自定义按钮，你可以按照以下步骤进行操作： 1. 首先，将vue-quill-editor引入到项目中。可以使用以下代码： ```javascript import { quillEditor } from 'vue-quill-editor' ``` 2. 在组件中设置编辑器的相关数据和选项。可以使用以下代码： ```javascript export default { data() { return { content: null, editorOption: { modules: { toolbar: [ ['bold', 'italic', 'underline', 'strike'], // 默认按钮 ['blockquote', 'code-block'], // 默认按钮 ['custom_button_1', 'custom_button_2'] // 自定义按钮 ] } } } }, methods: { onEditorBlur() { // 失去焦点事件 }, onEditorFocus() { // 获得焦点事件 }, onEditorChange() { // 内容改变事件 } } } ``` 3. 在toolbar中添加自定义按钮。在`toolbar`数组中添加一个新的数组，该数组包含你想要添加的自定义按钮的标识符。例如，你可以添加`custom_button_1`和`custom_button_2`两个自定义按钮。 4. 在编辑器的模板中使用`quill-editor`组件，并将之前设置的`content`、`editorOption`和相关事件绑定到相应的属性上。可以使用以下代码： ```html <template> <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor> </template> ``` 通过以上步骤，你就可以在vue-quill-editor副文本编辑器的自定义工具栏中添加多个自定义按钮了。请注意，在`toolbar`数组中的每个子数组都代表一行按钮，你可以根据需要添加更多的按钮，并按照自己的需求进行自定义。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值