编辑“Ueditor/部署和体验”

{{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文件中，首先导入编辑器需要的三个入口文件，示例代码如下：
<pre><nowiki>
    <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>
</nowiki></pre>
需要注意的是，此处的editor_config.js最好先于editor_all.js加载，否则特定情况下可能会出现报错。

4、创建编辑器实例及其[[DOM]]容器。具体代码示例如下：
<pre><nowiki>
    <body>
    <div id="myEditor"></div>
    <script type="text/javascript">
    var editor = new baidu.editor.ui.Editor();
    editor.render("myEditor");
    </script>
    </body>
</nowiki></pre>    

若希望给编辑器赋初值，此处的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目录在您网站的相对路径

这就是我们最后需要配置的结果。至此，一个完整的编辑器实例就已经部署到咱们的项目中了！在[[浏览器]]中输入<nowiki>http://localhost/UETest运行下试试UE强大的功能吧！</nowiki> 

三、'''注意事项'''
插入表情后不能显示、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/",

实际上，由于图片保存页面和展示页面不在同一个目录，因此在对应页面中的相对路径../以及./所指代的实际路径是不一样的。如果采用了相对路径作为服务器端返回的地址，在展示页面是取不到正确路径的，此处的路径配置正是为了修正这种差异。当然，如果服务器端直接返回图片的绝对地址给客户端，那么就无需上述配置了。

==参考来源==
*http://ueditor.baidu.com/teach.html#touch

[[category:Ueditor|B]]
{{Ueditor使用手册导航}}