如何实现用将富文本编辑器内容保存为txt文件并展示

最新推荐文章于 2023-02-10 14:12:01 发布
最新推荐文章于 2023-02-10 14:12:01 发布
阅读量575 收藏
点赞数
文章标签： 乱码 css js jquery web
个人原创文章，如若转载请标明出处哟！若帮助到您，请一键三连，谢谢咯哟
本文链接：https://blog.csdn.net/lingerlan510/article/details/121943904
版权

1.实现思路

  • 创建一个xx.txt文件，存放于项目路径下
  • 用文件流去读取文件内容并将读取的内容存放到页面的富文本编辑器框内
  • 富文本编辑框内容改变后，保存时用文件流的方式保存到xx.txt文件中

提示：注意编码问题，否则容易出现中文乱码

2.页面展示

                                                 

编辑器默认为禁止编辑状态，点击编辑按钮时可编辑内容，编辑完成后，点击保存按钮即可完成。

3.前端代码

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" charset="UTF-8" />
<title>企业介绍</title>
<!-- 引入公共资源 -->
<script th:replace="comm/comm::head"></script>

<link th:href="@{/boot/styles/learun-child.css}" rel="stylesheet" />
<script th:src="@{/boot/scripts/plugins/datepicker/DatePicker.js}"></script>

<script type="text/javascript"
    th:src="@{/boot/scripts/plugins/UEditor/ueditor.config.js}"></script>
<script type="text/javascript"
    th:src="@{/boot/scripts/plugins/UEditor/ueditor.all.js}"></script>
<script type="text/javascript"
    th:src="@{/boot/scripts/plugins/UEditor/lang/zh-cn/zh-cn.js}"></script>

<link th:href="@{/boot/scripts/plugins/jquery-ui/bootstrap-select.css}"
    rel="stylesheet" />
<script th:src="@{/boot/scripts/plugins/jquery-ui/bootstrap-select.js}"></script>
<style>
body {
    height: 100%;
    width: 100%;
    margin-left: 20px;
}
</style>
</head>
<body>
    <div class="ui-layout" id="vpapp" style="height: 100%; width: 100%;">
        <div class="ui-layout-center">
            <div id="div_right" class="ul_d_right"
                style="width: 98%; overflow: hidden;">
                <div class="show_tilte">系统管理 > 企业介绍</div>
                <div class="toolsbutton">
                    <div class="childtitlepanel">
                        <div class="title-search">
                            <table>
                                <tr>
                                    <td style="padding-left: 5px;">
                                        <!--                                     <a id="btn_Search" class="btn btn-danger" v-on:click="serach" style="display:inline-block;"><i class="fa fa-search"></i>&nbsp;查询</a> -->
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="toolbar" id="edit">
                            <a id="item-edit" class="btn btn-default" onclick="item_edit()"><i
                                class="fa fa-pencil-square-o"></i>&nbsp;编辑</a>
                        </div>
                        <div class="toolbar" id="save" style="display:none;">
                            <a id="item-save" class="btn btn-default" onclick="item_save()" ><i
                            class="fa fa-pencil-square-o" ></i>&nbsp;保存</a>
                        </div>
                        
                    </div>
                </div>
                <div class="gridPanel">
                    <table id="gridTable">
                        <tr>
                        <td class="formValue" colspan="3"    style="height: 370px; vertical-align: top;">
                            <textarea    class="form-control" id="coursecontent"    style="width: 100%; height: 80%; resize: none;" th:utext="${words?:''}"></textarea>
                        </td>
                        </tr>
                    </table>
                    <div id="gridPager"></div>
                </div>
            </div>
        </div>
    </div>
    <script th:src="@{/js/company/company_index.js}"></script>
</body>
</html>

 js代码：

var editor;
$(function(){
    editor = UE.getEditor('coursecontent',{
        readonly: true
    });
    
//    setTimeout(() => {
//        editor.disable();
//    }, 3000);

});

