在 Struts2 中，如何以 HTML 格式正确显示文本（从文本区域收集）？答案

【问题标题】：In Struts2, how can I display text(which is gathered from a textarea) properly in HTML format?在 Struts2 中，如何以 HTML 格式正确显示文本（从文本区域收集）？
【发布时间】：2020-07-15 03:20:05
【问题描述】：

现在我正在学习构建一个简单的 bbs 系统，人们可以在该系统中在 textarea 中发布文章。问题是当我显示字符串时，格式丢失了。

我知道如果你输出一个带有<s:property/> 的字符串，它默认是 html-escaped（我猜 Struts 似乎使用 apache commons.lang.StringEscapeUtils）。但它不会将 ' ' 转义为 &nbsp;。此外，它不会将“/n”翻译成<br/>。

我该怎么办？

顺便问一下，如何实现一个富文本编辑器（比如stackoverflow中使用的文本编辑器）？

【问题讨论】：

标签： java html jsp struts2

【解决方案1】：

我建议你最好不要依赖文本区域，最好使用某种文本编辑器。那里有很多 java-script 文本编辑器，您不需要任何额外的东西来将它们集成到您现有的 S2 应用程序中。几个选项是

【讨论】：

非常感谢。我会立即尝试！ :)

【解决方案2】：

因为这样做不是逃避，而是转变。

如果您想将空格更改为&nbsp; 和\n 为<br/>，您需要自己进行。

【讨论】：

【解决方案3】：

在 textarea 中编辑 HTML，jQ 显示结果（OP 中不是 Struts2 req）

抱歉，这是 OP O_o 中请求的 jQuery 实现 vs Struts2。希望它能给 Struts2 用户一个起点？

这有一些控制按钮的格式，由 textarea 中的快捷键组合和动态显示更改的 div 支持。

<head>
    <title>Text Editor (test)</title>
<script type="text/javascript" src="../lib/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    updCont();
    var ht = window.innerHeight - $("#dvInput").css("height").replace(/[^.0-9]/g, '') - 30;
    $("#dvCont").css("height", ht + "px");
    $("#txtCont").keydown(function(e){
        var curKey = e.which ? e.which : e.key;
        if(e.ctrlKey && e.shiftKey){
            if([56,190,54].indexOf(curKey)>-1)
                e.preventDefault ? e.preventDefault() : (e.returnValue = false);
            if(curKey == 56) fmt("bull");// *
            else if(curKey == 190) fmt("indnt");// >
            else if(curKey == 54) fmt("para");// ^
        }else if(e.ctrlKey){
            if([66,73,13].indexOf(curKey)>-1)
                e.preventDefault ? e.preventDefault() : (e.returnValue = false);
            if(curKey == 66) fmt("bld");// B
            else if(curKey == 73) fmt("ital");// I
            else if(curKey == 13) fmt("crlf");// [enter]
        }
        updCont();
    });
    $("#inp").keydown(function(e){alert(e.which)})
});
function updCont(){
    $("#dvCont").html($("#txtCont").val());
}
function fmt(inAct){
    var oTxt = $("#txtCont");
    var s = oTxt[0].selectionStart;
    var e = oTxt[0].selectionEnd;
    var raVal = [oTxt.val().substring(0, s), oTxt.val().substring(s, e), oTxt.val().substring(e), s, e];
    var ofstStart = 0;
    var ofstEnd = 0;
    if(inAct=="bld"){
        oTxt.val(raVal[0] + "<b>" + raVal[1]  + "</b>" + raVal[2]);
        //if you don't want text selected, add raVal[1].length to ofstStart 
        ofstStart = 3;
        //uncomment if you want cursor after closing tag (and note also ofstStart same point to unselect)
        //ofstEnd = 4;
    }else if(inAct=="ital"){
        oTxt.val(raVal[0] + "<i>" + raVal[1]  + "</i>" + raVal[2]);
        ofstStart = 3;
        //ofstEnd = 4;
    }else if(inAct=="indnt"){
        oTxt.val(raVal[0] + "<div class='dnt'>" + raVal[1]  + "</div>" + raVal[2]);
        ofstStart = 17;
        //ofstEnd = 5;
    }else if(inAct=="bull"){
        oTxt.val(raVal[0] + "<br />&nbsp; &bull; " + raVal[1]  + raVal[2]);
        ofstStart = 20;
    }else if(inAct=="para"){
        oTxt.val(raVal[0] + "<p>" + raVal[1]  + "</p>" + raVal[2]);
        ofstStart = 3;
        //ofstEnd = 4;
    }else if(inAct=="href"){
        oTxt.val(raVal[0] + "<a href='' class='' title=''>" + raVal[1]  + "</a>" + raVal[2]);
        ofstStart = 29;
        //ofstEnd = 4;
    }else if(inAct=="crlf"){
        oTxt.val(raVal[0] + "<br />" + raVal[1]  + raVal[2]);
        ofstEnd = 5;
    }
    updCont();    
    oTxt[0].selectionStart = s + ofstStart;
    oTxt[0].selectionEnd = s + ofstStart + raVal[1].length;
    oTxt[0].focus();
}
</script>
<style>
.dnt{margin-left:40px;}
.styleBtn{width:20px;margin:2px 10px;border:1px solid black; padding:1px 7px;background-color:#EEE;float:left;text-align:center;}
</style>
</head><body>
<div id="dvInput">
<div style="border:1px solid black;border-radius:5px;background-color:silver;font-weight:bold;padding:2px 5px;float:left;">
    <div style="float:left;margin:2px 20px;">Text Input:</div>
    <span onclick="fmt('bld');" title="CTRL+B: Bold selected text">
        <div class="styleBtn"><b>B</b></div>
    </span>
    <span onclick="fmt('ital');" title="CTRL+I: Italicize selected text">
        <div class="styleBtn"><i>I</i></div>
    </span>
    <span onclick="fmt('indnt');" title="CTRL+Shift+>: <div> Indent a selected block of text\n(No remove shortcut.\nManually delete <div></div> to undo/outdent)">
        <div class="styleBtn">></div>
    </span>
    <!-- <span onclick="fmt('outdnt');">&lt;</span> -->
    <span onclick="fmt('bull');" title="CTRL+Shift+*: Bullet (and new line)">
        <div class="styleBtn">&bull;</div>
    </span>
    <span onclick="fmt('para');" title="CTRL+Shift+^: Paragraph <p> around highlighted/selected text">
        <div class="styleBtn">&para;</div>
    </span>
    <span onclick="fmt('crlf');" title="CTRL+Enter: New Line <br>">
        <div class="styleBtn">&ldsh;</div>
    </span>
    <span onclick="fmt('href');" title="CTRL+Shift+A: <a href>">
        <div class="styleBtn">&lt;a></div>
    </span>
<!-- <input id="inp" size="2">-enter char, get ascii number -->
</div>
<textarea id="txtCont" rows="10" style="width:100%;">
</textarea><br />
</div>
Display:
<div id="dvCont" style="border:1px solid black;border-radius:5px;overflow-y:auto;"></div>
</body>
</html>

StackOverflow 编辑器有一些巧妙的格式，超出了我想在我的显示中实现的范围。

【讨论】：