富文本编辑器UEditor自定义工具栏(三、自定义工具栏功能按钮图标及工具栏样式简单修改)
导读
富文本编辑器UEditor提供丰富了定制配置项,如果想设置个性化的工具栏按钮图标有无办法呢?答案是肯定的!前两篇博文简要介绍了通过将原工具栏隐藏,在自定义的外部按钮上,调用UEditor各命令实现与原按钮相同的功能。本篇将介绍更为简单粗暴的方式。
传送门
1.富文本编辑器UEditor自定义工具栏(一、基础配置与字体、背景色、行间距、超链接实现)
2.富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)
一、效果图
自定义工具栏功能按钮图标效果如下
二、自定义工具栏按钮图标实现
1.增加自定义按钮
(1)打开文件 ueditor/themes/default/css/ueditor.css,添加样式 .edui-for-customimage
/*增加自定义图片图标*/
.edui-default .edui-for-customimage .edui-icon {
background-image: url('../images/customicons/ne_toolsicon17.png') !important;
background-repeat:no-repeat;
}
其中 background-image 属性,图片路径如下图,customicons文件夹下为功能按钮的图标,建议图标大小为20*20px,ne_toolsicon17.png 为自定义按钮的图标。
(2)ueditor.config.js文件中的toolbars数组,增加一个“customimage”配置
, toolbars: [[
......,print', 'preview', 'searchreplace', 'help'
//, 'drafts' 从草稿箱加载
//新增自定义按钮
,'customimage'
]]
//自定义按钮鼠标移入提示
,labelMap:{
'customimage':'插入图片'
}
(3)绑定按钮点击事件
(a)打开ueditor.all.js文件或新建js文件
仿照 首行缩进 脚本绑定点击事件;
/**
* 缩进
* @command indent
* @method execCommand
* @param { String } cmd 命令字符串
* @example
* ```javascript
* editor.execCommand( 'indent' );
* ```
*/
UE.commands['indent'] = {
execCommand : function() {
var me = this,value = me.queryCommandState("indent") ? "0em" : (me.options.indentValue || '2em');
me.execCommand('Paragraph','p',{style:'text-indent:'+ value});
},
queryCommandState : function() {
var pN = domUtils.filterNodeList(this.selection.getStartElementPath(),'p h1 h2 h3 h4 h5 h6');
return pN && pN.style.textIndent && parseInt(pN.style.textIndent) ? 1 : 0;
} };
(b)js脚本执行
也可以在编辑器初始化页面,ueditor ready事件下,为此按钮绑定事件;
$("#edui74").on("click",function () {
///todo:脚本
})
其中edui74为按钮元素的id
2、修改原功能按钮图标为新图标
(1)打开themes/default/css/ueditor.css,在原样式下修改
以撤销功能按钮为例,行号大约535处,将如下样式修改成目标样式。
修改前:
.edui-default .edui-for-undo .edui-icon {
background-position: -160px 0;
}
修改后:
.edui-default .edui-for-undo .edui-icon {
/*background-position: -160px 0;*/
background-image: url("../images/customicons/ne_toolsicon2.png") !important;
background-repeat: no-repeat;
}
(2)按钮样式默认显示为B(加粗)的问题解决
.edui-default .edui-for-customimage .edui-icon { }
添加自定义按钮customimage默认为B(加粗)样式,路径下themes/default/images/icons.png有一张图片,打开此图就会明白,工具栏所有按钮图标均在此图中。每个按钮通过偏移量来定位按钮图标,增加新的按钮建议通过 background-image 属性定义样式。
添加了background-image属性发现有些情况下还是有问题,可以在background-image 属性添加 !important 来解决图标无效果,仍旧显示B(加粗)图标样式的问题。
三、其他一些样式微调
1.修改图标间距
.edui-default .edui-toolbar .edui-combox {
margin: 1px;/*图标间距不满意可以调整 */
}
2.修改正文与工具栏的距离
ue.addListener("ready", function () {
$("#ueditor_0").contents().find("body").css({ "padding-top": "5px" });//正文与工具栏间距
})
其中ue为实例化出来的UEditor变量
总结
本文简单介绍了通过更改UEditor源码来增加或修改功能按钮图标样式及编辑器一些样式微调的方法,有疏漏之处或有更好方法者,请不吝赐教。
富文本编辑器UEditor自定义工具栏(三、自定义工具栏功能按钮图标及工具栏样式简单修改)的更多相关文章
- thinkphp5.1中适配百度富文本编辑器ueditor
百度富文本编辑器ueditor虽然很老,但是功能齐全,我近期需要能批量粘贴图片的功能,但是找不到,很无奈.然后现在就分享一下如何把ueditor适配到thinkphp5.1,有知道如何批量上传图片的艾 ...
- 富文本编辑器UEditor自定义工具栏(一、基础配置与字体、背景色、行间距、超链接实现)
导读:UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,功能强大,可定制,是一款优秀的国产在线富文本编辑器,编辑器内可插入图片.音频.视频等. 一.UEditor自定义 ...
- 富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)
导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...
- 百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式 你可以去百度UEditor ...
- 富文本编辑器-Ueditor传值
前两天研究了一下富文本编辑器Ueditor的使用和配置,并且我们已经可以正常的在页面上编辑内容到富文本编辑器中,那么我们如何将输入的内容传到数据库中呢 ? Listen carefully. 首先介绍 ...
- 百度富文本编辑器ueditor使用总结
最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...
- 百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明
====================================================================== [百度Web富文本编辑器ueditor在ASP.NET M ...
- vue+富文本编辑器UEditor
vue+富文本编辑器UEditor 昨天的需求是把textarea换成富文本编辑器的形式, 网上找了几种富文本编辑器ueditor.tinymce等, 觉得ueditor实现双向绑定还挺有意思, 分享 ...
- 关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手
关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手 本人菜鸟一枚,最近公司有需求要用到富文本编辑器,我选择的是百度的ueditor富文本编辑器,闲话不多说,进入正 ...
随机推荐
- java--字符编码,正则表达式
转载请申明出处:http://blog.csdn.net/xmxkf day21 字符编码 06-IO流(转换流的字符编码) 字符编码: 1. 字符流的出现为了方便操作字符,更重要的是加入了编码转 ...
- 网络最短路径Dijkstra算法
最近在学习算法,看到有人写过的这样一个算法,我决定摘抄过来作为我的学习笔记: <span style="font-size:18px;">/* * File: shor ...
- obj-c编程07:异常处理
好了,到了相对轻松的话题,也是所有语言无可避免的话题:异常的处理. 我们知道对于一些常见的语言,"异常"是逃不开避不掉的主题:C中相对原始的signal或依赖系统异常支持(比如wi ...
- C#编译器优化那点事
使用C#编写程序,给最终用户的程序,是需要使用release配置的,而release配置和debug配置,有一个关键区别,就是release的编译器优化默认是启用的. 优化代码开关即optimize开 ...
- JQuery系统梳理
JQuery在前端网页开发中可以说是非常常用了,它所拥有的强大功能足以让我们完成各式各样的效果. 一.JQuery基础语法 1. 使用JQuery必须先导入jquery.x.x.x.js文件: 2. ...
- jvm比较详尽的内存结构
JVM内存结构 2012-09-17 15:27:59 分类: Java 本文转自:http://www.blogjava.net/nkjava/archive/2012/03/14/371831. ...
- ffmpeg 在windows 上编译
我在网上看到了一些资料,但是很多都不怎么全,而且 总会碰到这样或那样的问题,下面是我的一些经验,分享一下,当然也参考了大侠们的东西呵呵! 环境: OS:windows mingw +yasm+fmpe ...
- Google揭开Mesa的神秘面纱——一个具备跨地域复制和近实时特性的可伸缩数据仓库
http://www.infoq.com/cn/news/2014/08/google-data-warehouse-mesa Google发表了一篇新的论文,该论文描述了他们内部所使用的一个被称为M ...
- IOS Swift语言开发 tableView的重用以及自cell的自适应高度
http://www.aichengxu.com/iOS/11143168.htm 一.准备数据 (这是一个元组,第一个元素为英雄的名字;第二个元素为英雄头像图片的名字,格式为.PNG,如果为其他的格 ...
- Install OpenCV 3.0 and Python 2.7+ on OSX
http://www.pyimagesearch.com/2015/06/15/install-OpenCV-3-0-and-Python-2-7-on-osx/ As I mentioned las ...