UEditor除 了具有轻量、可定制等优点外,还始终将优化编辑操作、提升用户体验摆在了很重要的位置。在这一点上,除了对编辑器功能、性能、实现细节等不断地改进和追求 创新之外,众多灵活而人性化的自定义配置也充分地体现了这个特点,通过修改配置项的值,用户几乎可以完全地改变编辑器的外观和行为。

从配置本身的优先级来看,UEditor的配置可以分为系统默认配置和用户自定义配置两种类型。系统默认配置是指editor_config.js中的所有配置,而用户自定义配置则是指用户在实例化编辑器的时候传入的JSON格式的配置。用户自定义配置的优先级高于系统默认配置,若两者同名,则覆盖系统默认配置。若未提供对应的用户自定义配置,则采用系统默认配置。一般情况下,推荐用户在实例化的时候使用自定义配置来代替修改系统默认配置。

从配置对编辑器的作用来看,UEditor的配置又可以分为界面配置和功能配置两种类型。界面配置主要集中在工具栏配置和初始化配置上;功能配置由于相对较多,下文将筛选一些同学们容易迷惑的配置项来进行讲解,而其他简单的则只要参考具体配置项对应的注释即可。

  • 界面配置

1、工具栏配置

默认配置项中包含了编辑器的所有按钮,需要改变时,只要在初始化的时候传入对应参数即可。示例代码如下:

    var editor = new baidu.editor.ui.Editor({
toolbars:[['Paragraph','RowSpacing','FontFamily','FontSize']]
});
editor.render("myEditor");

这个时候的编辑就只有四个工具按钮了。关于工具栏的更多高级配置,比如改变布局结构,双栏和单栏混排等等

2、初始化内容 实例化的时候可以使用<textarea id="editor">初始内容</textarea>来为编辑器赋初始值。以PHP为例的话,可以将“初始内容”替换成<?=$content?>来动态从服务器去获取。当有些地方不适合使用textarea作为编辑器容器时,比如上文采用div作为容器时,那如何来初始化内容:

    var editor = new baidu.editor.ui.Editor({
initialContent: '<span style="color:#ccc">欢迎使用ueditor</span>'
});
editor.render("myEditor");

3、初始化样式 由于编辑器的编辑框位于一个单独的iframe中,因此希望通过在编辑器实例化页面设置编辑框中的元素样式是行不通的。UEditor为大家提供了两种方 式来改变编辑框中的元素样式:一种是通过修改initialStyle的内容来实现,另外一种是通过iframeCssUrl引用外部的CSS文件来实现。具体的代码例子如下:

    var editor = new baidu.editor.ui.Editor({
initialStyle: 'body{margin:8px;font-family:"宋体";font-size:16px;}',
iframeCssUrl: 'themes/default/iframe.css'
});
editor.render("myEditor");

需要注意的是,如果同时配置了这两个参数,那么initialStyle中的配置将优先于iframeCssUrl指向的CSS文件中的配置。另外,由于编辑器中的有些功能效果实现需要依赖于initialStyle中的默认配置,比如框选表格的蓝色背景效果,因此,一般情况下不建议用户删除默认配置项中的默认样式类,除非已经确认不需要对应的功能。

4、ElementPath

编辑框下部的path部分。不需要的同学设置elementPathEnabled : false即可。

5、字数统计

编辑框下部的字数统计部分。不需要的同学设置wordCount:false 即可。当设置开启时,还可以通过maximumWords参数来控制允许的最大字符数、wordCountMsg参数来控制需要显示的提示文字、 wordOverFlowMsg参数来控制超出最大字数限制时候的提示文字。

6、编辑器最小高度和自动长高

编辑器的最小高度由配置项minFrameHeight来确定,而autoHeightEnabled:true则让编辑器的编辑框部分可以随着编辑内容的增加而自动长高。

7、工具栏浮动

工具栏浮动是指当编辑框的顶部超出了浏览器顶部的时候,工具栏会一直浮动在浏览器的顶部,方便大家的编辑操作。在编辑框高度固定的编辑器实例页面中,建议关闭此项功能以获得最好的性能和体验:autoFloatEnabled: false

  • 功能配置

UEditor由于功能点较多,同时又希望能够带给用户更加灵活个性的编辑需求,因此在功能配置上显得有点令人眼花缭乱。不过对于大部分用户来说,维持默认配置是最佳的选择,实在有特殊需求时才考虑修改配置。 尽管配置较多,但是大部分配置都一目了然,基本不需要特别的解释。这里总结出同学们问的较多的一些配置项进行简单的讲解,其余配置请同学们自行查看editor_config.js文件中的对应注释即可。

1、提交表单的域名

将编辑器的容器置于一个form表单之中,后台如何获取编辑器中的内容呢?UEditor内部做了自动处理,无需用户诸如再创建一个隐藏表 单来放置编辑内容等操作,只需要在配置项中设置textarea : 'editorValue'即可,后台则可以直接通过$_POST['editorValue']或者 request.getParameter("editorValue")等方式来获取编辑器中的内容。

2、黑白名单 UEditor提供了功能强大的黑白名单过滤机制,简单的几个配置就可以拦截任何不安全因素于编辑器之外。黑白名单可以同时使用,也可以单独分开使用。黑名单中的标签将会被编辑器完整地过滤掉,包括标签本身以及标签之内的任何内容。而不在白名单之中的那些标签则仅被过滤了标签本身,其内容会继续走过滤流程。

