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。
2、拷贝源码包中的dialogs、themes、third-party、editor_all.js和editor_config.js到ueditor文夹中。理论上，前端的所有文件除了编辑器实例化页面外此刻已经全部具备，此处为了体验图片上传等功能，将server文件夹一并拷贝到ueditor目录中。整体的项目结构如右图所示。其中，除了ueditor目录之外的其余文件均为具体项目文件，此处所列仅供示例。
3、为简单起见，此处将以根目录下的index.php页面作为编辑器的实例化页面，用来展示UEditor的完整版效果。在index.php文件中，首先导入编辑器需要的三个入口文件，示例代码如下：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>编辑器完整版实例</title>
<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"/>
</head>
需要注意的是，此处的editor_config.js最好先于editor_all.js加载，否则特定情况下可能会出现报错。
4、创建编辑器实例及其DOM容器。具体代码示例如下：
<body>
<div id="myEditor"></div>
<script type="text/javascript">
var editor = new baidu.editor.ui.Editor();
editor.render("myEditor");
</script>
</body>
若希望给编辑器赋初值，此处的div可换成<script type="text/plain" id="myEditor">初始内容</script>来设置初始内容，编辑器自动完成两者之间的转换，完全不会影响最后的显示效果。
5、到此为止，编辑器所需的所有资源文件、代码、实例化操作、显示容器等等都已经准备完成。
还剩下最后一个操作——配置编辑器资源路径，也就是让编辑器中的代码能够正确找到对应的dialog、css、表情等资源文件。这里需要配置的是ueditor目录在当前网站中的相对路径。在正式开始配置之前首先需要弄明白一个关于相对路径的知识点：如果文件1被文件2导入，那么当在文件1中去获取其他文件的路径时，需要以文件2所处的相对路径作为当前路径，而并非是文件1自身所在的路径。
对应到当前的项目实例，editor_config.js被index.php导入，那么此时的editor_config.js实际上处于与index.php同级的目录结构中。于是，在editor_config.js中所配置的所有相对路径都需要以index.php所在的目录（此处是根目录）为基准。清楚了这点，ueditor目录的相对路径就一目了然了！
var URL= "./ueditor/"; //这里你可以配置成ueditor目录在您网站的相对路径
这就是我们最后需要配置的结果。至此，一个完整的编辑器实例就已经部署到咱们的项目中了！在浏览器中输入http://localhost/UETest运行下试试UE强大的功能吧！
三、注意事项 插入表情后不能显示、dialog对话框找不到、 iframe.css加载不了等等问题，基本上全部都是editor_config.js文件中的URL参数配置不正确导致的。URL参数的实质是编辑器指向dialogs、themes、third-party等资源文件夹所在的目录的指针，如果弄明白了这点的话，那不管在什么地方实例化编辑器，我们都可以很容易地配置出正确的路径来。举个比较纠结点的例子：现有UETest/admin/manager/user/list/目录下的add_user.php文件需要实例化一个编辑器，该页面同样引用的是ueditor目录下的editor_config.js文件。那么此时的URL参数该是什么呢？显然，editor_config.js文件仍然处于和add_user.php文件一个级别的目录上，从这个目录到ueditor目录需要返回四层到达UETest目录，因此，这个时候的URL = "../../../../ueditor/"。
配置项中有关于上传图片路径的配置：
imagePath : URL + "server/upload/",
实际上，由于图片保存页面和展示页面不在同一个目录，因此在对应页面中的相对路径../以及./所指代的实际路径是不一样的。如果采用了相对路径作为服务器端返回的地址，在展示页面是取不到正确路径的，此处的路径配置正是为了修正这种差异。当然，如果服务器端直接返回图片的绝对地址给客户端，那么就无需上述配置了。
参考来源[ ]
Ueditor使用手册导航 | ||||||
|---|---|---|---|---|---|---|
|
|