使用JavaScript使选定文本加粗/斜体/下划线，并使用C#保存和检索相同的文本。

Question

使用JavaScript使选定文本加粗/斜体/下划线，并使用C#保存和检索相同的文本。

5

我需要使用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。

- DotnetDude

我刚刚偶然发现了这个帖子，想让你们知道这篇在SO上的帖子可能会对你有所帮助。 - luk2302

2个回答

1

document.execCommand("bold", false, null); 这是我在所有浏览器中使用的最简单的技巧...

- Sagar Kadam

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joakim · Accepted Answer

这里有一个问题可以回答你如何获取高亮文本：如何在文本区域中获取所选文本？要使所选文本加粗，您需要使用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);
});