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

主要内容:

  1. 如何从数据库读取之前编辑器文本框内容为纯文本
  2. Ueditor上传图片的配置

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

在此之前,我先说一个显示中遇到的一个问题:

当从数据库读取的是html代码,再经过razor解析返回前台的是经过编码的html代码:

<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修改

editbox

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

edithtml

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

//获取html内容

var html = ue.getContent();

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

sqlInfo

4,此时问题就来了,当从数据库获取这段html字符串就会直接显示在UEditor编辑框中,注意此时没有使用Ueditor的html模式编写编辑框内容

editTextFromSql

所以最好同文章开始提到的一样使用RawString,将html以字符串的形式输出到Ueditor的编辑框中

<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" 才能得到正常路径。

posted @ 2015-08-20 08:01  荣孝云  阅读(1524)  评论(0编辑  收藏  举报