Ueditor配置介绍分析和总结.docxVIP

PAGE

PAGE4/22

Ueditor

Ueditor|针对普通使用者|针对二次开发者|若干专题教程|相关问题

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

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

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

界面配置

1、工具栏配置

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

vareditor=newbaidu.editor.ui.Editor({toolbars:[[Paragraph,RowSpacing,FontFamily,FontSize]]

});

editor.render(myEditor);

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

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

vareditor=newbaidu.editor.ui.Editor({

initialContent:spanstyle=color:#ccc欢迎使用ueditor/span

});

editor.render(myEditor);

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

vareditor=newbaidu.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、工具栏浮动

工具栏浮动是指当编辑框的顶部超出了浏览器顶部的时候，工具栏会一直浮动在浏览器的顶部，方便大家的编辑操作。在编辑框高度固定的编辑器实例页面中，