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 = {
 //这里能够选择自己须要的工具button名称,此处仅选择例如以下四个
 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容器

<form action="" method="post" name="myForm">
<!--下面引入UEditor编辑器界面-->
<script type="text/plain" id="editor" name="myContent"></script>
 //此处不设置name，则editor默认名字为"editorValue"，能够在
//editor_config.js中配置參数textarea，或者在此处设置
<input type="submit" name="submit" value="upload"/>
</form>

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

假设须要有不同设置的ueditor，能够分别定义之后设置不同的自己定义选项再渲染编辑器，

<script type="text/plain" id="myEditor" style="800px"></script>
<script type="text/plain" id="myEditor1" style="800px"><p>这里我能够写一些输入提示</p>
</script>
<script type="text/javascript">
var editor_a = new baidu.editor.ui.Editor();
editor_a.render( 'myEditor' ); //此处的參数值为编辑器的id值
var editor_a1 = new baidu.editor.ui.Editor({
//这里能够选择自己须要的工具button名称,此处仅选择例如以下五个
toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']]
//很多其它其它參数，请參考editor_config.js中的配置项
});
editor_a1.render( 'myEditor1' );
</script>

6.前后台数据交互

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

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

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>UEditor</title>
<!--下面为引入UEditor资源部分-->
<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">
<!--以上为引入UEditor资源部分-->
</head>
<body>
<form action="test.php" method="post" name="myForm">
<!--下面引入UEditor编辑器界面-->
<script type="text/plain" id="myEditor" name="myContent">这是一个測试还是一个測试</script>
<input type="submit" name="submit" value="upload"/>
</form>
<script type="text/plain" id="myEditor1"><p>这里我能够写一些输入提示</p></script>
<script type="text/javascript">
    var editor_a = new baidu.editor.ui.Editor();
    editor_a.render( 'myEditor' ); //此处的參数值为编辑器的id值
    
    var editor_a1 = new baidu.editor.ui.Editor({
    //这里能够选择自己须要的工具button名称,此处仅选择例如以下五个
    toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']],
    //focus时自己主动清空初始化时的内容
    autoClearinitialContent:true,
    //很多其它其它參数，请參考editor_config.js中的配置项
});
    editor_a1.render( 'myEditor1' );
</script>
</body>
</html>