码迷,mamicode.com
首页 > 数据库 > 详细

读取UEditor编辑框内容到数据库和上传图片的配置

时间:2015-08-20 09:02:24      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:

主要内容:

如何从数据库读取之前编辑器文本框内容为纯文本

Ueditor上传图片的配置

1、 如何从数据库读取之前编辑器文本框内容为纯文本。

在写下标题问题解决方案之前,我先阐述一个前台显示中遇到的一个问题:

当显示视频时,从数据库读取出来的是html代码,经过razor解析返回到前台页面就是成这样了:

<p><span style="font-family: 隶书, SimLi; font-size: 24px; color: rgb(255, 0, 0);">花千骨</span></p>

我们可以调用RawString将这些代码以字符串的形式展示出来,即将数据库读取到的html字符串直接输出到html页面的body标签内:

Raw是一个封装了RawString类的方法

@Raw(Model.Note)

上面一段绝非废话,接下来要介绍的有关Ueditor的使用也有同样问题。

环境:

利用Ueditor编辑器编辑内容后保存到数据库,再点击修改时,将保存的内容显示在Ueditor编辑器的编辑框中。

技术分享

1,在UEditor编辑框里输入的内容其实是html字符串:

技术分享

2,如果采用下面方法获取编辑框中的内容:

//获取html内容

var html = ue.getContent();

3,那么存入数据库的也就是一段html字符串:

技术分享

4,此时问题就来了,当点击修改时,从数据库获取这段html字符串就会直接显示在UEditor编辑框中:

技术分享

所以最好同文章开始提到的一样调用RawString,将数据库读取到的html以字符串的形式输出到html页:

Raw方法中封装了一个RawString

<script id="container" name="content" type="text/plain">

@RuPengRazor.RPHelper.Raw(Model.segmentModel.Note)

</script>

当然,如果写入时采用获取UEditor的纯文本内容便不会有这个问题:

//获取纯文本内容
var txt = ue.getContentTxt();

但是,此时存入数据库的就是用户输入的纯文本内容,给文本赋予的样式也不会存入数据库,修改时读取出来的当然也就是纯文本,也就不需要RawStrig解析了。

我们之所以使用Ueditor孜然是他强大的富文本功能,所以最好还是采用获取html内容的方式获取Ueditor编辑框的内容,再存入数据库,在读取时使用RawString解析数据库html字符串显示到编辑框中。

2、 关于Ueditor上传图片的配置

1,  将Ueditor的代码放入网站目录后,要添加对newtonsoft.json的引用

2,  关于上传图片路径问题

Ueditor官方文档提到在net/config.json文件中:

"imageUrlPrefix": " /ueditor/net/", /* 图片访问路径前缀 */

当你添加了newtonsoft.json的引用后,上传图片功能就可以用了,但如果你不配置imageUrlPrefix项,上传的图片路径将以/ueditor/net/upload/image/…格式存入数据库,以后从数据库读取出来的这个路径将不能正常显示图片。

官方文档中提到了这一点,简单来说就是这样:

ImageUrlPrefix的配置值中前缀要添加网站域名,在上传图片时将连同域名一起存入数据库,读取时拿到的就是一个带域名的完整路径,图片才会正常显示,就像这样:

"imageUrlPrefix": "http://localhost:43316/ueditor/net/", /* 图片访问路径前缀 */

关于这点官方文档中的说明如下:

有一些情况下仅仅靠返回路径是不能得到正常的图片链接,需要通过配置 imageUrlPrefix 给插入图片的路径添加前缀。

有两种情况下需要配置 imageUrlPrefix:

asp和.net下,应用程序目录不是网站根目录,需要给路径添加前缀。

在跨域上传的情况下,就需要配置imageUrlPrefix前缀。假设页面在 a.com 域下,文件上传到 b.com 域下,这样要配置 imageUrlPrefix 为 "http://b.com" 才能得到正常路径。

读取UEditor编辑框内容到数据库和上传图片的配置

标签:

原文地址:http://www.cnblogs.com/sean100/p/4744005.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!