vue-quill-editor 重写工具栏方法

最新推荐文章于 2024-05-29 20:59:50 发布

＊且听风吟

最新推荐文章于 2024-05-29 20:59:50 发布

阅读量559

点赞数

分类专栏： # Vue 2.x 文章标签： vue.js css html

本文链接：https://blog.csdn.net/HH18700418030/article/details/119990785

版权

本文介绍了如何在 vue-quill-editor 中重写工具栏的 handlers 方法，特别是针对 'direction' 的自定义事件处理。当点击方向图标时，触发特定功能。提供了完整的代码示例。

摘要由CSDN通过智能技术生成

修改 toolbar 里面的 handlers 处理方法：

          toolbar: {
   
            container: toolbarOptions,
            theme: 'snow', //主题 snow/bubble
            handlers: {
   
              'direction': (value) => {
   
                this.$message.success('操作成功')
                console.log('content', this.content);
              }
            }
          }

匹配到 direction ，自定义其处理事件。

点击方向图标时：
在这里插入图片描述
完整代码如下：

<template>
  <div class="quill-editor">
    <quill-editor v-model="content" :content="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" ref="QuillEditor" style="height: 300px;">
    </quill-editor>
    <div v-html="content"