javascript - 以编程方式打开html5中可编辑部分的<strong> </strong>

我正在一个HTML5 / javascript / php项目中，我有一个项目设置为可编辑。

我知道用户可以按ctrl + b来使文本变为粗体，但我也希望允许用户单击网页上的相应按钮来执行相同的操作。

即当用户以普通文本键入内容时，他们单击网页上的粗体按钮，然后将<strong>附加到该部分的html，现在输入的内容将保持不变，直到再次按下该按钮，然后附加</strong>。

但是，当我追加<strong>时，它似乎会自动添加</strong>，我想阻止这种情况的发生。我是在以正确的方式进行操作还是有更好的方法可以实现这一目标？

以下是我尝试使用的JavaScript

function enableDisableBold(section)
{
    var boldEnabled = $("#boldEnabled").val();
    var content = $("#" + section).html();
    var newContent;
    if (boldEnabled == "true")
    {
        $("#btnBold").removeClass("formatButtonsActivated");
        $("#boldEnabled").val("false");
        //newContent = content + "</strong>";
        //$("#" + section).html(newContent);
    }
    else
    {
        $("#btnBold").addClass("formatButtonsActivated");
        $("#boldEnabled").val("true");
        newContent = content + "<strong>";
        $("#" + section).html(newContent.replace("</strong>", ""));
    }

    alert($("#" + section).html());
}

感谢您的任何帮助，您可以提供。

更新
我刚刚遇到了另一个解决方案，该解决方案可以实现我想要的功能，但是存在一个小问题。在函数调用的最后，我执行以下代码。

var article = document.getElementById(section);
article.focus();
document.execCommand(“Bold”，false，null);

问题是这在Internet Explorer中工作正常，但是在Chrome中我遇到了问题。当我将焦点重新设置为<section>标记时，它将光标重新置于文本的开头。我在某处读到将onfocus="this.value = this.value;"放在控件上，但这无济于事。

我试图找到一种将光标放回字符末尾的方法，但实际上我需要将光标放回原来的位置。这是可以做的事情吗？

最佳答案

创建一个强大的元素，并将您的内容附加到其中

$('<strong />').append(content);