精华内容
下载资源
问答
  • 富文本数据存储及回显

    万次阅读 2018-12-11 14:18:03
    存储:1、文件存储,将富文本数据保存成html文件,然后将文件上传到文件服务器;2、直接将html内容存储到数据库中。这篇主要介绍第二种。 第一步:获取富文本编辑器内容,我这里就手动编写了一段很小的html数据。 ...

    开发者应该都使用过富文本编辑器插件吧,对于富文本插件编辑的内容我们需要怎么存储及回显呢,我来简单介绍下。

    存储:1、文件存储,将富文本数据保存成html文件,然后将文件上传到文件服务器;2、直接将html内容存储到数据库中。这篇主要介绍第二种。

    第一步:获取富文本编辑器内容,我这里就手动编写了一段很小的html数据。

    一个图片标签,里面放着一个图片链接,html里面双引号被转义了,会与字符串双引号冲突,使用spring mvc一般不需要手动转义,框架会帮我们处理。

    第二步:处理特殊标签,我使用的是mysql数据库,像尖括号这种特殊表会被数据库误会,也是为了防止被人恶意在html内容中嵌入脚本代码。

    这里使用的是org.springframework.web.util.HtmlUtils这个工具类,属于Springboot web包里。

    其中htmlEscapeHex方法是将所有特殊字符转义为对应的数字以十六进制格式引用,htmlEscape方法是将所有特殊字符转义到对应的本质引用,htmlEscapeDecimal方法是将所有特殊字符以十进制格式转义到对应的数字引用。具体是什么样子的呢,来看下控制台结果。

    第三步,存储,一般富文本内容都是很大的,所以对应数据库字段我们应该选用longtext类型,如果选用varchar这些有长度的字段,可能会报data too long错误。

    第四步,读取。

    第五步,解析,使用的也是HtmlUtils这个工具类中的解析方法。

    解析只需要使用到一个htmlUnescape方法。

    可以看到控制台结果,完美解析。将解析后的html内容返回到前端,回显到富文本框里面就行了。

    欢迎指正或者提出更好的建议。

    展开全文
  • 需求:在一个输入框中可以粘贴图片的功能解决思路1:使用富文本编辑插件代替input标签,将图片先上传至服务器,再将图片链接插入到富文本中,图片上传区域要隐藏,上传成功后在富文本编辑器中显示图片解决思路2:在...

    需求:

    在一个输入框中可以粘贴图片的功能

    解决思路1:

    使用富文本编辑插件代替input标签,将图片先上传至服务器,再将图片链接插入到富文本中,图片上传区域要隐藏,上传成功后在富文本编辑器中显示图片

    解决思路2:

    在本来的input输入框监听paste事件,如果是图片的话,将图片先上传至服务器,再将图片链接插入一个img标签,保存为一段html片段

    步骤:

    以下为使用富文本编辑解决方案,思路2也差不多一样的思路,只是形式不一样而已。

    安装

    npm install vue-quill-editor --save

    main.js

    import VueQuillEditor from 'vue-quill-editor'

    Vue.use(VueQuillEditor);

    import 'quill/dist/quill.core.css'

    import 'quill/dist/quill.snow.css'

    页面html核心代码

    style="display: none"

    class="quillEditerClass"

    :action="action"

    :data="data"

    :on-success="handleSuccess"

    :before-upload="beforeUpload"

    :file-list="fileList"

    list-type="picture-card"

    ref="upload"

    >

    v-model="content"

    ref="myQuillEditor"

    :options="editorOption"

    @blur="onEditorBlur($event)"

    @focus="onEditorFocus($event)"

    @change="onEditorChange($event)"

    >

    页面js核心代码:

    data(){

    return {

    editorOption: {

    placeholder: "请在这里输入",

    modules: {

    toolbar: {

    container: [

    ["image"], //上传图片

    ],

    handlers: {

    image: function (value) {

    if (value) {

    // 调用iview图片上传

    document

    .querySelector(".quillEditerClass .el-icon-plus")

    .click();

    } else {

    this.quill.format("image", false);

    }

    },

    },

    },

    },

    },

    }

    }

    onEditorReady(editor) {

    // 准备编辑器

    },

    onEditorBlur() {}, // 失去焦点事件

    onEditorFocus() {}, // 获得焦点事件

    onEditorChange() {

    const quill = this.$refs["myQuillEditor"].quill;

    console.log(quill.container.querySelector(".ql-editor").innerHTML);

    this.remarks = quill.container.querySelector(".ql-editor").innerHTML;

    }, // 内容改变事件

    由于项目中图片上传需要在上传又拍云之前调用后台得到验证信息,所以在beforeUpload时加入一个请求

    handleSuccess(response, file) {

    if (response.code === 200) {

    let quill = this.$refs.myQuillEditor.quill;

    // 获取光标所在位置

    let length = quill.getSelection().index;

    // 插入图片,res为服务器返回的图片链接地址

    quill.insertEmbed(

    length,

    "image",

    `https://mx-cloud-storage-test-upyun.mxnavi.com${response.url}`

    );

    // 调整光标到最后

    quill.setSelection(length + 1);

    }

    },

    beforeUpload(file) {

    return service

    .newUpload({

    oemId: this.$Global.USERINFO.LOGIN_USER_PRODUCTID,

    fileName: file.name,

    dirPath: "tour/web/img",

    time: this.moment(new Date()).format("YYYYMMDDHHmmSSS"),

    })

    .then((json) => {

    if (json.respCode === 100) {

    this.action = json.data.uploadUrl;

    this.downloadUrl = json.data.downloadUrl;

    this.data = json.data.uploadFormDto;

    } else {

    this.$message.error("上传文件失败!");

    }

    });

    },

    整体思路

    1.当使用富文本编辑器上传图片时,会触发隐藏的el-upload,实现自定义上传。

    注意:否则粘贴上去的图片保存的数据是base64的,会很大,如果后台限制了很容易导致保存失败

    2.上传成功之后得到的url使用quill.insertEmbed插入img标签。

    3.通过this.remarks = quill.container.querySelector(".ql-editor").innerHTML保存为html片段。

    展开全文
  • 做项目过程中,经常遇到接口里传过来的内容是包含html标签的,但是样式又不全面,导致...我们需要用正则将内容转义一下:新建一个js文件 replaceImg.js:/*** 处理富文本里的图片宽度自适应* 1.去掉img标签里的styl...

    做项目过程中,经常遇到接口里传过来的内容是包含html标签的,但是样式又不全面,导致在小程序显示的时候,整个界面都是乱的。

    这时候就要用到rich-text

    cc577b677c46

    rich-text

    使用:

    有时候展现的图片也是没有样式的,导致图片会按照原始大小显示,超出界面框架。我们需要用正则将内容转义一下:

    新建一个js文件 replaceImg.js:

    /**

    * 处理富文本里的图片宽度自适应

    * 1.去掉img标签里的style、width、height属性

    * 2.img标签添加style属性:max-width:100%;height:auto

    * 3.修改所有style里的width属性为max-width:100%

    * 4.去掉
    标签

    * @param html

    * @returns {void|string|*}

    */

    function formatRichText(html){

    let newContent= html.replace(/]*>/gi,function(match,capture){

    match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');

    match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');

    match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');

    return match;

    });

    newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){

    match = match.replace(/width:[^;]+;/gi, 'width:100%;').replace(/width:[^;]+;/gi, 'width:100%;');

    return match;

    });

    newContent = newContent.replace(/
    ]*\/>/gi, '');

    newContent = newContent.replace(/\

    return newContent;

    }

    // module.exports = {

    // formatRichText

    // }

    module.exports = {

    formatRichText: formatRichText

    }

    在对应的界面调用:

    var replace_img = require("../../../utils/replaceImg.js");

    //request

    let data_article = res.data.data[0];//这里是请求到的 html 内容

    var newsArticle = replace_img.formatRichText(data_article.content);

    that.setData({

    art_content:newsArticle

    });

    可以在小程序内尝试打印看看获取到的最后的内容;

    cc577b677c46

    图片

    这时候的img标签已经被加上的style。

    展开全文
  • 演示详见链接 添加链接描述 一、安装 npm install mavon-...//富文本 import mavonEditor from 'mavon-editor' import 'mavon-editor/dist/css/index.css' Vue.use(mavonEditor) 三、vue中使用 <mavon-edit...

    演示,API 文档说明详见链接
    添加链接描述

    一、安装

    npm install mavon-editor --save
    

    二、在main.js中全局注册

    //富文本
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    
    Vue.use(mavonEditor)
    

    三、vue中使用

    <mavon-editor ref="md"
                   v-model="description"
                  :autofocus="false"
                   defaultOpen="preview"
                   :language="languageEditor"
                    @imgAdd="$imgAdd"/>
    
    data() {
              return {
                languageEditor:'zh-CN',//多语言显示富文本
             }
     }
    
    created:function () {
              if(this.languageID==1){
                this.languageEditor='zh-CN'
              }else if(this.languageID==2){
                this.languageEditor='en'
              }else{
                this.languageEditor='de'
    }
    
    methods::function () {
    			//富文本上传图片
                $imgAdd(pos, $file){
                  // 第一步.将图片上传到服务器.
                  var formdata = new FormData();
                  formdata.append('file', $file);
                  axios({
                    url: '/admin/sys-file/upload',
                    method: 'post',
                    data: formdata,
                    headers:this.headers,
                  }).then((res) => {
                    // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
                    console.log(res)
                    var url='http://minio.rfxxkj.com/lsfw/'+res.data.data.fileName;
                    this.$refs.md.$img2Url(pos, url);
                  })
                },
       }
    

    这个富文本支持多语言化,用language属性控制,默认中文,暂支持 zh-CN: 中文简体 , en: 英文 , fr: 法语, pt-BR: 葡萄牙语, ru: 俄语, de: 德语, ja: 日语

    :autofocus="false"关闭自动聚焦富文本

    上传服务器的headers和url要自己配置修改下,上传成功的url也要根据自己的路径进行调整。这样图片才能正常显示不破图。

    四、md格式的文本的解析

    使用marked框架来解析。

    npm install marked --save
    
    import marked from ‘marked‘
    
    <div v-html="readmeContent" ></div>
    
    //这里的newDate[0].content就是取出来的md格式的文本内容  
    this.readmeContent=marked(newData[0].content||‘‘,{
       sanitize:true
    })
    

    存在问题:现在纯粹的只是将其解析成了html文件,相应的样式查了下,可以用highlight.js,但折腾了好久都没引用成功,最后为了应急,只能自己手写样式了。等之后再仔细看看marked的官方文档再说…

    五、前端展示mavonEditor文本,如果四不成功可以使用五。
    安装完依赖后并在全局引入完,即可直接使用。对应的属性请详见API文档。

    <mavon-editor :toolbars="markdownOption" :box-shadow="false" v-model="msg" :subfield="false" style="border: 0" preview-background="#FFF" default-open="preview"/>
    
    
    
          markdownOption: {
            toolbarsFlag: false,
            subfield: false
          },
    
    展开全文
  • 经过修改的百度富文本编辑器ueditor.jar,实现自定义上传文件存储路径,不再局限于存储在项目路径下,具体看http://blog.csdn.net/maijia0754/article/details/79360788
  • (都有现成的了,不妨拿来用)image.pngimage.png文件下载:此处给大家看一下使用到的文件目录image.png上面就是封装好的富文本组件,你也可以 点击这里去下载 相应的文件目录,不过还是建议全部下载下来,把对应的...
  • VUE实现使用富文本编辑,如下图:实现这个富文本编辑需要以下步骤:第一步:安装编辑器组件npm install vue-quill-editor –-save第二步:创建一个Ue.vue的文件,放如下代码export default {name: 'UE',data() {...
  • 最近需要自己做后台写页面,其中需要用到富文本编辑框,可以输入文字,上传图片,视频等,最终获取html存入数据库。这里记录一下开发过程。 UEditor富文本编辑器文档:http://fex.baidu.com/ueditor/ 下载地址:1.4...
  • 此前做了一个百度富文本编辑器ueditor上传文件到bcs中的整合说明,并附上了整合文件下载,岂料百度在BAE3.0时不再支持BCS,导致原来上传的图片不能访问,代码不能工作。这里说一点,百度在未通知用户的情况下,直接...
  • * base64_decode图片存储到目录 * @author Eric * @param $imgBase64 * @return string */ public function images_save ( $imgBase64 ) { if ( preg_match ( '/^(data:\s*image\/(\w+);base64,...
  • 因为在存储数据的时候可能会遇到存储信息并非纯文本的情况,比如说带有HTML语法,带有图片URL等,即富文本格式,也许我们需要使用富文本字段来存储具备丰富格式的文本 1.安装CKeditor与配置 pip install django-...
  • 我在网上找了一圈没找到ueditor的upyun存储java... ueditor目录结构,只要修改文件存储位置,所有只修改upload包下相关的文件即可。1、修改存储路径Base64Uploader.java和BinaryUploader.java下//String physicalP...
  • 我在我的项目中使用了Kindeditor富文本编辑器(或许你使用的是Ueditor\ckeditor),通过富文本编辑器编辑文章的内容然后存储到数据库中,再从数据库中读取显示到网页上来。 在这个过程中,我遇到一个问题,当我在...
  • 1.第一步详细阅读layui的官方文档(富文本) 文档的地址:https://www.layui.com/doc/modules/layedit.html 2.第二步根据需求编写html代码 3.第三步根据layui文档编写js中的代码 4.编写一个上传文件的类用来存储...
  • 需求(PC端)做一个可以使用图片上传、视频上传、文件上传功能的富文本组件,简单的文本编辑发布功能,采用socket方式传输,做法当时看到这个需求,我觉得是不难的,就去github上找富文本编辑器,因为项目比较急,当时我...
  • 首先,下载WangEditor插件,下载地址:https://github.com/wangfupeng1988/wangEditor/releases,下载最新的就好了,使用文档地址:...将它放到我们项目中的静态文件中,然后页面中引入wan...
  • 基于spring boot的项目中要用到富文本编辑器,但百度UEditor的后台代码给出的是jsp版本的实现,由于项目使用的thymeleaf,不愿为了一个插件单独添加jsp支持;且项目中又使用七牛存储图片等文件,便重写UEditor的后台...
  • summernote富文本编辑器

    2019-06-06 16:00:19
    summernote是一款基于bootstrap的富文本编辑器,是一款十分好用的文本编辑器,还附带有图片和文件上传功能。 那么在我们网站中想吧这个图片上传到服务器指定文件夹中,就要在选择图片是进行ajax移动图片。 1.1了解...
  • 找到以下2个关键文件: YourPath.../Ueditor/php/config.json YourPath.../Ueditor/php/Uploader.class.php config.json找到如下代码:  "imagePathFormat": "...(这里不用管)",//找到imagePathFormat所在行 ...
  • 您可能感兴趣的文章:效率较高的php下读取文本文件的代码AJAX 实时读取输入文本(php)php 文本文件的读取效率PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)ThinkPHP自动转义存储富文本编辑器...
  • 在使用django做快速开发时,一般都会使用到xadmin和富文本(百度的ueditor),这两个都是把文件放在本地存储的,如果项目中的文件需要频繁访问时难免的会对服务器造成一些压力,所以需要将文件上传到七牛进行存储 ...
  • 当Django在处理文件上传时,文件的数据被存储在request.FILES属性中 FILES只有在请求的方法为POST且提交的form表单带有enctype="multipart/form-data"属性的情况才会包含数据。否则,FILES将为一个空的类似字典的...
  • 基于spring boot的项目中要用到富文本编辑器,但百度UEditor的后台代码给出的是jsp版本的实现,由于项目使用的thymeleaf,不愿为了一个插件单独添加jsp支持;且项目中又使用七牛存储图片等文件,便重写UEditor的后台...
  • 问题描述: 借由上传网络图片功能中可传递可....aspx最终服务上最终存储文件会变为XXXXXX.aspx 具体漏洞描述可查看此链接 https://www.freebuf.com/vuls/181814.html 2.解决方法 目前采用的方法是修改Craw...
  • Github中项目的MD文件就是用MarkDown语法进行编写,它内嵌支持Html,可以使用Html的大部分标签。我们使用构建博客表单body字段的PageDownFiled生成的是MarkDown格式的文本,在上一文中我们通过Flask-
  • 将文件传递到服务器上,首先要有文件处理模块,比如: pillow(python2 PIL),其次要有文件存储的位置。 图片配置: 安装pillow模块,支持图片处理。 图片字段 富文本编辑器 Ckeditor 富文本编辑器,...

空空如也

空空如也

1 2 3 4 5 ... 12
收藏数 235
精华内容 94
关键字:

富文本文件存储