具体的黑白名单配置示例如下所示,其中$表示元素的属性:

  serialize : function(){
return {
//黑名单,表示不允许任何style、script、link、object、applet和input标签
blackList: {style:1,script:1,link:1,object:1,applet:1,input:1},
//白名单
whiteList: {
//表示允许div标签,且其可包含p、span和br标签,style、class属性
div: {p:1,span:1,br:1,$:{style:1,class:1}},
//表示允许img标签,且只能包含href、title和alt属性
img: {$:{href:1,title:1,alt:1}}
}
}
}()

3、表情本地化

鉴于有些内网用户不能访问外网而导致的编辑器表情功能不可用,从1.1.7正式版开始,UEditor提供了表情本地化功能。更改配置 emotionLocalization:true 即可开启本地表情功能。当然,本地表情功能必须要确保dialogs/emotion/目录下存在官方提供的images文件夹及所有表情文件。

Ueditor/自定义配置的更多相关文章

  1. 富文本编辑器UEditor自定义工具栏(一、基础配置与字体、背景色、行间距、超链接实现)

    导读:UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,功能强大,可定制,是一款优秀的国产在线富文本编辑器,编辑器内可插入图片.音频.视频等. 一.UEditor自定义 ...

  2. 百度富文本编辑器UEditor安装配置全过程

    网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式     你可以去百度UEditor ...

  3. Ueditor自定义默认宽度高度

    如题. 最近需要使用到网页后台富文本编辑器.经过同学推荐,最后决定使用百度家的Ueditor. 官方地址:http://ueditor.baidu.com/website/ 贴吧地址:ueditor讨 ...

  4. 富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)

    导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...

  5. 富文本编辑器UEditor自定义工具栏(三、自定义工具栏功能按钮图标及工具栏样式简单修改)

    导读 富文本编辑器UEditor提供丰富了定制配置项,如果想设置个性化的工具栏按钮图标有无办法呢?答案是肯定的!前两篇博文简要介绍了通过将原工具栏隐藏,在自定义的外部按钮上,调用UEditor各命令实 ...

  6. UEditor自定义toolbar工具条

    使用ueditor的同学都知道,ueditor里有很多功能,很全面,但有时候我们的编辑器不需要太多的功能,比如前台评论或者留言,就不需要这么多功能了,那我们怎么去定制自己想要的工具呢?官方给出了两个方 ...

  7. ASP.NET 5 入门 (2) – 自定义配置

    ASP.NET 5 入门 (2) – 自定义配置 ASP.NET 5 理解和入门 建立和开发ASP.NET 5 项目 初步理解ASP.NET5的配置 正如我的第一篇文章ASP.NET 5 (vNext ...

  8. 基于Spring的可扩展Schema进行开发自定义配置标签支持

    一.背景 最近和朋友一起想开发一个类似alibaba dubbo的功能的工具,其中就用到了基于Spring的可扩展Schema进行开发自定义配置标签支持,通过上网查资料自己写了一个demo.今天在这里 ...

  9. C#创建自定义配置节

    在.Net应用程序中,我们经常看到VS为我们生成的项目工程中都会含有nfig或者nfig这样的文件.这个文件就是我们所说的应用程序配置文件.在这个文件里面记述着一些与我们的应用程序相关的信息,如:数据 ...

随机推荐

  1. P3391 文艺平衡树

    hh 题目描述 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:翻转一个区间,例如原有序序列是5 4 3 2 1,翻转区间是[2,4]的话,结果是5 2 3 4 1 ...

  2. python进阶03

    进程线程不管哪门语言都是一块可以被重视的方向,下面一起学习学习python中的进程,线程 1.进程线程区别 通俗解释:一个程序QQ的运行就是一个进程运行:QQ中打开多个页面互不影响可以同时操作的每个页 ...

  3. 单选框radio 选择问题

    <input type="radio"  name="test"/> <input type="radio"  name= ...

  4. wareshark网络协议分析之ARP

    一.ARP协议简介 简单的说ARP协议就是实现ip地址到物理地址的映射.当一台主机把以太网数据帧发送到位于同一局域网上的另一台主机时,是根据48bit的以太网地址(物理地址)来确定网络接口的. ARP ...

  5. codeforces707A:Brain's Photos

    Description Small, but very brave, mouse Brain was not accepted to summer school of young villains. ...

  6. vlan 配置

    在RedHat上配置vlan: ~]$ modinfo 8021q在ethX接口上配置vlan逻辑子接口: DEVICE=ethX. BOOTPROTO=none ONBOOT=yes IPADDR= ...

  7. 安装rackspace private cloud --2 overview

    Target hosts 包含以下 network bridges: LXC internal lxcbr0: 必须的,自动生成,containers的外网连接,不连接到host上任何物理/逻辑接口, ...

  8. review20

    Pattern与Matcher类 模式匹配就是检索和指定模式匹配的字符串.java提供了专门用来进行模式匹配的Pattern类和Matcher类,这些类在java.util.regex包中. 模式对象 ...

  9. iTunes 12恢复.ipsw固件

    恢复.ipsw步骤: 1. 下载好与移动设备对应的.ipsw固件(zip文件可以解压出来). 2. 将移动设备连接到安装有iTunes的电脑,解锁并信任这台电脑 3. 启动iTunes,选择这个移动设 ...

  10. nginx基本参数详解

    运行用户 user nobody; 启动进程,通常设置成和cpu的数量相等 worker_processes 1; 全局错误日志及PID文件 error_log logs/error.log; err ...