php网页抓取图片(富文本内容交互(12345367))

　　php网页抓取图片(富文本内容交互(12345367))

　　一、富文本内容交互

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

　　场景一：在编辑器中写一个新的文章，预设提示、问候等。

　　在 editor_config.js 文件中找到 initialContent 参数，并将其值设置为所需的提示或问候语，例如 initialContent: 'Welcome to UEditor!'。

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

　　显然，在编辑文章时，需要从后台数据库中提取一大段富文本。如果初始值还是采用场景一的方式设置，必然会带来引号被截断等问题，所以需要使用另一种方式来设置，如下代码所示：

　　1

　　2

　　3

　　这里使用script标签作为编辑器容器对象，其类型设置为纯文本，避免了标签内部JS代码的执行，解决了部分同学使用传统的textarea标签作为容器带来的额外问题. 转码问题。

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

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

　　这个场景适合最常见的场合。没有太多需要注意的问题。只需要说明三点：

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

　　2)可以在容器标签（即脚本标签）上设置name属性来覆盖editor_config.js中的默认配置。示例代码如下，其中 myContent 将是新的提交表单名称：

　　1

　　2

　　3

　　4

　　5

　　3）后端接收程序可以通过以下方式获取编辑器中的富文本内容。

　　1

　　2

　　3

　　4

　　5

　　6

　　7

　　8

　　9

　　10

　　11

　　//PHP 获取：

　　$_POST["我的内容"]

　　//JSP 获取：

　　request.getParameter("myContent");

　　//ASP 获取：

　　请求（“我的内容”）；

　　//网络获取：

　　context.Request.Form["myContent"];

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

　　该场景适用于网站前端交互较多的场合。主要需要注意的是，编辑器内容同步操作是在表单提交动作触发之前进行的。通用代码模式如下所示：

　　1

　　2

　　3

　　4

　　5

　　//同步内容，满足提交条件时提交，这里的editor就是编辑器实例

　　if(editor.hasContent()){//这里以非空为例

　　editor.sync();//同步内容

　　someForm.submit();//提交表单

　　}

　　这里的 editor 是编辑器实例对象。

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

　　这个场景用的不多，但在特殊场合可能需要用到。UEditor 也提供了相应的处理方案。基本逻辑和第二种场景一样，只是在进行同步操作的时候需要传入提交表单的id，比如editor.sync(myFormID)。其他相同的场景 2。

　　二、图片上传交互

　　1、传统图片上传

　　传统图片上传所涉及的前后端交互主要涉及“上传提交路径”和“图片存储路径”两个参数。后台存储路径为任何形式（绝对或相对），在任何页面上显示与前台无关。

　　2、Flash图片上传

　　Flahs图片上传与传统图片上传有一个很大的区别：它需要服务器实时返回“图片保存路径”，以便在前台即时显示。具体到编辑器，需要将返回的路径插入到编辑器中。这会导致除了传统图片上传中提到的两个参数之外，还有第三个参数：“前后端校正路径”。如果后台返回的保存路径是绝对路径（指以http开头的路径，根目录开头的路径也可以收录在其中），那么前台不需要做任何修正，否则用户必须非常清楚自己当前的目录结构，并根据这修正了前后端相对路径的差异。因此，UEditor 强烈建议服务器端返回以根目录开头的相对路径。

　　3、UEditor中上传的做法和注意事项

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

　　路径配置完成后，还需要配置imageFieldName参数为文件表单的表单名，后台可以据此获取文件句柄。此参数也位于 editor_config.js 中。

　　1

　　2

　　3

　　4

　　5

　　6

　　7

　　8

　　9

　　10

　　11

　　12

　　13

　　14

　　15

　　16

　　//图片上传提交地址

　　imageUrl:URL+"服务器/上传/php/imageUp.php",

　　//图像校正地址是指fixedImagePath。如有特殊需求，可自行配置

　　图像路径：固定图像路径，

　　//图片描述键

　　imageFieldName:"upFile",

　　//比例压缩的基准，确定maxImageSideLength参数的参考对象。

　　//0是根据最长边，1是根据宽度，2是根据高度

　　压缩边：0，

　　//上传图片允许的最大边长，超过会自动按比例缩放，设置较大的值不缩放

　　//更多设置在image.html

　　最大图像边长：900

　　完成以上配置后，理论上后台应该可以接收到前台上传的图片文件了。一旦正确保存，传统的图像上传到此结束。但是，在编辑器中使用 Flash 上传，过程还远远没有结束。

　　首先，后台需要计算出图片文件存放的地址字符串。UEditor 强烈建议使用从 网站 的根目录到图像名称末尾的字符串。如果不是从网站的根目录算起，后面需要考虑参数“前后端校正地址”。

