经使用以后总结,大概有如下两种实现方法。

 

说在前面的:


UEditor下载地址:http://ueditor.baidu.com/website/download.html

UEditor官方文档:http://fex.baidu.com/ueditor

 

这里以UEditor v1.4.3.3 PHP UTF-8版 版本为例,以下是代码功能模块目录结构:

 

 

在浏览器中打开index.html文件,效果如下:

 

 

 

 

实现方式一(在外部js文件中新增自定义按扭):


1、在index.html入口文件中添加以下代码,为了便于理解,这里用newbtn为命名

 

新增按扭JS代码如下: 

 

新增按扭代码后以效果如下:

 

鼠标指向该按扭:会显示上面之前在title:属性中设置文字提示!

鼠标点击该按扭:还会弹出之前在onclick 回调函数中 alert() 的文字信息!

怎么样简单吧!

 

这个icons.png的图片路径在 themes / default / images 目录中!

 

要给我们刚新添加的这个按扭换icon有两种方式:

2.1、在原有的icons.png图片中添加一个icon,可用PS等设计软件实现,然后打开themes / default / css 目录下的 ueditor.css 样式文件,添加一个 和 新增按扭时设置的名字一样的类名,所以这里就用 .edui-for-newbtn 。

 

效果如下:

 

2.2、单独用一个icon图片来显示,做法和上面相似:

a、先设计好、或找好icon图片,存放到 themes / default / images目录中,名字最好和对应的按扭名相同,所以这里就用newbtn。

b、打开themes / default / css 目录下的 ueditor.css 样式文件,添加和新增按扭名对应的样式类。

 

修改新增按扭icon图标CSS样式代码:

 

 

 

 

 

 


 

 

2、找到lang目录下的zh-cn/zh-cn.js 中找到labelMap对象,并添加与新增按扭名(newbtn)对应的中文名,主要是用于鼠标放置上去显示的文字提示内容

 

3、在ueditor.all.js  中搜索到”btnCmds” ,在数组的最后添加”newbtn”。

下次更新。。。

声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2020年3月17日
下一篇 2020年3月17日

相关推荐