经使用以后总结,大概有如下两种实现方法。
说在前面的:
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进行处理,非常感谢!