ueditor入门基础

《ueditor入门基础》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、UEditor入门基础前后端数据交互一、富文本内容交互1、编辑器内容初始化（即往编辑器中设置富文本）场景一：写新文章，编辑器中预置提示、问候等内容。在editor_config.js文件中找到initialContent参数，设置其值为需要的提示或者问候语即可，如initialContent:’欢迎使用UEditor!’。场景二：编辑旧文章，从数据库中取出富文本放置到编辑器中。显然，编辑文章时需要从后台数据库中取出大段富文本，如果仍然采用场景一中的方式去设置初始值的话，必然会带来诸如引号匹配被截断等问题，因此需要采用另外一种方式去设置，如下代码所示：123

2、tortype=text/plain>//从数据库中取出文章内容打印到此处此处采用了script标签作为编辑器容器对象，并设置了其类型是纯文本，从而在避免了标签内部JS代码执行的同时解决了部分同学在使用传统的textarea标签作为容器所带来的一次额外转码问题。2、提交编辑器内容至后端场景一：在编辑器所在的Form中存在提交按钮，提交动作由点击此按钮完成。该场景适用于最普通的场合，没有太大问题需要注意，仅三点说明：1)默认情况下提交到后台的表单名称是“editorValue”，在editor_config.js中可以配置，参数名为textarea。2)可以在容器标

3、签（即script标签）上设置name属性，以覆盖editor_config.js中的默认配置。实例代码如下，此处的myContent将成为新的提交表单名称：123453）后端接收程序可以通过如下几种方式来获取编辑器中的富文本内容。1234567891011//PHP获取：$_POST["myContent"]//JSP获取：req

4、uest.getParameter("myContent");//ASP获取：request("myContent");//NET获取:context.Request.Form["myContent"];场景二：编辑器所在的Form中不存在提交按钮，提交动作由外部事件触发。该场景适用于站点前端交互较多的场合，需要注意的事项主要是在触发form提交动作之前执行编辑器内容同步操作。一般的代码模式如下所示：12345//满足提交条件时同步内容并提交，此处editor为编辑器实例if(editor.hasContent()){//此处以非空为例editor.sync();//同步内容som

5、eForm.submit();//提交Form}此处editor是编辑器实例对象。场景三：编辑器不在任何Form中，提交动作由外部事件触发。该场景使用不多，但特殊时候可能需要。UEditor也提供了对应的处理方案，基本逻辑跟场景二一样，只是在执行同步操作的时候需要传入提交form的id，如editor.sync(myFormID)即可。其他同场景二。二、图片上传交互1、传统图片上传传统图片上传涉及到的前后端交互主要涉及“上传提交路径”以及“图片保存路径”两个参数，后台保存路径以任何形式（绝对或者相对）、在任何页面展示跟前台无关。2、Flash图片上传Flahs图片上传和传统图片上传

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

7、r_config.js中。其中，imageUrl参数对应着“上传提交路径”，imagePath参数对应着“前后端修正路径”。而“图片保存路径”则需要在server/upload/php目录下的imageUp文件中配置。路径配置完成之后，还需要配置imageFieldName参数作为文件表单的表单名，后台可以据此获取文件句柄。该参数同样位于editor_config.js中。12345678910//图片上传提交地址imageUrl:URL+"server/upload