wangeditor自定义按钮及上传文件配置

最新推荐文章于 2025-10-09 08:52:03 发布

原创

最新推荐文章于 2025-10-09 08:52:03 发布 · 2.9k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

我们这次项目是一个在线考试系统，其中有一个富文本的需求，并且有一个填空的样式，但是wangeditor富文本并没有原生的这些东西，只能自己自定义一下
在这里插入图片描述
自定义按钮js文件

import E from 'wangeditor' // npm 安装
const {
   
    BtnMenu } = E
var _this = null
export default class AlertMenu extends BtnMenu {
   
   
    constructor(editor) {
   
   
        // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
        _this = editor
        const $elem = E.$(
            `<div class="w-e-menu" data-title="填空">
                填空
            </div>`
        )
        super($elem, editor)
    }
    // 菜单点击事件
    clickHandler() {
   
   
        // 做任何你想做的事情
        // 可参考【常用 API】文档，来操作编辑器
        _this.cmd.do("insertHTML", `&nbsp;<u style="pading:0px 10px;">&nbsp;&nbsp;&nbsp;&nbsp;1&nbsp;&nbsp;&nbsp;&nbsp;</u>&nbsp;`)

    }
    // 菜单是否被激活（如果不需要，这个函数可以空着）
    // 1. 激活是什么？光标放在一段加粗、下划线的文本时，菜单栏里的 B 和 U 被激活，如下图
    // 2. 什么时候执行这个函数？每次编辑器区域的选区变化（如鼠标操作、键盘操作等），都会触发各个菜单的 tryChangeActive 函数，重新计算菜单的激活状态
    tryChangeActive() {
   
   
        // 激活菜单
        // 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class
        // 2. this.this.isActive === true
        this.active()
        // // 取消激活菜单
        // // 1. 菜单 DOM 节点会删掉 .w-e-active
        // // 2. this.this.isActive === false
        // this.unActive()
    }
}

组件中的书写

<template>
  <div>
    <button @click="dialogVisible = true">点击</button>

最低0.47元/天解锁文章