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

  • 相关阅读:
    JavaScript之面向对象与原型笔记整理--------创建对象(1)
    PTA乙级 (*1030 完美数列 (25分))
    PAT乙级 (1033 旧键盘打字 (20分)(字母大小写转换、判断是否为大小写字母数字))
    PTA乙级 (*1040 有几个PAT (25分))
    PTA乙级 (1042 字符统计 (20分))
    PTA乙级 (1043 输出PATest (20分))
    PTA乙级 (1048 数字加密 (20分))
    PTA乙级 (1049 数列的片段和 (20分))
    PTA乙级 (1051 复数乘法 (15分))
    PTA乙级 (*1054 求平均值 (20分))
  • 原文地址:https://www.cnblogs.com/sean100/p/4744005.html
Copyright © 2020-2023  润新知