textarea带格式保存输入的数据

@孙某人

于 2023-04-11 10:51:17 发布

阅读量775

点赞数

文章标签： spring boot java javascript html

本文链接：https://blog.youkuaiyun.com/weixin_45355769/article/details/130077503

版权

文章介绍了如何在项目中集成和使用Summernote富文本编辑器，包括引入CSS和JS文件，初始化编辑器，设置自定义工具栏，获取和设置值的方法。此外，还讨论了在textarea或input中的使用，以及处理Tab键和空格的策略，并提供了格式化select标签内容的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

$(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>

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(/&nbsp;/g,'')//替换&nbsp;
               .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)
        }
    })
})