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

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

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

第一步:样式及JS修改

    在ueditor.css中添加按钮样式         

 在ueditor.config.js设置按钮KEY

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

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

第二步,按钮功能

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


/**
 * 插入专题
 * @command craftsmanspecial
 * @method execCommand
 * @param { String } cmd 命令字符串
 * @example
 
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值