ueditor编辑器添加自定义按钮

一，ueditor的使用过程：

准备工具：将下载的ueditor文件考入项目中，

在jsp文件中引入ueditor.all.js,ueditor.config.js,ueditor.css，zh-cn.js文件。

二，ueditor添加自定义按钮。

添加一个“add”功能按钮到ueditor上。

第一步：找到：ueditor.config.js文件中的toobars处，添加'add'，全小写

 toolbars: [['fullscreen', 'source', '|', 'undo', 'redo', '|','bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|','rowspacingtop', 'rowspacingbottom', 'lineheight', '|','customstyle', 'paragraph', 'fontfamily', 'fontsize', '|','directionalityltr', 'directionalityrtl', 'indent', '|','justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|','link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|','simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|','horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|','inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|','print', 'preview', 'searchreplace', 'help', 'drafts','add'      ]]

第二步：找到zh-cn.js文件，在labelMap出添加'add':'添加自定义按钮'，给出按钮的悬浮提示。

UE.I18N['zh-cn'] = {'labelMap':{'anchor':'锚点', 'undo':'撤销', 'redo':'重做', 'bold':'加粗', 'indent':'首行缩进', 'snapscreen':'截图','italic':'斜体', 'underline':'下划线', 'strikethrough':'删除线', 'subscript':'下标','fontborder':'字符边框','superscript':'上标', 'formatmatch':'格式刷', 'source':'源代码', 'blockquote':'引用','pasteplain':'纯文本粘贴模式', 'selectall':'全选', 'print':'打印', 'preview':'预览','horizontal':'分隔线', 'removeformat':'清除格式', 'time':'时间', 'date':'日期','unlink':'取消链接', 'insertrow':'前插入行', 'insertcol':'前插入列', 'mergeright':'右合并单元格', 'mergedown':'下合并单元格','deleterow':'删除行', 'deletecol':'删除列', 'splittorows':'拆分成行','splittocols':'拆分成列', 'splittocells':'完全拆分单元格','deletecaption':'删除表格标题','inserttitle':'插入标题','mergecells':'合并多个单元格', 'deletetable':'删除表格', 'cleardoc':'清空文档','insertparagraphbeforetable':"表格前插入行",'insertcode':'代码语言','fontfamily':'字体', 'fontsize':'字号', 'paragraph':'段落格式', 'simpleupload':'单图上传', 'insertimage':'多图上传','edittable':'表格属性','edittd':'单元格属性', 'link':'超链接','emotion':'表情', 'spechars':'特殊字符', 'searchreplace':'查询替换', 'map':'Baidu地图', 'gmap':'Google地图','insertvideo':'视频', 'help':'帮助', 'justifyleft':'居左对齐', 'justifyright':'居右对齐', 'justifycenter':'居中对齐','justifyjustify':'两端对齐', 'forecolor':'字体颜色', 'backcolor':'背景色', 'insertorderedlist':'有序列表','insertunorderedlist':'无序列表', 'fullscreen':'全屏', 'directionalityltr':'从左向右输入', 'directionalityrtl':'从右向左输入','rowspacingtop':'段前距', 'rowspacingbottom':'段后距',  'pagebreak':'分页', 'insertframe':'插入Iframe', 'imagenone':'默认','imageleft':'左浮动', 'imageright':'右浮动', 'attachment':'附件', 'imagecenter':'居中', 'wordimage':'图片转存','lineheight':'行间距','edittip' :'编辑提示','customstyle':'自定义标题', 'autotypeset':'自动排版','webapp':'百度应用','touppercase':'字母大写', 'tolowercase':'字母小写','background':'背景','template':'模板','scrawl':'涂鸦','music':'音乐','inserttable':'插入表格','drafts': '从草稿箱加载', 'charts': '图表','add':'添加自定义按钮'},

第三步：找到ueditor.all.js文件的btnCmds出添加‘add’

 //为工具栏添加按钮，以下都是统一的按钮触发命令，所以写在一起var btnCmds = ['undo', 'redo', 'formatmatch','bold', 'italic', 'underline', 'fontborder', 'touppercase', 'tolowercase','strikethrough', 'subscript', 'superscript', 'source', 'indent', 'outdent','blockquote', 'pasteplain', 'pagebreak','selectall', 'print','horizontal', 'removeformat', 'time', 'date', 'unlink','insertparagraphbeforetable', 'insertrow', 'insertcol', 'mergeright', 'mergedown', 'deleterow','deletecol', 'splittorows', 'splittocols', 'splittocells', 'mergecells', 'deletetable', 'drafts','add'];

第四步：添加自定义按钮对应的功能。将其写入你的jsp页面也可以，添加在ueditor.all.js文件中也行。

//自定字按钮的功能
UE.commands['add']={execCommand:function(){this.execCommand('insertHtml','插入的内容');return true;}
}

第五步：添加自定义按钮的样式。在ueditor.css中添加也行，jsp页面也行。按钮的类属性.edu-for-add 是ueditor自动拼接的。

将自定义的同名图片放在themes/default/images下。

.edui-default  .edui-toolbar .edui-for-add  .edui-icon {background: url( ../images/add.png ) ;
}

ueditor编辑器添加自定义按钮相关推荐

php商品分类添加字段,zblogPHP分类模板添加自定义字段（调用UEditor编辑器输入法）...
今天来分享下zblogPHP分类模板中增加字段并且使用UEditor编辑器输入的方法. 这个方法以前很少用,一般的地方也确实不太需要这种自定义字段输入方法,但今天重写了yunduanmp模板,其中每个 ...
百度UEditor编辑器关闭抓取远程图片功能（默认开启）
2019独角兽企业重金招聘Python工程师标准>>> 这个坑娘的功能,开始时居然不知道如何触发,以为有个按钮,点击一下触发,翻阅了文档,没有发现,然后再网络上看到原来是复制粘贴非白 ...
ueditor 编辑html文件名,UEditor编辑器自定义上传图片或文件路径的修改方法，ueditor修改方法...
UEditor编辑器自定义上传图片或文件路径的修改方法,ueditor修改方法使用ueditor编辑器,附件默认在ueditor/php/upload/, 我的附件地址是网站根目录下/data/u ...
ueditor 编辑器增加css样式_Web入侵之利用编辑器漏洞入侵
Web入侵之利用编辑器漏洞入侵 Ewebeditor漏洞详细可参考:https://www.0dayhack.com/post-426.html 1.常见的编辑器常见的有Ewebeditor,fck ...
泛微OA二次开发E8之UE富文本编辑器增加按钮操作
泛微OA协同办公系统在这里就不多作描述,有需要的可自行了解. 现在说说我遇到的问题以及解决方案. 遇到的需求问题公司有自己的文件存储服务器,所以想把图片上传和文件上传都传输到自己的服务器上,所以需要 ...
ueditor编辑器遇到的问题
问题1: 在Ueditor编辑器里,直接粘贴一篇文章或html源码时,编辑器会自动生成标签. 解决方法: 在ueditor.all.js文件找到下面这段代码,将替换为' '即可.如下所示: fun ...
[转]百度UEditor编辑器(php)
百度UEditor编辑器!合入PHP网站! 一.富文本内容交互 1.编辑器内容初始化(即往编辑器中设置富文本) 场景一:写新文章,编辑器中预置提示.问候等内容. 在editor_config.js文件 ...
百度UEditor编辑器,合入PHP网站
本文转自:http://www.cnblogs.com/losen/archive/2013/05/23/3094612.html 百度UEditor编辑器!合入PHP网站! Posted on 20 ...
百度UEditor编辑器使用教程与使用方法
第一:百度UEditor编辑器的官方下载地址 ueditor 官方地址:http://ueditor.baidu.com/website/index.html 开发文档地址:http://uedito ...

ueditor编辑器添加自定义按钮

ueditor编辑器添加自定义按钮相关推荐

最新文章

热门文章