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. NPOI导入导出Excel工具类

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Ref ...

  2. Windows Server 2016-管理Active Directory复制任务

    Repadmin.exe可帮助管理员诊断运行Microsoft Windows操作系统的域控制器之间的Active Directory复制问题. Repadmin.exe内置于Windows Serv ...

  3. 4. svg学习笔记-文档结构元素和样式的使用

    svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素 如果我们仅 ...

  4. IO测试工具之fio详解

    目前主流的第三方IO测试工具有fio.iometer和Orion,这三种工具各有千秋. fio在Linux系统下使用比较方便,iometer在window系统下使用比较方便,Orion是oracle的 ...

  5. C++多线程同步技巧（一） --- 临界区

    简介 C++中关于多线程的内容对于构建工程来说是至关重要的,C++本身也对关于多线程的操作提供了很好的支持.本章笔者就来介绍一下C++有关于多线程的重要知识点---临界区. 临界区的作用 线程就像是进 ...

  6. 解决ubuntu下，QQ重启后出现个人文件夹已被占用的问题

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

  7. Linux 小知识翻译 - 「/proc 文件夹」

    这次聊聊 「/proc 文件夹」. /proc 文件夹用来保管系统状态相关的文件的特殊文件夹,这个文件夹中有的文件只是内存上的虚拟文件. /proc 文件夹下有些文件可以反映各个进程的运行状态.所以说 ...

  8. jquery.qrcode.js 生成二维码并支持中文的方法

    GitHub地址: https://github.com/jeromeetienne/jquery-qrcode <div class="QR"></div> ...

  9. GMM算法的matlab程序（初步）

    GMM算法的matlab程序 在https://www.cnblogs.com/kailugaji/p/9648508.html文章中已经介绍了GMM算法,现在用matlab程序实现它. 作者:凯鲁嘎 ...

  10. Java中使用elasticsearch搜索引擎实现简单查询、修改等操作-已在项目中实际应用

    以下的操作环境为:jdk:1.8:elasticsearch:5.2.0 maven架包下载坐标为: <dependency> <groupId>org.elasticsear ...