第一范文网 - 专业文章范例文档资料分享平台

UEditorUEditor的使用手册

来源:用户分享 时间:2025/5/19 19:21:26 本文由loading 分享 下载这篇文档手机版
说明:文章内容仅供预览,部分内容可能不全,需要完整文档或者需要复制内容,请下载word后使用。下载word有问题请添加微信号:xxxxxxx或QQ:xxxxxx 处理(尽可能给您提供完整文档),感谢您的支持与谅解。

同学们问的较多的一些配置项进行简单的讲解,其余配置请同学们自行查看editor_config.js文件中的对应注释即可。

A.提交表单的域名

将编辑器的容器置于一个form表单之中,后台如何获取编辑器中的内容呢?UEditor内部做了自动处理,无需用户诸如再创建一个隐藏表单来放置编辑内容等操作,只需要在配置项中设置textarea : 'editorValue'即可,后台则可以直接通过

$_POST['editorValue']或者request.getParameter(\等方式来获取编辑器中的内容。 B.图片相对路径

在1.1.7版本之前(包括1.1.7版),进入编辑器内的图片地址没有经过特殊处理,造成不同的浏览器中呈现出不一样的地址结果(绝对和相对),从而对后期的程序移植造成了一定程度的影响。1.1.7.3版开始可以通过开启本配置项来强制项目中所有的相对路径都以相对于根目录的相对路径来展示,方便了同学们的后期移植。 C.黑白名单

UEditor提供了功能强大的黑白名单过滤机制,简单的几个配置就可以拦截任何不安全因素于编辑器之外。黑白名单可以同时使用,也可以单独分开使用。黑名单中的标签将会被编辑器完整地过滤掉,包括标签本身以及标签之内的任何内容。而不在白名单之中的那些标签则仅被过滤了标签本身,其内容会继续走过滤流程。

具体的黑白名单配置示例如下所示,其中$表示元素的属性: serialize : function(){ return {

//黑名单,表示不允许任何style、script、link、object、applet和input标签 blackList: {style:1,script:1,link:1,object:1,applet:1,input:1}, //白名单 whiteList: {

//表示允许div标签,且其可包含p、span和br标签,style、class属性 div: {p:1,span:1,br:1,$:{style:1,class:1}},

//表示允许img标签,且只能包含href、title和alt属性 img: {$:{href:1,title:1,alt:1}}

} } }()

D.表情本地化

鉴于有些内网用户不能访问外网而导致的编辑器表情功能不可用,从1.1.7正式版开始,UEditor提供了表情本地化功能。更改配置emotionLocalization:true 即可开启本地表情功能。当然,本地表情功能必须要确保dialogs/emotion/目录下存在官方提供的images文件夹及所有表情文件。表情本地化之后,大家更换起表情文件来也就相当方便了! E.自动清除编辑器初始化内容

1.3前后端数据整合

1) Editor实例下的API介绍

UEditor目前向外部提供了不包括构造函数在内的12个方法,具体的类图如下:

每个方法的使用方法和示例将会在API列表中给出,点此下载。 2) 前后端数据交互

前后端的数据交互主要可分为数据提交和数据获取(从服务器)两种类型。

对于数据提交,UEditor为了优化用户的部署体验,特别针对数据提交做了特殊处理,用户不需要创建隐藏表单之类的元素来暂存编辑器值,而只需要在编辑器容器外围套上一层FORM标签,然后在配置项中设定一个名为textarea(名字有点撮!历史原因,大家将就下吧)的值即可。具体代码示例如下:

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

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

因此,如果不是由FORM内部submit按钮提交的任何其他数据提交方式,都必须在执行submit()方法之前执行一遍editor.sync()方法!只有这样,才能保证后端正确接收到编辑器中的所有内容。代码示例如下:

if(editor.hasContents()){ //提交条件满足时提交内容 editor.sync(); //此处的editor是页面实例化出来的编辑器对象

document.getElementById('myForm').submit(); }

服务器端获取到编辑器中的内容之后,一般需要对获取到的内容进行过滤和转义之后再存入到数据库中。以PHP为例,在获取到编辑器中的初始值$editorValue之后,一般要经过

stripslashes($editorValue)(如果服务开启了反斜杠功能的话,需要这步处理,否则略过。)、htmlspecialchars($editorValue)等操作后再存入数据库。

同样的道理,当我们需要从数据库中取出数据显示在页面上或者编辑器内重新编辑时,由于此时的数

据是经过转义的,所以必须重新进行一次相反的转义过程。以PHP页面中取出数据库中的文章内容显示到编辑器内为例,可以分两种方式来重新赋值:

? ? ? ? ? ?

第一种方式是将取出的内容放置到编辑器容器标签内,示例代码如下:

? ? ? ? ? ? ? ? ? ? ? ?

第二种方式是使用编辑器提供的方法setContent(str)来赋值,示例代码如下:

$content = htmlspecialchars_decode(getContentFromMysql());

echo \script>\?>

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

3) 图片上传

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

由于涉及到了后端开发语言、flash、js和html等各种不同的web元素,图片上传这块的配置和使用

搜索更多关于: UEditorUEditor的使用手册 的文档
UEditorUEditor的使用手册.doc 将本文的Word文档下载到电脑,方便复制、编辑、收藏和打印
本文链接:https://www.diyifanwen.net/c9qxw97ad196c4rp7ponk_5.html(转载请注明文章来源)
热门推荐
Copyright © 2012-2023 第一范文网 版权所有 免责声明 | 联系我们
声明 :本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在一个月内通知我们,我们会及时删除。
客服QQ:xxxxxx 邮箱:xxxxxx@qq.com
渝ICP备2023013149号
Top