javascript - HTML如何让用户输入粗体或斜体？

Question

问题是：我正在开发一个带有粗斜体按钮的简单文本编辑器。我看过很多教程，它们改变了文本的选择。在文本选择过程中，用户首先必须输入非格式化文本，然后选择它，然后单击粗体或斜体按钮来格式化文本。

但是，我想为用户提供打开粗体或斜体按钮的功能，然后在他们键入时完成所有文本格式设置。

我目前正在使用.designMode打开变量的 iframe。目前，我的实现只支持文本选择格式，但我也想实现实时文本格式。

这是html：

             <div id="textEditor">
                <div id="ribbon">
                    <button id="boldButton" title="Bold"><b>B</b></button>
                    <button id="italicButton" title="Italic"><em>I</em></button>
                </div>

                <div id="richTextArea">
                    <iframe id="wysiwyg" name="wysiwyg" frameborder="0"></iframe>
                </div>
            </div>

这是相应的脚本（javascript）：

window.addEventListener("load", function() {
    var editor = wysiwyg.document; //wysiwyg iframe has name="wysiwyg"
    editor.designMode = "on";

    boldButton.addEventListener("click", function() {
        //when bold button is clicked, execCommand turns the text selection to bold
        editor.execCommand("Bold", false, null); 

    }, false);

    italicButton.addEventListener("click", function() {
        //when bold is clicked, bold the selected text
        editor.execCommand("Italic", false, null);
    }, false);
}, false);

标签： javascripthtmlwysiwyg