百度UEditor编辑器!合入PHP网站!

一、富文本内容交互

1、编辑器内容初始化（即往编辑器中设置富文本）

场景一：写新文章，编辑器中预置提示、问候等内容。

在editor_config.js文件中找到initialContent参数，设置其值为需要的提示或者问候语即可，如initialContent:’欢迎使用UEditor!’。

场景二：编辑旧文章，从数据库中取出富文本放置到编辑器中。

显然，编辑文章时需要从后台数据库中取出大段富文本，如果仍然采用场景一中的方式去设置初始值的话，必然会带来诸如引号匹配被截断等问题，因此需要采用另外一种方式去设置，

此处采用了script标签作为编辑器容器对象，并设置了其类型是纯文本，从而在避免了标签内部JS代码执行的同时解决了部分同学在使用传统的textarea标签作为容器所带来的一次额外转码问题。

2、提交编辑器内容至后端

场景一：在编辑器所在的Form中存在提交按钮，提交动作由点击此按钮完成。

该场景适用于最普通的场合，没有太大问题需要注意，仅三点说明：

1) 默认情况下提交到后台的表单名称是“editorValue”，在editor_config.js中可以配置，参数名为textarea。

2) 可以在容器标签（即script标签）上设置name属性，以覆盖editor_config.js中的

场景二：编辑器所在的Form中不存在提交按钮，提交动作由外部事件触发。

该场景适用于站点前端交互较多的场合，需要注意的事项主要是在触发form提交动作之前

如果使用的是jquery validation可以参考如下代码

此处editor是编辑器实例对象。

场景三：编辑器不在任何Form中，提交动作由外部事件触发。

该场景使用不多，但特殊时候可能需要。UEditor也提供了对应的处理方案，基本逻辑跟场景二一样，只是在执行同步操作的时候需要传入提交form的id，如editor.sync(myFormID)即可。其他同场景二。

二、图片上传交互

1、传统图片上传

传统图片上传涉及到的前后端交互主要涉及“上传提交路径”以及“图片保存路径”两个参数，后台保存路径以任何形式（绝对或者相对）、在任何页面展示跟前台无关。

2、Flash图片上传

Flahs图片上传和传统图片上传存在一个很大的区别：它需要服务器端实时返回“图片保存路径”用于在前台的即时展示。具体到编辑器，就是需要将返回的路径插入到编辑器中。由此会引出除传统图片上传中提到的两个参数之外的第三个参数：“前后端修正路径”。如果后台返回的保存路径是绝对路径（指以http开头的路径，以根目录开始的路径也可勉强归入其中），那么前台无须做任何修正，否则用户必须十分清楚自己当前的目录结构并据此修正这个前后端相对路径之间的差异。因此，UEditor极力推荐由服务器端返回以根目录开始的相对路径。

3、UEditor中的上传实践及注意事项

在 UEditor中，“上传提交路径”和“前后端修正路径”的配置位于editor_config.js中。其中，imageUrl参数对应着“上传提交路径”，imagePath参数对应着“前后端修正路径”。而“图片保存路径”则需要在server/upload/php目录下的imageUp文件中配置。

路径配置完成之后，还需要配置imageFieldName参数作为文件表单的表单名，后台可以据

完成上述配置之后，理论上后台应该可以接收到前台上传的图片文件了。在正确保存之后，传统图片上传至此就结束了。但是，在使用Flash上传的编辑器中，流程还远未结束。

首先，后台需要计算得出图片文件存放的地址字符串。该字符串UEditor极力推荐使用从网站根目录开始算起，一直到图片名结束为止。如果不从网站根目录开始算起，后面需要考虑“前后端修正地址”参数。

其中，url对应计算出的图片保存地址——再强调一遍，尽量构造出从网站根目录开始的地址字符串；title对应flash中的描述字段，在图片上将会被设置到title属性中；state 对应服务器端返回的图片上传状态字符：除了上传成功返回“SUCCESS”之外，其他任何值都将被直接显示在返回的图片描述字段内。

最后，UEditor会在返回的url地址前面增加“前后端修整路径”这个参数值作为最后插入编辑器中的图片地址。因此，如果服务器端返回的是从根目录开始的图片路径或者http开头的绝对路径，“前后端修正路径”必须留空。

举例来讲，如果服务器返回的路径是“/myProject/uploads/sun.jpg”,那么插入到编辑器中的路径会是“前后端修正路径+ /myProject/uploads/sun.jpg”。

三、Word图片转存交互

1、图片转存原理

所谓word图片转存，是指UEditor为了解决用户从word中复制了一篇图文混排的文章粘贴到编辑器之后，word文章中的图片数据无法显示在编辑器中，也无法提交到服务器上的问题而开发的一个操作简便的图片转存方案。

该功能的基本操作步骤：复制word文档——》粘贴到编辑器——》编辑器会将所有图片转换成一个占位图，同时在工具栏中高亮转存按钮——》点击转存按钮弹出图片上传框——》点击复制按钮复制图片目录地址——》点击“添加照片”按钮，在弹出的选择框中粘贴刚复制的图片目录地址——》点击打开按钮，选择目录下的所有图片文件，在此点击打开——》执行图片上传——》上传成功确认插入，UEditor将自动完成对应占位图的替换过程。

2、配置要点及注意事项

word图片转存跟普通图片上传的配置基本一样，所不同的仅仅是操作上的差异：前者需要首先获取临时图片文件存在的目录，后者直接选择自己指定的文件目录。PS：在部分操作系统的部分版本word中发现单张word图片会生成两张临时图片，且格式不一，清晰度各异，目前暂时未发现改进方法。

四、远程图片抓取交互

1、远程抓取原理

图片远程抓取是指在插入本地域名之外的图片链接地址时，由服务器将这些外部图片抓取到本地服务器保存的一个功能。实现原理为在编辑器中向服务器发送包含所有外域图片地址的ajax请求，然后由服务器在后端抓取保存后返回图片地址给编辑器，再由编辑器完成外域地址和本地地址的替换工作。