关于html编辑器，试过fckeditor，升级版的ckeditor，还有tinymce，最近在尝试使用百度的ueditor。对比一下还是觉得ueditor的配置较简单，上手快并且文档和例子也很齐全。那么这里以ueditor1.2.3.0php版本utf-8版为例梳理一下ueditor的使用流程。

        1.首先是UEditor的文档结构

_examples：编辑器各种版本的示例页面

_src：JS文件

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

lang：语言包文件

PHP：文件上传处理，远程图片抓取，图片在线管理，屏幕截图相关文件

themes：样式图片和样式文件

third-party：第三方插件

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

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

editor_config.js：编辑器的配置文件

2.系统配置

UEditor的配置可以分为系统默认配置和用户自定义配置两种类型。系统默认配置分散在各个对应的核心或者插件文件之中，对用户不可见。当用户注释掉自定义配置时起作用。用户自定义配置包括两种类型，一种位于editor_config.js文件之中，优先级高于系统默认配置；另一种位于实例化编辑器时传入的参数中，优先级最高。默认情况下，UEditor在editor_congfig.js注释掉了所有可以省略的配置项，采用系统默认配置，若取消注释，则以该配置项为准；未注释的配置项要求用户必需按照项目实际填写。

以下是自己定义的一个简单配置：

<ｓｃｒｉｐｔ type="text/javascript">// 自定义的编辑器配置项,此处定义的配置项将覆盖editor_config.js中的同名配置var editorOption = {//这里可以选择自己需要的工具按钮名称,此处仅选择如下四个toolbars:[['FullScreen', 'Source', 'Undo', 'Redo']]//更多其他参数，请参考editor_config.js中的配置项};

其中最重要的配置是第28行关于URL参数的配置，关系到图片上传，处理等路径，需要配置为uediotr在网站的相对路径或者绝对路径。如我的项目名称为t，根目录为www，则URL的值设置如下：

URL = window.UEDITOR_HOME_URL||"/t/UEditor/";

3.引入配置文件，JS文件和主题CSS文件

<ｓｃｒｉｐｔ type="text/javascript" src="UEditor/editor_config.js"><ｓｃｒｉｐｔ type="text/javascript" src="UEditor/editor_all.js">

4.创建编辑器实例及其DOM容器

立即学习“前端免费学习笔记（深入）”；

<ｓｃｒｉｐｔ type="text/plain" id="editor" name="myContent"> //此处不设置name，则editor默认名字为"editorvalue"，可以在 //editor_config.js中配置参数textarea，或者在此处设置

5.设置选项并且渲染编辑器

如果需要有不同设置的ueditor，可以分别定义之后设置不同的自定义选项再渲染编辑器，

<ｓｃｒｉｐｔ type="text/plain" id="myEditor" style="width:800px"><ｓｃｒｉｐｔ type="text/plain" id="myEditor1" style="width:800px">
这里我可以写一些输入提示
<ｓｃｒｉｐｔ type="text/javascript">var editor_a = new baidu.editor.ui.Editor();editor_a.render( 'myEditor' ); //此处的参数值为编辑器的id值var editor_a1 = new baidu.editor.ui.Editor({//这里可以选择自己需要的工具按钮名称,此处仅选择如下五个toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']],//focus时自动清空初始化时的内容//更多其他参数，请参考editor_config.js中的配置项});editor_a1.render( 'myEditor1' );

6.前后台数据交互

对于PHP可以直接用$_POST['ueditorName']获取编辑器的值，其中ueditorName的值为初始化编辑器时ueditor的name值。

以下为完整的渲染2个ueditor的代码

<ｓｃｒｉｐｔ type="text/javascript" src="UEditor/editor_config.js"><ｓｃｒｉｐｔ type="text/javascript" src="UEditor/editor_all.js">
<ｓｃｒｉｐｔ type="text/plain" id="myEditor" name="myContent">这是一个测试还是一个测试
<ｓｃｒｉｐｔ type="text/plain" id="myEditor1">
这里我可以写一些输入提示
<ｓｃｒｉｐｔ type="text/javascript">    var editor_a = new baidu.editor.ui.Editor();    editor_a.render( 'myEditor' ); //此处的参数值为编辑器的id值        var editor_a1 = new baidu.editor.ui.Editor({    //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个    toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']],    //focus时自动清空初始化时的内容    autoClearinitialContent:true,    //更多其他参数，请参考editor_config.js中的配置项});    editor_a1.render( 'myEditor1' );
【相关推荐】
1. 免费html在线视频教程
2. html开发手册
3. php.cn原创html5视频教程