//编辑
function item_edit(){
    $('#edit').attr("style","display:none;");
    $("#save").attr("style","display:block;");
    editor.enable();
}

//保存
function item_save(){
    $.ajax({
        url: basePath + "/company/company_save",
        data:{
            words: encodeURI(encodeURI(editor.getContent()))
        },
        type: 'post',
        dataType: 'json',
        success(result){
            if(result.code == '1') {
                dialogMsg('保存成功！', 0);
                $('#edit').attr("style","display:block;");
                $("#save").attr("style","display:none;");
                editor.disable();
            }else{
                dialogMsg('保存失败！', 0);
            }
        }
    });
    
    
}

4.后台代码

package io.renren.modules.company;

import java.io.*;
import java.net.URLDecoder;


import org.apache.commons.lang3.StringUtils;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;


import io.renren.common.utils.JsonResult;

@Controller
@RequestMapping("/company")
public class CompanyController {
    
    private static String path  = CompanyController.class.getClassLoader().getResource("").getPath();
    
    @RequestMapping("/list")
    public String list(Model model) {
        String string = readWord();
        if(StringUtils.isNotEmpty(string)) {
            model.addAttribute("words", string);
        }
        return "company/company_index";
    }

    /**
     * 读取文件内容
     */
    public  static String readWord ()  {
        try (    
                FileInputStream  fileInputStream = new FileInputStream(URLDecoder.decode(path, "UTF-8")+"static\\company\\企业介绍.txt");
                InputStreamReader inputStreamReader = new InputStreamReader(fileInputStream,"UTF-8");
                BufferedReader br = new BufferedReader(inputStreamReader);
                ){
            String line = null;
            StringBuffer sBuffer = new StringBuffer();
            while((line = br.readLine())!=null){
                sBuffer.append(line);
            }
            return sBuffer.toString();
        } catch (IOException e) {
            e.printStackTrace();
            throw new RuntimeException(e);
        } 
    }

    /**
     * 书写文件内容
     */
    public static void writeWord(String str) throws IOException {
        try (
                FileOutputStream fileOutputStream = new FileOutputStream(URLDecoder.decode(path, "UTF-8")+"static\\company\\企业介绍.txt");
                OutputStreamWriter outputStreamWriter = new OutputStreamWriter(fileOutputStream,"UTF-8");
                PrintWriter out = new PrintWriter(outputStreamWriter);
                ){
            out.write(str);
            out.flush();
        } catch (IOException e) {
            e.printStackTrace();
            throw new RuntimeException(e);
        }
    }

