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. 解决ubuntu下，QQ重启后出现个人文件夹已被占用的问题

    首先,是wine QQ的安转教程:Wine安装最新版QQ(8.9.2)的简单教程 - Powered by Discuz! 里面作者也提到了关于重启后出现个人文件夹被占用的情况. 如下: 这里,如果不 ...

  2. vCenter server 的部署和实施

    上一次我们讲解了vclient 5.5 的安装以及连接ESXI5.5,但vclient只能管理一台ESXI,管理多台还需要切换登陆,非常麻烦.所以这次我们就来讲解一下vcenter server的相关 ...

  3. Shell and DOS

    long long ago 自己便想总结下shell命令以及dos常用的命令,毕竟实际实践中会经常用到,用的好的批处理或者shell脚本会事半功倍,好了,废话不多说,开始. shell echo [字 ...

  4. 《Java大学教程》—第18章 高级图形编程

    自测题:1.    在图形应用程序中为用户提供选择的多种方式:P433下拉菜单(pull-down menu).弹出式菜单(pop-up menu).对话框窗口(dialogue window).单选 ...

  5. Teradata的DBQL使用

    1.赋权 grant exec on DBC.DBQLAccessMacro to Sysdba with grant option; 2.刷新DBQL或TDWM缓存到磁盘,立即能在数据库中查询到刚刚 ...

  6. aliyun mysql

    https://segmentfault.com/q/1010000009603559?sort=created

  7. spring cloud(Greenwich.M2) hystrix dashboard 报/actuator/hystrix.stream 404 Not Found的问题

    consumer端不引用spring-boot-starter-actuator的情况 Consumer端会报Unable to connect to Command Metric Stream.新建 ...

  8. 轮播图插件swiper 的使用

    引入文件(注:目前版本号为Swiper3.x) <link rel="stylesheet" type="text/css" href="//s ...

  9. MySQL高级知识（九）——慢查询日志

    前言:慢查询日志是MySQL提供的一种日志记录,它记录MySQL中响应时间超过阈值的语句,具体指运行时间超过long_query_time值的sql语句,该sql语句会被记录到慢查询日志中.慢查询日志 ...

  10. Linux之命令进阶

    Linux系统的启动过程 1.开机自检 BIOS2.MBR引导3.GRUB菜单4.加载内核5.运行init进程6.从/etc/inittab读取运行级别7.根据/etc/rc.sysinit 初始化系 ...