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

Question

我正在开发一个 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 文章 = document.getElementById(section); 文章.焦点()； document.execCommand("粗体", false, null);

问题是这在 Internet Explorer 中运行良好，但在 Chrome 中我遇到了问题。当我将焦点设置回 <section> 时标签，它将光标放回到文本的开头。我在某处读到说 onfocus="this.value = this.value;"在控件上，但这无济于事。

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

Answer 1

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

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