Ueditor 百度编辑器自定义工具栏与功能(ueditor+layui+ci)

最新推荐文章于 2025-06-25 11:46:11 发布

原创

最新推荐文章于 2025-06-25 11:46:11 发布 · 5.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#ueditor 插入原样html #ueditor 添加工具栏按钮及功能

本文介绍了如何在Ueditor中自定义工具栏按钮，添加插入原样HTML的功能。首先，修改ueditor.css和ueditor.config.js配置按钮样式和键。然后，在ueditor.all.js中添加按钮代码，并实现弹窗选择数据后将HTML插入到富文本焦点位置。使用layui弹框，确保通过inserthtml命令原样插入HTML，避免内容过滤处理。最后展示实现效果。

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

最近由于项目需要在富文本中，添加专题模块（固定样式）插入到富文本的某个地方。根据思路，分为以下几步。

第一步：样式及JS修改

在ueditor.css中添加按钮样式

在ueditor.config.js设置按钮KEY

重要的一步，在ueditor.all.js 中添加按钮，搜索 btnCmds，不然不会显示到工具栏上。

基础配置完成，接下来就是完成按钮功能，我的功能是弹出一个层，选择好数据之后，把整个层的HTML插入到焦点位置

第二步，按钮功能

直接在ueditor.all.js 末尾添加如下JS：


/**
 * 插入专题
 * @command craftsmanspecial
 * @method execCommand
 * @param { String } cmd 命令字符串
 * @example
 * ```javascript
 * editor.execCommand('craftsmanspecial');
 * ```