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();

        }

    }

}

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

  1. 【ThinkPHP学习】ThinkPHP自己主动转义存储富文本编辑器内容导致读取出错

    RT. ThinkPHP的conf文件里的Convention.php有一个配置选项 'DEFAULT_FILTER' => 'htmlspecialchars', // 默认參数过滤方法 用于 ...

  2. vue-quill-editor富文本编辑器 中文翻译组件，编辑与展示

    vue项目中用到了富文本编辑器,网上找了一些,觉得vue-quill-editor最好用, ui简洁,功能也好配,够用了,文档不好读,有些小细节需要自己注意,我懒得分析,就封装成了组件 大家用的时候直 ...

  3. 富文本编辑器 KindEditor 的基本使用 文件上传 图片上传

    富文本编辑器 KindEditor 富文本编辑器,Rich Text Editor , 简称 RTE , 它提供类似于 Microsoft Word 的编辑功能. 常用的富文本编辑器: KindEdi ...

  4. 在elementui表单中实现对vue-quill-editor富文本编辑器内容的绑定

    1.v-model(表单标签双向绑定指令) v-model相当于:value=""和@input=""的结合 代码1: <input type=" ...

  5. springboot中使用kindeditor富文本编辑器实现博客功能

    kindeditor在之前已经用过,现在在springboot项目中使用.并且也在里面使用了图片上传以及回显等功能. 其实主要的功能是图片的处理:kindeditor对输入的内容会作为html标签处理 ...

  6. Java-Swing中使用Web富文本编辑器

    资料下载 (截取出了邮件发送的功能.) 2018/11/10 因为要 win7 电脑 IE 8 的原因,使用了 jxBrower 拓展,更容易使用,参考链接(推荐) 问题介绍 window客户端软件的 ...

  7. UMeditor百度富文本编辑器的使用

    批量上传的图片在线管理没法查看图片 是因为jar包本身的Bug,这里暂时做了个替换展示.就是找到Img.js  然后搜索 img.set 替换下就好了 var url=list[i].url ;    ...

  8. 富文本编辑器、全文检索和django发送邮件

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

  9. django的admin或者应用中使用KindEditor富文本编辑器

    由于django后台管理没有富文本编辑器,看着好丑,展示出来的页面不美观,无法做到所见即所得的编辑方式,所以我们需要引入第三方富文本编辑器. 之前找了好多文档已经博客才把这个功能做出来,有些博客虽然写 ...

随机推荐

  1. 初识Spring Boot

    ​ 1.Spring Boot简介 Spring Boot是由Pivotal团队提供的全新框架,用于简化基于Spring的搭建与开发过程,通过少量的代码创建Spring应用. 2.Spring Boo ...

  2. Android Studio插件GsonFormat

    GsonFormat插件用于在androidStudio 根据json自动生成class的字段和方法,极大提高了开发效率 一.安装GsonFormat插件 二.重启Android Studio,新建一 ...

  3. MySQL多表更新的一个坑

    简述 MySQL支持update t1,t2 set t1.a=2;这种语法,别的关系数据库例如oracle和sql server都不支持.这种语法有时候写起来挺方便,但他有一个坑. 测试脚本 dro ...

  4. 第十四届智能车培训 PLL锁相环

    什么是锁相环? PLL(Phase Locked Loop): 为锁相回路或锁相环,用来统一整合时脉讯号,使高频器件正常工作,如内存的存取资料等.PLL用于振荡器中的反馈技术. 许多电子设备要正常工作 ...

  5. JDK动态代理和cglib代理详解

    JDK动态代理 先做一下简单的描述,通过代理之后返回的对象已并非原类所new出来的对象,而是代理对象.JDK的动态代理是基于接口的,也就是说,被代理类必须实现一个或多个接口.主要原因是JDK的代理原理 ...

  6. java继承-super的用法

    继承的特点: 1.子类继承了父类的成员 2.具有层次结构 继承的优点: 1.代码重用 2.父类字段和方法可用于子类 3.从抽象到具体形成类的继承体系 4.可以轻松自定义子类 this:当前对象的引用 ...

  7. 一入python深似海--class

    python class 分为三个部分:class and object(类与对象),inheritance(继承),overload(重载)and override(覆写). class and o ...

  8. bootstrap-table 分页

    bootstrap-table   <!DOCTYPE html> <head> <meta charset="UTF-8"/> <tit ...

  9. tensorflow中的name_scope, variable_scope

    在训练深度网络时,为了减少需要训练参数的个数(比如LSTM模型),或者是多机多卡并行化训练大数据.大模型等情况时,往往就需要共享变量.另外一方面是当一个深度学习模型变得非常复杂的时候,往往存在大量的变 ...

  10. WiFi-ESP8266入门http（3-3）网页认证上网-post请求-ESP8266程序

    第一版 原型系统 连上西电的网 直接发送上网的认证信息 返回认证结果网页 成功上网 #include <ESP8266WiFi.h> #define Use_Serial Serial s ...