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. Android内嵌VLC实现播放网络视频，网络音频

    1.在对应模块的build.gradle文件中,添加依赖 //VlC implementation "de.mrmaffen:vlc-android-sdk:2.0.6" 2.布局 ...

  2. Kibana查询

    查询lyad账号操作AD账号的操作: Category:"用户帐户管理" AND SubjectUserName:"lyad" 查询对账号zhangsan进行的 ...

  3. cp 拷贝

    cp -a = cp -pdr p (preserve 保持)  复制时保持文件原有的属性(preserve) 模式 所有权 时间戳 d 连接文件 no dereference 复制时拷备连接文件的属 ...

  4. Kernel数据结构移植（list和rbtree）

    主要移植了内核中的 list,rbtree.使得这2个数据结构在用户态程序中也能使用. 同时用 cpputest 对移植后的代码进行了测试.(测试代码其实也是使用这2个数据结构的方法) 内核代码的如下 ...

  5. May 31. 2018 Week 22nd Thursday

    The good seaman is known in bad weather. 惊涛骇浪,方显英雄本色. As we all know, the true worth of a person is ...

  6. 在Ubuntu 12.04下创建eclipse的桌面链接

    在Ubuntu 12.04下创建eclipse的桌面链接 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 在Ubuntu 12.04上安装Hadoop并 ...

  7. 【Window Power Shell】介绍与使用

    Windows PowerShell 是专为系统管理员设计的新 Windows 命令行脚本环境,主要实现系统和应用程序管理自动化. 1.发展历史 在2002年,微软开始研究一个新的产品叫做”Monad ...

  8. 比MR至少快5倍的神器，竟然是它

    Hive简介 Hive是一个基于 Hadoop 的开源数据仓库工具,用于存储和处理海量结构化数据.它最初是应Facebook对每天产生的海量新兴社会网络数据进行管理和机器学习的需求而产生和发展的,Hi ...

  9. 12个 Linux 中 grep 命令的超级用法实例

    12个 Linux 中 grep 命令的超级用法实例 你是否遇到过需要在文件中查找一个特定的字符串或者样式,但是不知道从哪儿开始?那么,就请grep来帮你吧. grep是每个Linux发行版都预装的一 ...

  10. 为什么二流程序员都喜欢黑php？

    为什么二流程序员都喜欢黑php? 为什么程序员都喜欢黑php?这个嘛!你骂一句php是垃圾试试,保准php程序员不揍扁你!这就好像自己的母校,纵然有很多不好的地方,但是只允许自己调侃,不允许外人骂半句 ...