有 Java 编程相关的问题?

你可以在下面搜索框中键入要查询的问题!

java在Struts2中,如何以HTML格式正确显示文本(从文本区域收集的文本)?

现在我正在学习建立一个简单的bbs系统,人们可以在这个系统的文本区域发布文章。 问题是当我显示字符串时,格式会丢失

我知道如果输出一个带有<s:property/>的字符串,默认情况下它是html转义的(我猜Struts似乎使用ApacheCommons.lang.StringEscapeUtils)。但它不会从“”转义到&nbsp;。此外,它不会将“/n”转换为<br/>

我该怎么办

顺便问一下,如何实现富文本编辑器(如stackoverflow中使用的文本编辑器)


共 (3) 个答案

  1. # 1 楼答案

    我建议你最好不要依赖文本区域,最好使用某种文本编辑器。 有很多java脚本文本编辑器,您不需要额外的东西就可以将它们集成到现有的S2应用程序中。 几乎没有选择

    1. Tinymce
    2. CKEditor
  2. # 2 楼答案

    在文本区域编辑HTML,jQ显示结果(不是OP中的Struts2 req)

    抱歉,这是一个jQuery实现,而不是OP O_O中要求的Struts2。希望它能为Struts2用户提供一个起点

    它有几个控制按钮,可以在文本区域和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编辑器有一些巧妙的格式,超出了我想在显示器中实现的范围

  3. # 3 楼答案

    因为这样做不是逃避,而是改变

    如果你想把空格改成&nbsp;\n改成<br/>,你需要自己动手