求ueditor的使用说明文档,非开发文档

求ueditor的使用说明文档,非开发文档,第1张

文档说明

支持版本:支持 UEditor 142+ 的版本

UEditor 除了静态的编辑功能,还带有很多和后端交互的功能,这个需要后台语言支持。这里介绍 PHP 后台的 ueditor 使用方法以及注意的问题。

当前文档的例子是以 上传 为例介绍,其他上传配置方法类似。

1 部署服务器

11 安装服务器

首先需要有一个安装好的 PHP 服务器,现在流行的 PHP 服务器安装方法有很多,可以自行搜索对应 *** 作系统的安装教程。window 下可下载集成 apache + php 等多种服务的软件:xampp 和 wamp,linux下可以选择 lamp 等软件。

12 配置服务器

配置好服务器之后,需要修改 php 的配置文件 phpini:

找到 post_max_size 改成你希望 post 表单数据的最大允许值(包括上传大小)

找到 upload_max_filesize 改成你希望上传文件最大允许值

13 检查上传目录是否有权限读写

上传目录通过配置 imagePathFormat 格式的参数指定,配置位置在 php/configjson 里。详细用法看 上传路径配置

window 一般情况都会有权限读写,在 linux 和 mac 系统下,需要注意运行 php 的用户,有没有权限读写上传目录。

IIS 服务器挂接 PHP 的情况下,注意上传目录不在程序目录下时,要设置 "启用父路径" 为true,才能正常访问父目录。

13 运行测试

配置好服务器之后,可以测试一下 php 代码是否正确执行,在浏览器打开 ueditor/controllerphp 对应的路径,看看是否有下面的返回值。

{ state: "请求地址出错" }

再访问 ueditor/php/controllerphpaction=config 是否正常返回了json格式的后端配置内容,格式大致如下。

