UEditor新增自定义按钮(获取光标停留的位置,然后插入一个内容)

本文介绍了如何在UEditor编辑器中添加自定义按钮,以实现在光标位置插入特定内容,如{***}。步骤包括修改ueditor.config.js、zh-cn.js、ueditor.all.js以及ueditor.css文件,以及编写自定义功能代码,利用me.focus()和me.execCommand('inserthtml', "{***}")来获取光标位置并插入内容。" 122048043,8823389,Anaconda环境管理与常用命令指南,"['Python', '开发语言', '后端', '环境管理']
摘要由CSDN通过智能技术生成

在使用编辑器时,希望在工具栏加一个标签,点击标签就能在编辑器里面添加某个元素。

我遇到的问题是加上{***}这样的特殊字符。这个功能是编辑器本身没有的。

1.在ueditor.config.js中找到toolbars的数组,并在数组中添加一个你需要新增的按钮功能名称如下图所示 

2.在zh-cn.js 中找到labelMap并添加如下图所示,主要是用于鼠标放置上去显示的文字提示内容

3.在ueditor.all.js  中找到"btnCmds" ,在数组的最后添加"custombtn",如下图所示

到这里刷新看一下页面多个B,这是默认的样式。

4.我们现在改变那个图标B,在ueditor.css中添加如下所示。我下面直接选择了ueditor自身带的一个图

评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值