ueditor完整版配置

一、官网上下载完整源码包，解压到任意目录，解压后的源码目录结构如下所示：

    _examples：编辑器完整版的示例页面

    _demos：编辑器的各种使用案例

    dialogs：弹出对话框对应的资源和JS文件

    themes：样式图片和样式文件

    server：涉及到服务器端操作的PHP、JSP等文件

    third-party：第三方插件

    editor_all.js：_src目录下所有文件的打包文件

    editor_all_min.js：editor_all.js文件的压缩版，建议在正式部署时才采用

    editor_config.js：编辑器的配置文件，建议和编辑器实例化页面置于同一目录

二、部署UEditor到实际项目（UETest）中的步骤:

            图表 1

第一步：在项目的任一文件夹中建立一个用于存放UEditor相关资源和文件的目录，此处在项目根目录下建立，起名为ueditor。

 

第二步：拷贝源码包中的dialogs、themes、third-party、editor_all.js和editor_config.js到ueditor文夹中。其中，除了ueditor目录之外的其余文件均为具体项目文件，此处所列仅供示例。

第三步：为简单起见，此处将以根目录下的index.php页面作为编辑器的实例化页面，用来展示UEditor的完整版效果。在index.php文件中，首先导入编辑器需要的三个入口文件，示例代码如下：

1 2 3 4 5 6

DE><DE>DE>HEADDE>DE>>  DE> DE>   DE>  DE>   DE>  DE><DE>DE>SCRIPTDE> DE>typeDE>DE>=DE>DE>textDE>DE>/javascript DE>DE>srcDE>DE>=DE>DE>"ueditor/editor_config.js"DE>DE>></DE>DE>SCRIPTDE>DE>>  DE> DE><DE>DE>SCRIPTDE> DE>typeDE>DE>=DE>DE>textDE>DE>/javascript DE>DE>srcDE>DE>=DE>DE>"ueditor/editor_all.js"DE>DE>></DE>DE>SCRIPTDE>DE>>  DE> DE><DE>DE>LINKDE> DE>relDE>DE>=DE>DE>stylesheetDE> DE>hrefDE>DE>=DE>DE>"ueditor/themes/default/ueditor.css"DE>DE>>DE>

第四步：然后在index.php文件中创建编辑器实例及其DOM容器。具体代码示例如下：

1 2 3 4 5 6

DE>   DE>  DE><DE>DE>DIVDE> DE>idDE>DE>=DE>DE>myEditorDE>DE>></DE>DE>DIVDE>DE>>  DE> DE><DE>DE>SCRIPTDE> DE>typeDE>DE>=DE>DE>textDE>DE>/javascript>  DE> DE>    DE>DE>var editor = new baidu.editor.ui.Editor();  DE> DE>    DE>DE>editor.render("myEditor");  DE> DE></DE>DE>SCRIPTDE>DE>>DE>

最后一步： 在/UETest/ueditor/ editor_config.js中查找URL变量配置编辑器在你项目中的路径。

1 2	DE> //强烈推荐以这种方式进行绝对路径配置  DE> DE>URL= window.UEDITOR_HOME_URL||DE>DE>"/UETest/ueditor/"DE>DE>;DE>

至此，一个完整的编辑器实例就已经部署到咱们的项目中了！在浏览器中输入http://localhost/UETest 运行下试试UE强大的功能吧！ 

三、注意事项

1.在引用editor_config.js时，最好先于editor_all.js加载，否则特定情况下可能会出现报错。

 

2.若希望给编辑器赋初值，请将上面描述index.php的div换成初始内容

3. 需要注意的是编辑器资源文件根路径。它所表示的含义是：以编辑器实例化页面为当前路径，指向编辑器资源文件（即dialog等文件夹）的路径。鉴于很多同学在使用编辑器的时候出现的种种路径问题，此处强烈建议大家使用"相对于网站根目录的相对路径"进行配置。"相对于网站根目录的相对路径"也就是以斜杠开头的形如"/UETest/ueditor/"这样的路径。

此外如果你使用的是相对路径,例如"ueditor/"(相对于图表1路径结构)

如果站点中有多个不在同一层级的页面需要实例化编辑器，且引用了同一UEditor的时候，可能不适用于每个页面的编辑器。因此，UEditor提供了针对不同页面的编辑器可单独配置的根路径，具体来说，在需要实例化编辑器的页面最顶部写上如下代码即可。

当然，需要令此处的URL等于对应的配置。window.UEDITOR_HOME_URL ="/xxxx/xxxx/";

 

 

自定义配置

2012-07-17 14:02:32

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

从配置本身的优先级来看，UEditor的配置可以分为系统默认配置和用户自定义配置两种类型。

系统默认配置分散在各个对应的核心或者插件文件之中，对用户不可见。当用户注释掉自定义配置时起作用。

用户自定义配置包括两种类型，一种位于editor_config.js文件之中，优先级高于系统默认配置；另一种位于实例化编辑器时传入的参数中，优先级最高。

默认情况下，UEditor在editor_congfig.js注释掉了所有可以省略的配置项，采用系统默认配置，若取消注释，则以该配置项为准；未注释的配置项要求用户必需按照项目实际填写。

下面将筛选部分容易出错或者复杂的配置项进行系统讲解：

URL: 指向编辑器文件所在的目录路径，推荐使用以“/”开头的相对于服务器根目录的路径。

例子1：目录结构：~/www/project1/ueditor/, ~/www/为服务器根目录，则对应的URL为：

1	DE> varDE> DE>URL = DE>DE>"/project1/ueditor/"DE>DE>;DE>

