编辑“Ueditor/前后端数据整合”

{{Ueditor导航}}

*'''前后端数据交互'''
前后端的数据交互主要可分为数据提交和数据获取（从[[服务器]]）两种类型。

对于数据提交，UEditor为了优化用户的部署体验，特别针对数据提交做了特殊处理，用户不需要创建隐藏表单之类的元素来暂存编辑器值，而只需要在[[编辑器]]容器外围套上一层FORM标签，然后在配置项中设定一个名为textarea的值即可。具体代码示例如下：
<pre><nowiki>
   <form id="myForm" action="getContent.php" method="post">
    <script type="text/plain" id="myEditor">这里可以填写一些初始化内容</script>
    <input type="submit" value="Form内部提交数据" />
   </form>
   <script type="text/javascript">
    var editor = new baidu.editor.ui.Editor({
        textarea:'myValue'
    });
    editor.render("myEditor");
   </script>
</nowiki></pre>    

完成上面两步之后，后台的getContent.php文件就能够通过$_POST['myValue']或则request.getParameter("myValue")来获取编辑器中的内容了。 

当然，在很多情况下我们可能不会直接在FORM中添加一个submit提交按钮，而是通过外部的事件或程序来触发FORM的submit()方法。这个时候大家可能会发现后台取不到数据了！原因是外部事件或者程序中触发的submit方法调用无法进一步触发UEditor为方便大家提交数据所做的特殊处理函数，从而导致了数据提交的失败。

因此，如果不是由FORM内部submit按钮提交的任何其他数据提交方式，都必须在执行submit()方法之前执行一遍editor.sync()方法！只有这样，才能保证后端正确接收到编辑器中的所有内容。代码示例如下：
<pre><nowiki>
  if(editor.hasContents()){  //提交条件满足时提交内容
    editor.sync();           //此处的editor是页面实例化出来的编辑器对象
    document.getElementById('myForm').submit();
  }
</nowiki></pre>    

服务器端获取到编辑器中的内容之后，一般需要对获取到的内容进行过滤和转义之后再存入到[[数据库]]中。以[[PHP]]为例，在获取到编辑器中的初始值$editorValue之后，一般要经过stripslashes($editorValue)（如果服务开启了反斜杠功能的话，需要这步处理，否则略过。）、htmlspecialchars（$editorValue）等操作后再存入数据库。
 
同样的道理，当我们需要从数据库中取出数据显示在页面上或者编辑器内重新编辑时，由于此时的数据是经过转义的，所以必须重新进行一次相反的转义过程。以PHP页面中取出数据库中的文章内容显示到编辑器内为例，可以分两种方式来重新赋值： 

第一种方式是将取出的内容放置到编辑器容器标签内，示例代码如下：
<pre><nowiki>
    <form action="getContent.php" method="post" id="form">
        <script type="text/plain" id="myEditor">
            <?php htmlspecialchars_decode(getContentFromMysql())?>
        </script>
    </form>
</nowiki></pre>                

第二种方式是使用编辑器提供的方法setContent(str)来赋值，示例代码如下：
<pre><nowiki>
    <form action="getContent.php" method="post" id="form">
        <script type="text/plain" id="myEditor"></script>
    </form>
    <script type="text/javascript">
        var editor = new baidu.editor.ui.Editor({textarea:'myValue'});
        editor.render("myEditor");
    </script>
    <?php
        $content = htmlspecialchars_decode(getContentFromMysql());
        echo "<script>editor.setContent('".$content."')</script>";
    ?>
</nowiki></pre>                

需要注意的是，此处的echo语句必须在页面已经完成了编辑器的初始化之后才能调用，否则会出现JS代码报错。因此一般推荐使用第一种方式来初始化从服务器返回的文档内容。

*'''图片上传'''
UEditor的图片上传采用了Flash上传的方式，在功能上支持批量、本地预览和实时进度提示，在界面上支持自定义背景、上传按钮和预览框等视觉元素的样式属性，基本能够满足各种用户的不同上传需求。

由于涉及到了后端开发语言、[[flash]]、[[js]]和[[html]]等各种不同的[[web]]元素，图片上传这块的配置和使用相对来说稍显复杂，不过只要同学们认真看完以下的内容，那一切都不是什么问题了。下面我们仍然以上文中的完整版实例来一步一步完成这个过程。

先来回顾一下完整版部署章节中提到的项目目录结构，如下左图所示。为了更加符合一般网站的具体实际，也为了更清晰地展示整体的路径配置流程，我们先对这个目录做一下小的改动：将ueditor目录下的server文件夹提取出来放置到根目录中的admin文件夹下。调整后的目录结构如下图所示
 
[[文件:UEditor_1.png|center]]

首先来看前端部分的文件及其配置。打开dialogs/image文件夹，我们可以发现四个文件：

#callback.js：本上传模块支持的所有回调函数，同学们可以按需选用其中的内容。对于不需要做二次开发的同学来说，可以放心地直接删除。
#image.html：图片上传对话框的主体文件。前端的配置和修改基本在此处完成。
#imageUploader.swf：Flash上传文件。
#tangram.js：[[百度]]前端框架tangram封装的flash操作模块。一般无需修改。

打开image.html文件，找到baidu.swf.create()方法，有关图片上传的大部分配置都在这里进行。这其中的绝大部分参数相信同学们对着注释都能很容易明白意思，下面将挑选几个需要稍微解释的参数进行讲解：

首先是backgroundUrl、listBackgroundUrl和buttonUrl这三个参数。UEditor为了让上传flash的界面能够满足各种不同的网站风格，预留出了这三个参数让同学们可以自己定义上传框的背景、图片预览框的背景和上传按钮的背景，默认留空情况下就是同学们看到的样式。

其次是compressLength参数。这个参数规定了上传图片的最大边长，无论是宽或者高，只要有一个超过该值，就会以该值为基准进行等比缩放。此处的值设置是通过读取配置文件中的maxImageSideLength值来进行，嫌麻烦的同学可以直接设置数值即可。

第三个是url参数。这个参数设置了图片上传后台处理程序的路径。以当前项目示例来说，此处的url值应该是“../../../admin/server/upload/up.php”。

最后一个需要要介绍的参数是fileType。它在前端限定了文件选择框中能够显示的文件类型，如果需要上传其他非图片格式的文件，同学们只要修改对应的扩展名即可。 

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

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