百度编辑器（ueditor）魔改：1、增加自定义按钮

1、增加自定义按钮

2、彻底接管文件上传

3、高亮提示

4、滚动条管理

5、自定义排版

-----------------------------------------------------------

百度编辑器的使用说明有很多了，这里不再详细说明，直接开始进行设置

第一步：追加配置

打开ueditor.config.js配置文件，找到toolbars属性

        toolbars: [['fullscreen', 'source', '|','formatContent', // 自定义一键排版'imageupload','fileupload', '|', //附件'paragraph', //段落格式'bold', //加粗'italic', //斜体'justifyleft', //居左对齐'justifyright', //居右对齐'justifycenter', //居中对齐'subscript', //下标'superscript', //上标'spechars', //特殊字符  '|', 'drafts', 'insertimage', '|', 'adwordfilter',],]

toolbars就是定义百度编辑器的顶部按钮集合的，这里，我们追加了四个自定义按钮，分别是：formatContent，imageupload，fileupload和adwordfilter

第二步：设置按钮的样式

打开themes\default\_css\button.css或buttonicon.css，追加我们的样式

.edui-toolbar .edui-for-formatcontent .edui-button-wrap .edui-button-body .edui-icon {margin-right:60px;overflow:visible;background-position: -640px -40px}
.edui-toolbar .edui-for-formatcontent .edui-button-wrap .edui-button-body .edui-icon:before {content:"一键排版";font-size:12px;line-height:20px;padding-left:24px;width:60px !important;white-space:nowrap;}
.edui-toolbar .edui-for-imageupload .edui-button-wrap .edui-button-body .edui-icon {margin-right:60px;overflow:visible;background-position: -726px -77px}
.edui-toolbar .edui-for-imageupload .edui-button-wrap .edui-button-body .edui-icon:before {content:"图片上传";font-size:12px;line-height:20px;padding-left:24px;width:60px !important;white-space:nowrap;}
.edui-toolbar .edui-for-fileupload .edui-button-wrap .edui-button-body .edui-icon {margin-right:60px;overflow:visible;background-position: -620px -40px}
.edui-toolbar .edui-for-fileupload .edui-button-wrap .edui-button-body .edui-icon:before {content:"文件上传";font-size:12px;line-height:20px;padding-left:24px;width:60px !important;white-space:nowrap;}
.edui-toolbar .edui-for-adwordfilter .edui-button-wrap .edui-button-body .edui-icon {margin-right:160px;overflow:visible;background-position: 0px 0px;background:url(/Themes/Images/validatebox_warning.png) no-repeat left center;color:red;}
.edui-toolbar .edui-for-adwordfilter .edui-button-wrap .edui-button-body .edui-icon:before {content:"广告法违规词提醒：0个词";font-size:12px;line-height:20px;padding-left:24px;width:160px !important;white-space:nowrap;font-weight:bold;}

这里，我们追加了对应我们上边按钮对应的样式，每个按钮对应两个样式，一个是按钮的宽度及图标设置，另一个则是伪类before，如果按钮中不需要显示文字，这个伪类可以不进行设置，.edui-for-按钮名就是对应的按钮样式了

我在这里设置的是超出图标范围的内容可见overflow:visible，按钮向右多占一些宽度，margin-right:60px，多占出来的空间，用来显示伪类中的文字，伪类中的样式就不细说了

第三步：启用按钮功能

打开src\adapter\editorui.js，找到btnCmds修改

    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','formatContent', 'imageupload', 'fileupload', 'adwordfilter'];

在这里继续追加我们刚才追加的那四个按钮

这样，我们就在百度编辑器的按钮集里追加设定了我们自己的按钮，并且实现了文字按钮

百度编辑器（ueditor）魔改：1、增加自定义按钮相关推荐

百度html在线编辑器插件,百度编辑器UEditor插件DjangoUeditor v1.8.143
DjangoUeditor将Ueditor封装为一个Django app,提供文件/图片等上传功能,提供UEditorField.UEditorWidget等封装类,简化Ueditor在Django中 ...
基于百度编辑器Ueditor的二次开发
基于百度编辑器Ueditor的二次开发官网下载基本配置简化后端配置,不请求后端配置项后端接口规范修改图片上传说明及修改新增按钮及弹窗(自定义附件上传) 按钮文案修改在业务开发的时候,曾 ...
【转】百度编辑器UEditor
Ueditor 1.4.3 单独调用上传图片,或文件功能原文:https://www.cnblogs.com/sadkilo/p/5951336.html 第一步引入ueditor的js包第二步 ...
php百度编辑器精简版,开源web编辑器|百度编辑器ueditor下载1.4.3.4php版下载_久友软件下载...
百度编辑器ueditor是由百度官方推出的开源web编辑器.百度编辑器ueditor能支持用户在网页上进行内容编辑,软件体积十分的轻巧,完全免费开源,加载速度极快,兼容所有主流的浏览器使用,如:Moz ...
帝国cms html5 编辑器,帝国CMS修改默认编辑器为百度编辑器UEditor的方法
帝国默认编辑器确实非常难用,今天开拓族做了一个教程用最简单的方法来替换默认编辑器的方法! 同时支持前台投稿和后台发布! 效果演示下载百度编辑器ueditor,将ueditor解压到后上传到帝国的插件 ...
百度编辑器ueditor使用
百度编辑器ueditor使用引入步骤: ueditor放到相应目录比如\blog\Public\admin 2.页面head中加入js <script type="text/ja ...
帝国cms html5 编辑器,帝国cms整合百度编辑器ueditor图文教程
一.UEditor简介帝国cms自带文本编辑器是fckeditor,用起来效果不太理想. 百度也推出了自己的编辑器UEditor UEditor是由WEB前端研发部开发的所见即所得的开源富文本编辑器 ...
百度编辑器Ueditor 初始化加载内容失败解决办法
原文地址为: 百度编辑器Ueditor 初始化加载内容失败解决办法项目上有用到百度文本编辑器ueditor,在页面加载的时候初始化编辑器内容时候,使用 $.document.ready(functi ...
百度编辑器ueditor插入表格没有边框解决方法
百度编辑器ueditor插入一个表格后,在编辑过程中有表格,但是保存后,在前台网页中没有边框,也没有颜色.找了很久的源码,终于解决了. 打开编辑器根目录下面的ueditor.all.js文件,找到: ...

百度编辑器（ueditor）魔改：1、增加自定义按钮

百度编辑器（ueditor）魔改：1、增加自定义按钮相关推荐

最新文章

热门文章