    /**
     * 保存
     */
    @RequestMapping("/company_save")
    @ResponseBody
    public JsonResult companySave(String words) {
        try {
            String content = URLDecoder.decode(URLDecoder.decode(words, "UTF-8"), "UTF-8");
            writeWord(content);
            return JsonResult.success();
        } catch (IOException e) {
            e.printStackTrace();
            return JsonResult.error();
        }
    }

}
IT美男子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
01-21
我在我的项目中使用了Kindeditor富文本编辑器（或许你使用的是Ueditor\ckeditor）,通过富文本编辑器编辑文章的内容然后存储到数据库中，再从数据库中读取显示到网页上来。 在这个过程中，我遇到一个问题，当我在...
保存富文本编辑器内容
一起摆摊啊
07-11 5095
在这里我使用的是layUI的layedit模块，layUI中的富文本编辑器模块。 第一步我们先将页面搭建好，引入layui.layedit模块和layui.form模块。form模块可用于表单的数据验证和提交 在form表单中建一个textarea <textarea class="layui-textarea" id="example" name="example"></te...
springboot后端存储富文本内容（含图片内容）
qq_51415601的博客
02-10 1万+
可以看到图片的内容极其长，这是base64格式编码导致的，不过好处是当前端请求富文本内容时，如果一篇文章中有很多图片的话，浏览器不用多次发起图片请求，而是图片和文字一起发送到了前端。​还有一个方法是图片内容和文字内容分开上传，内容依旧是html格式，但是“”，这里的图片路径需要重写为图片上传后存储在服务器上的路径。​获取tinymce富文本编辑器的内容（html形式），通过axios发送到后端，后端接收到内容后直接存储到数据库。2、获取富文本编辑器的内容，并发送至后端。
关于qt设计富文本编辑器中的文件保存问题
qq_37262281的博客
05-29 990
一、关于qt设计富文本编辑器中的文件保存问题 可以使用文本流进行读写文件，一定要使用(*.rtf)格式进行保存，不然可能就会出现插入的图片和表格不显示的问题。 代码如下： //保存代码 QFileDialog *fileDialog=new QFileDialog(this,tr("另存为"),".",tr("富文本(*.rtf);;纯文本(*.txt)")); QFile *myFile; fileDialog->setAcceptMode(QFileDialog::AcceptSave); QSt
富文本数据存储及回显
热门推荐
程序员阿坤的博客
12-11 3万+
开发者应该都使用过富文本编辑器插件吧，对于富文本插件编辑的内容我们需要怎么存储及回显呢，我来简单介绍下。 存储：1、文件存储，将富文本数据保存成html文件，然后将文件上传到文件服务器；2、直接将html内容存储到数据库中。这篇主要介绍第二种。 第一步：获取富文本编辑器内容，我这里就手动编写了一段很小的html数据。 一个图片标签，里面放着一个图片链接，html里面双引号被转义了，会与字...
富文本编辑器内容存储至Mysql
hkk666123的博客
02-04 9712
文章目录概述获取富文本编辑器内容后端数据处理 概述 在所有的编辑器中，大概最受欢迎的就是富文本编辑器和MarkDown编辑器了，无论哪一种编辑器，我们需要知道的是，发给后端的内容是带着html标签的字符串，而我们需要把这些字符串存储到数据库中，其实原理非常简单，为了便于理解，我们首先创建一张表： CREATE TABLE `tb_title` ( `title_id` int(11) NOT NULL COMMENT '文章Id', `sort_id` int(11) DEFAULT NULL CO
TinyMCE富文本编辑器导出为word文档（JS实现）
11-16
应用JS实现，TinyMCE富文本编辑器导出为word文档，可解决图片，表格的导出，这是实现的demo，可以直接取用
QT-富文本编辑器：具有的新建、打开、保存、剪切、复制、粘贴、字体设置、颜色设置功能
05-09
本富文本编辑器实现了用户在文本框输入文字，可以对文本框的文字进行复制、粘贴、剪切也可以打开本地文件，新建文件，保存文件，以及设置输入文字的字体即其字体样式，字体大小是否加粗，是否具有下划线等，在设置时...
百度富文本编辑器（只需要修改配置文件即可）
07-13
百度富文本编辑器 已经实现了 图片上传 视频显示下载
文本编辑器
11-22
该文本编辑器是一个小型word，满足用户编写、处理文档的一系列基本需求。主要功能需要有:程序界面友好，实现文字录入；对文件处理可实现新建、打开、保存、另存为、退出等操作；编辑文档可实现撤销、恢复、复制、...
富文本编辑器的保存操作注意事项
weixin_34268579的博客
02-19 741
1.项目后台操作中创建一条数据库记录的时候，有一栏属性（详细信息）是根据富文本编辑器进行存储的。如下图   2.实际项目经验告诉自己，当富文本编辑器中的内容比较少的时候，新增和编辑操作没有问题。    当内容较多的时候，做新增动作的时候，系统就会提示 “value too long ” 类似的错误。导致无法进行新增或者编辑的操作。     3.原因是我们在实体属性中定义“配置文件信息”字段的St...
记一次富文本编辑器保存内容到数据库转换内容的问题
qq_20507067的博客
06-11 2万+
项目上要用到富文本编辑器，保存到数据库的时候它会自动转换成非HTML的格式，再次从数据库读取到页面后格式全乱了。如图：如果我们要按一开始我们输入的格式正常显示需要对保存的内容进行转换，转换成正常的HTML的格式方法是需要用到commons-lang3-3.3.2.jar 这个jar包下面的一个工具类String qualiHtml=StringEscapeUtils.unescapeHtml4(r...
富文本提取存文本内容
soulmybaby的博客
02-18 5250
// 编辑器提取纯文本 $c1 = $data["content"]; // 得到编辑器的内容 $c2 = htmlspecialchars_decode($c1);//把一些预定义的 HTML 实体转换为字符 $c3 = str_replace("&amp;nbsp;","",$c2);//将空格替换成空 ...
vue中利用富文本编辑器实现将输入文本字符串类型转为txt文件下载输出以及以txt文件格式传递至后端，进行数据交互
Fairyasd的博客
08-17 2209
vue中利用富文本编辑器实现将输入文本字符串类型转为txt文件下载输出以及以txt文件格式传递至后端，进行数据交互 1、安装插件 npm install vue-quill-editor --save //富文本编辑器 npm install file-saver --save//字符串转txt文件 2、main.js引入 // 引入富文本编辑器 import VueQuillEditor from 'vue-quill-editor' // require styles 引入样式 import 'qui
Android 富文本编辑器，支持图文混排，支持插入和删除图片
binyao02123202的专栏
06-14 8448
XRichText 一个Android富文本类库，支持图文混排，支持编辑和预览，支持插入和删除图片。 实现的原理： 使用ScrollView作为最外层布局，里面填充TextView和ImageView。删除的时候，根据光标的位置，删除TextView和ImageView。生成的数据为list集合，可自定义处理数据格式。 截图预览 使用方式 1.
关于如何控制富文本内容的展示方式
weixin_47818467的博客
04-14 1332
项目需求：要求如果内容全部是文字则这样!展示 如果里面只要包含了图片或视频这样全部宽100%展示 这个就要求写两套样式分别展示 难点在于所有内容是富文本展示的，也没有字段来控制是否是文字或者图片视频 这里我实现的思路是首先获取数据中是否包含图片或者视频的标签如果不包含就返回-1，这样我通过条件判断在t上添加一个fold=true，控制 如果有图片视频就说明有fold=true 通过列方式判断 :class="[item.fold==true?‘option-div1’:‘option-div’]" <
博客项目搭建之富文本的使用和图片的上传及显示
qq_39112101的博客
07-15 407
数据的models.py文件的内容如下 from django.db import models from ckeditor.fields import RichTextField #引入富文本编辑器 # Create your models here. class Author(models.Model): name = models.CharField(max_length...
前端、后台（ueditor）富文本的使用和回显
qq_48082548的博客
01-10 4059
以php为例：其实什么语言都无所谓了只要前端发送的请求能接受到就ok，然后接受图片的地址保存。写在哪个类无所谓，在route.php文件中配置此接口就可以，访问的时候能来到此方法。然后再此页面导入js文件根据自己的路径来。然后在打开自己创建的js文件填入一下配置。首先在html文件中创建一个这个标签。下载解压后放在js文件夹即可。
【实战笔记】怎么给自己的博客搭建富文本?
m0_48721669的博客
07-20 373
博客地址 我个人博客的地址????????点击进入 开源项目地址 这是我一个开源的收藏网址的项目 项目地址????????点击进入，可以直接设置为浏览器主页或者桌面快捷方式进行使用，本人在用，长期维护。 完全开源，大家可以随意研究，二次开发。当然还是十分欢迎大家点个Star⭐⭐⭐ ????????源码链接(gitee)       ????????源码链接(github) 怎么给自己的博客搭建富文本编辑器? 技术栈:vue2.x 富文本编辑器:
python web怎么实现读取本地md生成html，并且用md富文本编辑器在线编辑后可保存为最新的md文件
最新发布
09-16
如何实现使用md富文本编辑器在线编辑并保存为最新的md文件，可以使用开源的Markdown编辑器，如Editor.md。 1. 下载Editor.md，并将相关文件导入到你的项目中。 2. 在index.html文件中添加Editor.md相关的CSS和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值