{ "imageUrl": ">

这里面有一个流程

1、从UEditor获取数据在后台

2、在后台中通过SQL往数据库中填充数据

如果第一个解决了;我相信第二个问题;楼主就可以自己解决了;

aspx

前台页面

<body>

<form runat=server id=uploadPic>

<div id="editor"></div>

<div id="textarea" runat="server" name='textarea'></div>

<input type="submit" id="btnSubmit" name='btnSubmit' runat="server" value="编辑完毕,提交" onserverclick="btnSubmit_Click" style="width: 140px" />

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

</form>

<script type="text/javascript">

var editor = new baidueditoruiEditor({

UEDITOR_HOME_URL: '/common/ueditor/',

iframeCssUrl: '/common/ueditor/themes/default/iframecss',

autoClearinitialContent: true,

initialContent: '在编辑器中默认显示的内容', //初始化编辑器的内容

minFrameHeight: 200, //设置高度

textarea: 'textarea' //设置提交时编辑器内容的名字,之前我们用的名字是默认的editorValue

});

editorrender('textarea');

</script>

</body>

aspxcs

protected void btnSubmit_Click(object sender, EventArgs e) {

//测试获取编辑文本的值

string str = RequestParams["textarea"];

// ClientScriptRegisterClientScriptBlock(thisGetType(), "s", "alert('" + RequestParams["textarea"] + "')", true);

//string str = RequestForm["textarea"];

TextBox1Text = strr;

}

这是获取值得方式

这个是没有错误的,不知道你想怎么做?

本来使用编辑器,保持的就是html,为了能正常的保存到数据库,必须做点处理,比如,如上采用的htmlspecailchars。常用的还有addslashes。

UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量、可定制、用户体验优秀等特点。

开源基于BSD协议,所有源代码在协议允许范围内可自由修改和使用。

百度UEditor的推出,可以帮助不少网站开发者在开发富文本编辑器所遇到的难题,节约开发者因开发富文本编辑器所需要的大量时间,有效降低了企业的开发成本。

其实很简单,刷新页面地址栏的url是不变的,利用这个不变的因素可以这样实现:

1、页面url中有个参数,就是一段根据用户id、时间生成的串(key),保证唯一。

2、页面每隔几秒自动保存一次(写到数据库或者cookie里面,主键就是上边说的那个key)

3、如果用户刷新页面,页面在加载的时候去数据库或者cookie里找看有没有这个key对应的值。有则放到ueditor里。这样第一次进入页面的时候肯定获取不到值,后来就能获取了。

4、清理规则可以指定为每个用户只保留一条记录,不管是哪个页面,反正就存一条,有新的,旧的就给覆盖了。

你看百度知道如果我刷新页面,内容也会没有……但是页面会有提示,比如刷新页面内容会丢失之类。不做自动保存是出于效率、性能的考虑。

Ueditor编辑器上传

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

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

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

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

• callbackjs:本上传模块支持的所有回调函数,你可以按需选用其中的内容。对于不需要做二次开发的你说,可以放心地直接删除。

• imagehtml:上传对话框的主体文件。前端的配置和修改基本在此处完成。

• imageUploaderswf:Flash上传文件。

• tangramjs:百度前端框架tangram封装的flash *** 作模块。一般无需修改。

打开imagehtml文件,找到baiduswfcreate()方法,有关上传的大部分配置都在这里进行。这其中的绝大部分参数相信你对着注释都能很容易明白意思,下面将挑选几个需要稍微解释的参数进行讲解:

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

其次是compressSide和compressLength这两个参数。前者规定了上传等比压缩的基准边,后者规定了前者定义的基准边的最大边长,并以该值为基准进行等比缩放。此处的值设置是通过读取配置文件中的maxImageSideLength值来进行,嫌麻烦的可以直接设置数值即可。

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

第四个要介绍的参数是ext。这个参数允许让你自己定义需要向后端post的参数。只要书写符合我们demo中的格式,后台就可以直接像接收一个普通的表单项一样的方式来接收对应的自定义值。

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

前端部分的配置暂时结束,下面来看后台处理程序中的配置。打开admin/server/upload/文件夹,在upphp文件中,我们可以发现需要配置的参数有以下三个uploadPath, fileType 和 fileSize。有你后两个参数的存在表示疑问,认为前端已经通过Flash限制了文件大小和文件类型,此处不需要再进行限制。这种认识其实是不对的,有经验的hacker们完全可以通过自己构造提交表单来绕开前端Flash的各种限制,直接上传文件到我们的服务器。

我们重点来看uploadPath这个参数。默认状态下,这个参数的配置会在upphp文件所在目录的父目录中创建一个uploadfiles文件夹,并将保存在这个文件夹中。完成的保存之后需要返回的字符串是一个纯粹的json字符串,形如

{'url':'/uploadfiles/23123213jpg','title':'描述','state':'SUCCESS'}

此处需要说明的一点是url这个参数。可以看到,当前这个url参数中携带了“/”这样的相对路径,这种表示方式由于具有明显的上下文含义,因此不大适合于用来进行跨页面的数据传递。如果非要使用这种路径传递方式,那么必须在显示页面进行地址修正。 一般来说,比较正确的做法是在返回给客户端之前将相对路径转换成带域名的绝对路径,这一步 *** 作一般应该结合后台的网站根目录配置来完成。UEditor不希望了解具体的服务器端配置,因此在此处进行了另外一种处理:去掉所有/以及/等相对路径的字符串,只返回从uploadfiles开始的路径,如“uploadfiles/23123213jpg”, 然后通过在editor_configjs中配置imagePath这个参数来修正的真实地址。imagePath代表的含义是uploadfiles文件夹所在的文件夹地址。以当前实例项目为例,uploadfiles位于server目录底下,所以imagePath的值应该设置为“admin/server/”。此处之所以从根目录开始,原因同完整版部署时候说的一样,是因为editor_configjs被indexphp导入,所以其真实路径就是根目录。 另外一个state参数则是由后台的具体逻辑来确定,其值可自定义,但如果上传成功,必须返回“SUCCESS”字符串,其他状态将直接在预览框中展示。

到此为止,上传所需要的所有配置和修改就已经完成了。在地址栏中输入地址,体验下UEditor提供的强大的上传功能吧!

PS:JSP版的上传采用了commons-fileupload包,请先下载commons-fileupload-122jar,并将其加入到项目中的WEB-INF/lib/目录下方可正常使用

以上就是关于求ueditor的使用说明文档,非开发文档全部的内容,包括:求ueditor的使用说明文档,非开发文档、你好ueditor编辑器用div你是怎么获取到值的呢、ueditor 怎么提交数据到数据库等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9690574.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-01
下一篇 2023-05-01

发表评论

登录后才能评论

评论列表(0条)

保存