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. SQL Server 提供的各种数据访问接口

    在创建SQL Server的链接服务器时,可以看到有如下几种访问接口,其中我们常用的只有1.3.4.6.其中4是安装Oracle客户端才会出现的接口,3.6是由于我电脑上装了2008R2和2012两个 ...

  2. 关于SqlServer数据表操作

    --修改表字段长度alter table Tbl_Count_User_Ref ALTER COLUMN CountName nvarchar(500);新增字段alter table 表名 add ...

  3. c/c++ 重载运算符的思考

    c/c++ 重载运算符的思考 #include <iostream> using namespace std; class Imaginary{ public: Imaginary():r ...

  4. iOS 验证码按钮倒计时

    在app 注册或者登录 需要验证码的地方.为了避免短时间内刷验证码.往往会加上一层验证. 倒计时结束后.可以重新获取! 代码实现如下: // _CountdownTime 倒计时总时间: //_tim ...

  5. jQuery中 对标签元素操作（1）

    一:创建元素节点(添加) 创建元素节点并且把节点作为元素的子节点添加到DOM树上    append(): 在元素下添加元素    用法:$("id").append(" ...

  6. LeetCode算法题-Path Sum III（Java实现）

    这是悦乐书的第227次更新 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第94题(顺位题号是437).您将获得一个二叉树,其中每个节点都包含一个整数值.找到与给定值相加的路径数 ...

  7. 【2018.10.11 C与C++基础】C Preprocessor的功能及缺陷（草稿）

    一.前言及参考资料 C Preprocessor即所谓的C预处理器,C++也继承了C的预处理程序,但在C++语言的设计与演化一书中,C++的设计者Bjarne Strustrup提及他从未喜欢过C预处 ...

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

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

  9. Python编码问题小结

    开门见山 decode的作用是将其他编码的字符串转换成Unicode编码,如str1.decode('gb2312'),表示将gb2312编码的字符串str1转换成Unicode编码. encode的 ...

  10. 【HNOI2013】切糕

    [HNOI2013]切糕 Sample Input 2 2 2 1 6 1 6 1 2 6 2 6 Sample Output 6 \(P,Q,R≤40,0≤D≤R\) 参考:https://blog ...