编辑“Ueditor/自定义配置”

{{Ueditor导航}}

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

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

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

*'''界面配置'''

1、工具栏配置

默认配置项中包含了编辑器的所有按钮，需要改变时，只要在初始化的时候传入对应参数即可。示例代码如下：
<pre><nowiki>
    var editor = new baidu.editor.ui.Editor({
        toolbars:[['Paragraph','RowSpacing','FontFamily','FontSize']]
    });
    editor.render("myEditor");
</nowiki></pre>                

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

2、初始化内容
实例化的时候可以使用<textarea id="editor">初始内容</textarea>来为编辑器赋初始值。以[[PHP]]为例的话，可以将“初始内容”替换成<?=$content?>来动态从服务器去获取。当有些地方不适合使用textarea作为编辑器容器时，比如上文采用div作为容器时，那如何来初始化内容：
<pre><nowiki>
    var editor = new baidu.editor.ui.Editor({
    initialContent: '<span style="color:#ccc">欢迎使用ueditor</span>'
    });
    editor.render("myEditor");
</nowiki></pre>            

3、初始化样式
由于编辑器的编辑框位于一个单独的iframe中，因此希望通过在编辑器实例化页面设置编辑框中的元素样式是行不通的。UEditor为大家提供了两种方式来改变编辑框中的元素样式：一种是通过修改initialStyle的内容来实现，另外一种是通过iframeCssUrl引用外部的[[CSS]]文件来实现。具体的代码例子如下：
<pre><nowiki>
    var editor = new baidu.editor.ui.Editor({
    initialStyle: 'body{margin:8px;font-family:"宋体";font-size:16px;}',
    iframeCssUrl: 'themes/default/iframe.css'
    });
    editor.render("myEditor");
</nowiki></pre>            

需要注意的是，如果同时配置了这两个参数，那么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提供了功能强大的黑白名单过滤机制，简单的几个配置就可以拦截任何不安全因素于编辑器之外。黑白名单可以同时使用，也可以单独分开使用。黑名单中的标签将会被编辑器完整地过滤掉，包括标签本身以及标签之内的任何内容。而不在白名单之中的那些[[标签]]则仅被过滤了标签本身，其内容会继续走过滤流程。

具体的黑白名单配置示例如下所示，其中$表示元素的属性： 
<pre><nowiki>
  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}}
        }
     }
  }()
</nowiki></pre>

3、表情本地化

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

==参考来源==
*http://ueditor.baidu.com/teach.html#touch

[[category:Ueditor|Z]]
{{Ueditor使用手册导航}}