需要使用javascript將選定的文本設置為粗體/斜體/下划線，並使用c＃保存和檢​​索相同的文本

Question

我需要使用javascript制作文本框粗體/斜體/下划線的選定文本。 為此，我使用以下代碼。

<img src="~/images/Bold"  alt="Bold" onclick="changeFont('TextBox1','b');"  />
<img src="~/images/Italic" alt="Italic" onclick="changeFont('TextBox1','i');"  />
<img src="~/images/Underline" alt="Underline" onclick="changeFont('TextBox1','u');"  />

<script type="text/javascript" language="javascript">
    function changeFont(txt, change) {
        if (change == 'b') {
            if (document.getElementById(txt).style.fontWeight == 'bold')
                document.getElementById(txt).style.fontWeight = 'normal';
            else
                document.getElementById(txt).style.fontWeight = 'bold';
        }
        else if (change == 'i') {
            if (document.getElementById(txt).style.fontStyle == 'italic')
                document.getElementById(txt).style.fontStyle = 'normal';
            else
                document.getElementById(txt).style.fontStyle = 'italic';
        }
        else {
            if (document.getElementById(txt).style.textDecoration == 'underline')
                document.getElementById(txt).style.textDecoration = 'none';
            else
                document.getElementById(txt).style.textDecoration = 'underline';
        }
    }
</script>

但問題是，當我點擊粗體圖像時，它會將整個文本變為粗體而不是所選文本。 它也不適用於其他兩個圖像。

保存文本框的文本時，即使嘗試使用，我也無法獲取包含html標簽的文本

document.getElementById('TextBox1').innerHTML;

我只能獲得文本框的值。

有沒有辦法使用javascript或C＃保存和檢​​索相同的內容

在此先感謝SC

Answer 1

這是一個問題，可以解答您關於獲取突出顯示文本的問題如何在textarea中獲取所選文本？

關於使所選文本變為粗體，您需要使用html標簽或bbcode之類的東西，並在將其打印到頁面時將其解析為html。

編輯： 這是一個顯示jquery插件“fieldselection”的頁面。

編輯2：這是我將如何做到這一點的一個例子： jsfiddle鏈接

HTML：

<input id="bold" type="button" value="B" />
<br />
<textarea id="editor"></textarea>

<div id="resultAsHtml"></div>
<br />
<div id="resultAsText"></div>

javascript（jquery）代碼：

$(document).ready(function() {

    $("#editor").keyup(Update);

    function Update(){
        var text = $(this).val();
        var result = ParseToHtml(text);
        $("#resultAsHtml").html(result);
        $("#resultAsText").text(result);
    }

    $("#bold").click(function(){
        var range = $("#editor").getSelection();
        var textToReplaceWith = "[b]"+ range.text + "[/b]";
        $("#editor").replaceSelection(textToReplaceWith , true);

        var text = $("#editor").val();
        var result = ParseToHtml(text);
        $("#resultAsHtml").html(result);
        $("#resultAsText").text(result);
    });

    function ParseToHtml(text) {
        text = text.replace("[b]", "<b>");
        text = text.replace("[/b]", "</b>");
        text = text.replace("  ","&nbsp;");
        text = text.replace("\n","</br>");
        return text;
    }

    $("#bold").replaceSelection("[b]" + $("#editor").getSelection() + "[/b]", true);
});

Answer 2

document.execCommand（“bold”，false，null）; 這是最簡單的技術，適用於所有瀏覽器......