vue3 wangeditor 自定义菜单

Vue3 中自定义 Wangeditor 菜单的方法

在 Vue3 项目中集成并自定义 wangeditor 的菜单项可以通过创建自定义组件来完成。具体来说，可以利用官方提供的 API 和插件机制实现这一目标。

创建 SelectMenu 组件

为了向编辑器添加新的下拉选项卡（即 SelectMenu），需要继承 EditorMenu 类，并重写对应的生命周期函数：

import { Menu, editorConfig } from '@wangeditor/editor'
class MySelectMenu extends Menu {
    constructor(editor) {
        super(editor);
        this.$elem = null;
    }

    // 获取菜单配置
    getMenuItemConf() {
        return {
            key: 'my-select-menu',
            title: '我的选择菜单', // 提示文字
            iconSvg: '<svg>...</svg>', // 图标 SVG 字符串
        }
    }

    // 渲染 DOM 结构
    createContentElem() {
        const div = document.createElement('div');
        div.innerHTML = `<ul>
                            <li data-value="option1">选项一</li>
                            <li data-value="option2">选项二</li>
                        </ul>`;
        this.$elem = div.firstChild;

        // 添加点击事件监听器
        Array.from(this.$elem.children).forEach((item) => {
            item.addEventListener('click', () => {
                console.log(item.getAttribute('data-value'));
                this.editor.command.customInsertText(`选择了 ${item.textContent}`);
            });
        });

        return this.$elem;
    }
}

上述代码展示了如何通过 JavaScript 实现一个简单的 SelectMenu[^1]。

注册自定义菜单至编辑器实例

为了让自定义的菜单生效，在初始化编辑器时需将其注册进去:

// 导入必要的模块
import WangEditor from "@wangeditor/editor-for-vue";
import MySelectMenu from './path/to/MySelectMenu';

export default defineComponent({
    components: { WangEditor },
    setup() {

        onMounted(() => {
            // 初始化编辑器前先加载自定义菜单类
            window['$editor'].config.MENU_CONF['custom'] = true; 
            window['$editor'].registerMenu(MySelectMenu);

            // 配置其他参数...
            
            // 初始化富文本编辑器
            const editor = createEditor({
                selector: '#editor-container',
                config: {},
                mode: "default"
            })
        })

        return {};
    }
});

这段脚本说明了怎样把之前编写的 MySelectMenu 加载到实际使用的编辑器环境中去。

完整案例展示

下面给出完整的 HTML 文件结构作为参考，其中包含了引入样式表、挂载点设置等内容：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>VUE3-WANGEDITOR DEMO</title>
<!-- 引入 CSS -->
<link rel="stylesheet" href="@wangeditor/editor/dist/css/style.css"/>

<style scoped>
/* 自定义样式 */
#wrapper{
    width:70%;
    margin:auto;
}

#editor-container{
    min-height:40vh;
    border:solid 1px #ccc;
}
</style>

</head>
<body>
<div id="app">
    <!-- 编辑区容器 -->
    <wang-editor v-model:value="content"></wang-editor>
    
    <!-- 其他页面元素... -->

</div>

<script src="./main.js"></script>
</body>
</html>

以上就是关于在 Vue3 应用程序里定制化 wangeditor 工具条的具体做法。

向AI提问

vue3 wangeditor 自定义菜单

Vue3 中自定义 Wangeditor 菜单的方法

创建 SelectMenu 组件

注册自定义菜单至编辑器实例

完整案例展示

相关推荐

vue3+wangEditor5自定义上传音频+视频

vue+wangEditor的使用与展示（表格+图片自定义上传+带格式粘贴）

vue3-wangeditor:基于Wangeditor富文本编辑器，用于Vue3.x的组件

vue3wangeditor 自定义字号

vue3 wangeditor自定义内容

wangeditor自定义菜单 vue3

vue3 函数组件wangeditor自定义内容

vue3+wangEditor 扩展自定义菜单-多次缩进

Vue3结合wangEditor5实现自定义媒体上传功能

vue3 wangeditor 展示 markdown

vue3 wangeditor 上传图片

vue3 wangeditor 上传音频

vue3 wangeditor工具栏配置

vue集成wangeditor富文本编辑器

vue3使用wangeditor

vue wangeditor

vue3使用wangeditor5怎么查看工具栏配置

wangeditor vue3 上传图片

vue2中wangeditor富文本编辑器

(源码)基于VS Code的程序员鼓励师插件.zip

大家在看

毕设项目：STM32直流电机控制系统.zip

瑞萨单片机代码生成软件

Stateflow建模规范

STM32CubeMX RTC配置STM32 RTC时钟掉电日期不更新

基于FPGA的VHDL语言 乘法计算

最新推荐

(源码)基于VS Code的程序员鼓励师插件.zip

ASP.NET高级编程学习资料合集下载指南

个人信息保护全攻略：如何在网络安全法框架下确保用户数据安全

飞机票订票系统DFD

DWZ富客户端框架v1.0.1发布: 界面组件实现与源码下载

【揭秘车辆重识别】：深入理解VeRi-776数据集及其在深度学习中的关键作用（权威解析）

google 倾斜摄影

STM32F407+UCOS-III+LWIP1.4.1 构建TCP并发服务器解决方案

【MDF文件导入Matlab：一步到位】

ubuntu安装mujoco210

基于FPGA的VHDL语言乘法计算