textarea带格式保存输入的数据

1. 使用富文本summernote

        summernote官网：https://summernote.org/

        同时参考若依SpringBoot项目：RuoYi: 🎉 基于SpringBoot的权限管理系统 易读易懂、界面简洁美观。 核心技术采用Spring、MyBatis、Shiro没有任何其它重度依赖。直接运行即可用

1.1 使用

 1.1.1 引入

<link href="https://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/summernote/0.8.10/summernote.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.js"></script>
<script src="https://cdn.bootcss.com/summernote/0.8.10/summernote.js"></script>
<script src="https://cdn.bootcss.com/summernote/0.8.10/lang/summernote-zh-CN.js"></script>

 还可以参考若依项目进行引入

1.1.2 初始化

Summernote的初始化只需要在页面中创建一个标签（input/textarea/div）承载就OK了。

html

<div class="summernote"></div>
<textarea class="summernote" name="replyContent" required></textarea>

 js

$(document).ready(function () {
    $('.summernote').summernote({
         toolbar: [//自定义头部
         // [groupName, [list of button]]
         ['style', ['bold', 'italic', 'underline', 'clear']],
         ['font', ['strikethrough', 'superscript', 'subscript']],
         ['fontsize', ['fontsize']],
         ['color', ['color']],
         ['para', ['ul', 'ol', 'paragraph']],
         ['height', ['height']]
         ],
         lang: 'zh-CN',//国际化
         focus: true,//焦点
         height: 150,//高度
         tabDisable: true,
         callbacks: {//回调：当设置了ie浏览器禁用backspace按键时使用
             onKeydown: function (e) {
                 e.stopPropagation();
             }
         }
   })
})

1.1.3 取值

var textVal = $('.summernote').summernote('code');//推荐

var textVal = $("[name='replyContent']").val()

1.1.4 赋值

$('.summernote').summernote('code','要赋的值');//推荐

$("[name='replyContent']").val("需要赋的值")

2. 使用文本域textarea或者input

2.1 当设置了全局禁用Tab键时

html

<textarea class="form-control" style="height: 200px;" name="replyContent" onkeydown="addTabOption(this)" required></textarea>

js

function addTabOption(opt){
    if(event.keyCode ===9){
        opt.value = opt.value + "    "//自定义空格个数
        // 阻止默认切换元素的行为
        if (event && event.preventDefault) {
             event.preventDefault()
        } else {
             window.event.returnValue = false
        }
    }
}

有点不合理：比如说我在文字中使用Tab时，会将空格拼接在后面。

2.2 使用replace替换空格、换行等

 function contentInit(val){
     return val.replace(/ /g,'')//替换 
               .replace(/\r\n/g, '<br/>')//替换\r\n
               .replace(/\n/g,'<br\>')//替换\n
               .replace(/\s/g, ' ')//替换空格、&nbsp;
               .replace(/\/n/g,'\n')//替换\n
}

2.3 当后端过滤器中设置了去除数据前后空格、标签时

拼接一个值

var replyContent = "reply"+$("[name='replyContent']").val();
$("[name='replyContent']").val(replyContent)

 在后端控制器中处理掉在保存

String oldStr = replyTemplate.getReplyContent();
String removeStr = "reply";
if(oldStr != null){
    replyTemplate.setReplyContent(oldStr.replace(removeStr,""));
}

3. 其他

3.1 格式化select标签下option的text

$(function () {
    $("#replyRc option").each(function (){
        let txt = $(this).text();
        if(txt != null){
            let data = txt.replace(/&nbsp;/g,'').replace(/\/n/g,'\n').replace(/<br>/g,'\n');
                $(this).text(data)
        }
    })
})