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()"><iclass="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()" ><iclass="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")@ResponseBodypublic 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();}}}

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

  1. 保存富文本编辑器内容

    在这里我使用的是layUI的layedit模块,layUI中的富文本编辑器模块. 第一步我们先将页面搭建好,引入layui.layedit模块和layui.form模块.form模块可用于表单的数据验 ...

  2. 微信小程序加载并且编译显示富文本编辑器内容

    微信小程序如何加载并且显示百度编辑器中的内容 一. 下载wxParse文件夹放在根目录下(可以随意更改位置,只要后续能引入成功即可) 二. 在js文件中引入wxParse.js var WxParse ...

  3. java导出富文本到word_富文本编辑器内容实现word导出下载，请各位大神们指点，感激不尽...

    展开全部 给个我之前的写的例子给你action 层public ActionForward dataExport(ActionMapping mapping, ActionForm form, Htt ...

  4. VUE渲染富文本编辑器内容

    <div v-html="bk.bkContent"></div> bk.bkContent为content

  5. 获取富文本编辑器的纯文本内容

    发布新闻等信息时,必然会用到富文本编辑器.然而我们在前端页面展示的时候,可能需要把内容文字提取出来,作为简介使用:又或者把图片提取一张作为封面图片使用. 解决方案: 1 提取文本或者封面图片存入数据库 ...

  6. wangeditor html编辑,Vue整合wangEditor富文本编辑器

    最近在做项目时,客户有个发布新闻动态的功能,具体页面内容让客户自己编写,所以要选择富文本编辑器,这样用户体验好一点.网上有很多的富文本编辑器, 因为项目的功能并不是很复杂,所以选择了wangEdito ...

  7. Django框架—富文本编辑器

    借助富文本编辑器,网站的编辑人员能够像使用offfice一样编写出漂亮的.所见即所得的页面 此处以tinymce为例,其它富文本编辑器的使用也是类似的 在虚拟环境中安装包 pip install dj ...

  8. 小程序开发笔记（二）：微信小程序富文本编辑器editor的使用

      小程序在去年5月的 v2.7.0 版本新增了组件editor富文本编辑器,但对于像我这种开发新手,要熟练使用还是有一定难度.所以记录一下我的学习过程,希望对大家有帮助.   小程序有详细的微信开发 ...

  9. ue富文本编辑器使用

    对于富编辑器 的查看功能属性 var ue = UE.getEditor('heditor');                        //可编辑状态 var ue1 = UE.getEdit ...

最新文章

  1. 2022-2028年中国场景金融行业深度调研及投资前景预测报告
  2. win7实用技巧之十——卷影副本
  3. java接口有非抽象方法_如果一个类没有实现Java接口的所有抽象方法，会发生什么？...
  4. html中的异步请求数据格式,解决layui中table异步数据请求不支持自定义返回数据格式的问题...
  5. Mybatis一级缓存、整合第三方缓存ehcache、Mybatis二级缓存
  6. 运行时修改Standard shader的Mode
  7. python语言的变量随时_python的变量和简单的数据类型
  8. 主成分分析逆变换_主成分分析方法操作
  9. aspcms用mysql_aspcms分类列表调用的几个实例
  10. “去中心化”和“分布式”的区别
  11. 基因家族分析⑤：进化树构建
  12. .net6智能提示设置为中文
  13. 算法笔记胡凡 7.3.4 连接各点时代码有误
  14. BUU刷题记-网鼎杯专栏2
  15. MVG读书笔记——单应矩阵估计这件小事（一）
  16. 第二代计算机主要应用领域转为____.,计算机应用基础知识2解答.doc
  17. word文档怎么左右一分为二_怎么把word文档分成左右两部分
  18. 推荐一个无版权图片网站
  19. 多电脑屏幕共享键盘鼠标之Synergy1.8.8稳定版Windows-Mac-Linux下载安装使用
  20. 【移动终端应用开发】实验1：SharedPreferences的应用

热门文章

  1. hisi芯片gdp调试
  2. VMware Workstation 15 语言修改
  3. Ubuntu 20.04 vmware-tools segmentation fault 解决
  4. pojo层，Dao层，Mapper层，service层，controller层
  5. 每天读一点儿APM(PIX)代码之四：minimosd
  6. 2021年巴西icpc重现赛补题
  7. 计算机系统分为哪三类,计算机总线分为哪三种？,计算机的三类总线
  8. h5手机端页面自适应屏幕大小 rem
  9. 了解区块链延迟和吞吐量
  10. iOS13 设置LaunchScreen启动图片过程中黑屏