例子2：目录结构:：~/www/project2/third/ueditor/，对应的URL为：

1	DE> varDE> DE>URL = DE>DE>"/project2/third/ueditor/"DE>DE>;DE>

toolbars：工具栏按钮，一个嵌套的数组结构。如需让工具栏多行显示，将内层数组分拆成多个即可。

例子1：单行显示工具栏（也可以称为自然换行，也即只有超出工具栏长度之后才会自动换行）:

1	DE>toolbars:[[DE>DE>"bold"DE>DE>,DE>DE>"italic"DE>DE>,DE>DE>"undo"DE>DE>,DE>DE>"redo"DE>DE>]]DE>

例子2：三行显示工具栏（强制多行显示）：

1	DE>toolbars:[[DE>DE>"bold"DE>DE>,DE>DE>"italic"DE>DE>],[DE>DE>"undo"DE>DE>,DE>DE>"redo"DE>DE>],[DE>DE>"insertimage"DE>DE>]]DE>

initialContent|autoClearinitialContent|focus：这三个参数分别表示的涵义：编辑器初始化后的提示内容；编辑器第一次聚焦后是否自动清空初始化时的提示内容；编辑器初始化后光标是否自动聚焦到编辑器。

这三个参数之间有一定的联系：第一个为第二个提供内容，第二个和第三个存在冲突，也即如果选择了自动清空，那么自动聚焦就不应该选择，否则提示内容将不可见。

zIndex：编辑器基准层级，所有对话框、弹出层的层级均位于该配置值之上。

contextMenu：UEditor自定义的右键菜单。配置示例：

1 2 3 4 5 6 7 8 9 10

DE> contextMenu:[ DE> DE>    DE>DE>{ DE> DE>        DE>DE>labelDE>DE>:DE>DE>'显示的名字'DE>DE>, DE> DE>        DE>DE>cmdName:DE>DE>'执行的command命令，当点击这个右键菜单时'DE>DE>, DE> DE>        DE>DE>//exec可选，有了exec就会在点击时执行这个function, DE> DE>        DE>DE>exec:DE>DE>functionDE> DE> () { DE> DE>            DE>DE>//点击时执行的代码 DE> DE>        DE>DE>} DE> DE>    DE>DE>} DE> DE> ]DE>

若需要关闭自定义右键，则设置contextMenu:[]即可。

textarea：后台用于接收编辑器中提交内容的表单名称，默认为editorValue。

UEditor在数据提交时无需额外将富文本内容放置到某个隐藏表单项后发往服务器的处理，仅需将其作为一个普通的表单项，在提交时后台通过textarea中配置的对应表单名称来获取富文本内容即可。细节请参看教程中的“前后端数据交互”章节。

minFrameHeight：编辑器最小高度，即在无内容时编辑器的原始高度。UEditor只提供了高度配置，宽度的配置需要通过设定外部容器的宽度来实现。

readonly：初始化后编辑器是否处于可编辑器状态。该配置用于某些要求编辑器在初始化完成时不可编辑，只有在触发特定事件之后才能进行操作的场景。与此配套，编辑器在实例下提供了2个动态修改的接口setDisabled和setEnabled用于切换这两种状态。

serialize: 黑白名单配置。UEditor针对进入编辑器的富文本内容提供了节点级别的过滤，可以通过该配置的修改来达到控制富文本内容的目的。下面将针对具体的代码来说明如何配置该功能：

1 2 3 4 5 6 7 8 9 10

DE> serialize : { DE> DE>    DE>DE>//黑名单，编辑器会过滤掉以下标签 DE> DE>    DE>DE>blackList:{style:DE>DE>1DE>DE>, link:DE>DE>1DE>DE>,object:DE>DE>1DE>DE>, input:DE>DE>1DE>DE>, meta:DE>DE>1DE>DE>}, DE> DE>    DE>DE>//白名单，编辑器会根据此配置保留对应标签下的对应标签或者属性 DE> DE>    DE>DE>whiteList:{  DE> DE>        DE>DE>'p'DE>DE>: {DE>DE>'br'DE>DE>:DE>DE>1DE>DE>,DE>DE>'BR'DE>DE>:DE>DE>1DE>DE>}, DE> DE>        DE>DE>'br'DE>DE>:{DE>DE>'$'DE>DE>:{}}, DE> DE>        DE>DE>'div'DE>DE>:{DE>DE>'br'DE>DE>:DE>DE>1DE>DE>,DE>DE>'BR'DE>DE>:DE>DE>1DE>DE>,DE>DE>'$'DE>DE>:{DE>DE>'id'DE>DE>:DE>DE>1DE>DE>,DE>DE>'style'DE>DE>:DE>DE>1DE>DE>}} DE> DE>    DE>DE>} DE> DE> }DE>

该配置中，blackList黑名单中不允许编辑器中出现style，link等标签，任何外部粘贴进来的数据如果包含这些节点（包括其子节点），都会被编辑器过滤掉。而白名单中的配置则表示允许对应标签中存在对应的属性或者子节点，以div为例，该配置允许外部粘贴的div标签中包含br节点，且可以允许id属性以及style属性。至于br标签内部允许不允许其他内容，则有br标签对应的配置来决定，如例子所示的话，则br标签不允许任何自己点或者属性存在。

需要说明的是，此处的配置仅针对非纯文本粘贴模式时有效，如用户开启了纯文本模式，则需要手动修改paste.js中对应的黑白名单配置。由于该模式使用较少，所以未对外提供配置项。