日期:2014-05-17  浏览次数:20623 次

HTML编辑器UEditor的简单使用

参考自:http://ueditor.baidu.com/website/document.html


关于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注释掉了所有可以省略的配置项,采用系统默认配置,若取消注释,则以该配置项为准;未注释的配置项要求用户必需按照项目实际填写。

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

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

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

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

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

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="UEditor/editor_config.js"></script>
<script type="text/javascript" src="UEditor/editor_all.js"></script>
<link rel="stylesheet" href="UEditor/themes/default/ueditor.css">

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