　　其次，后台返回一个json格式的字符串。格式的具体要求如下：

　　1

　　{"url":"图片地址","title":"图片描述","state":"上传状态"}

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

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

　　例如，如果服务器返回的路径是“/myProject/uploads/sun.jpg”，那么插入编辑器的路径就是“前后端修订路径+/myProject/uploads/sun.jpg ”。

　　三、Word 图片转储交互

　　1、图片转储原理

　　所谓word图片转储，就是为了解决UEditor从word中复制一个混合的图文文章粘贴到编辑器中的问题，word文章中的图片数据无法显示在编辑器中。是针对无法提交到服务器的问题而开发的一款简单易用的镜像转储解决方案。

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

　　2、配置要点及注意事项

　　word图片dump的配置和普通图片上传基本一样，唯一的区别就是操作上的不同：前者需要先获取临时图片文件存在的目录，后者直接选择指定的文件目录通过它自己。PS：在某些操作系统的word的某些版本中，发现单个word图片会生成两张临时图片，格式和定义不同。目前还没有找到改进的方法。

　　四、远程抓图交互

　　1、遥控抓取原理

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

　　1

　　2

　　3

　　4

　　5

　　6

　　7

　　8

　　9

　　10

　　11

　　12

　　13

　　14

　　15

　　//是否开启远程抓图

　　catchRemoteImageEnable：真，

　　//处理远程抓图的地址

　　catcherUrl:URL +"server/submit/php/getRemoteImage.php",

　　//后台提交到远程图片uri集合的表单名

　　catchFieldName:"upFile",

　　//图像校正地址，同imagePath

　　捕手路径：固定图像路径，

　　//本地顶级域名，开启远程抓图时，除此之外的所有其他域名

　　//图像将被本地捕获

　　本地域：["","10.81.2.114"],

　　2、备注

　　是否开启远程抓图功能可以通过在editot_config.js中配置catchRemoteImageEnable参数来实现。与此功能相关的配置还包括远程获取处理程序地址、表单字段名称、本地字段和“前后端校正地址”。远程抓图处理程序实现根据前端提交的地址列表（以ue_separate_ue标识分隔的字符串）进行抓图，然后将地址列表返回给客户端的功能。

　　前后端交互数据格式示例：(URL1, URL2, URL3, URL4）

　　1

　　URL1ue_separate_ueURL2ue_separate_ueURL3ue_separate_ueURL4

　　五、图片在线管理交互

　　1、图片在线管理介绍

　　图片在线管理是指通过读取服务器端的文件目录并在编辑器中显示来进行附加操作的功能。出于安全考虑，UEditor目前只实现了二次图片插入操作，其他的删除、移动等操作将在后续的二次开发教程中发布。

　　1

　　2

　　3

　　4

　　5

　　//图片在线管理的处理地址

　　imageManagerUrl:URL +"server/submit/php/imageManager.php",

　　//图像校正地址，同imagePath

　　imageManagerPath:fixedImagePath

　　2、备注

　　在线图片管理中需要配置的参数与远程抓图相同。两者的区别在于，在线图片管理中的图片数据是通过在服务器端指定某个目录，然后遍历其下的所有图片文件，然后返回地址来获取的。到编辑器，远程抓图就是由编辑器提交图片地址，服务器端抓图处理后将新地址返回给编辑器。两者的初始触发都需要ajax的介入。

　　六、截图交互

　　1、截图介绍

　　使用ActiveX控件，目前只支持IE浏览器。

　　2、备注

　　需要配置的参数除了和图片上传一样的内容外，还包括服务器地址和端口的配置。使用时请根据自己服务器的特点进行适配和修改。

　　1

　　2

　　3

　　4

　　5

　　6

　　7

　　8

　　9

　　10

　　11

　　12

　　13

　　14

　　//网站截图服务器端文件所在地址或ip，请勿添加

　　snapscreenHost:'127.0.0.1',

　　//截图的服务器端保存程序，UEditor的示例代码为“URL

　　snapscreenServerUrl: URL +"server/upload/php/snapImgUp.php", +"server/upload/php/snapImgUp.php""

　　//截图的服务器端口

　　snapscreenServerPort:80,

　　//截图图片的默认布局

　　snapscreenImgAlign:'center',

　　//截图显示修正后的地址

　　snapscreenPath：fixedImagePath，

　　七、附件上传交互

　　1、上传附件注意事项

　　附件上传的基本配置与图片类似。另外，由于附件上传采用成熟的swfupload开源框架，大部分文档资料可以参考swfupload官网教程。官网地址：http://

　　Ueditor的部署说明（来自Ueditor官网）：