javascript - 需要文本编辑器帮助

Question

我遇到了这个编辑器:http://jsfiddle.net/RRBHw/22/

我的问题是这些值(粗体、斜体、无序列表)从何而来？我所看到的只是

         <p>\
                <a href='#' class='bold'>Bold</a>\
                <a href='#' class='italic'>Italic</a>\
                <a href='#' class='unorderedlist'>List</a>\
            </p></div></div>");

                $('.bold', tb).click(function () {
                    formatText('bold');
                    return false;
                });
                $('.italic', tb).click(function () {
                    formatText('italic');
                    return false;
                });
                $('.unorderedlist', tb).click(function () {
                    formatText('insertunorderedlist');
                    return false;
                });

看起来不对，但它有效。但话又说回来，我如何向它添加更多选项(例如 h1、下划线)？

Answer 1

您应该看一下同一代码中的“formatText”函数:

 function formatText(command, option) {
    iframe.contentWindow.focus();
    try {
      iframe.contentWindow.document.execCommand(command, false, option);
    } catch (e) {
       console.log(e);
    }
    iframe.contentWindow.focus();
 }

特别是这一行:

iframe.contentWindow.document.execCommand(command, false, option);

因此，如果您使用“bold”作为命令，HTML 将被修改并以粗体显示。

这里有一些文档:

https://developer.mozilla.org/en-US/docs/Web/API/document/execCommand

如果您想使用相同的方式扩展它，还有可能的命令列表:

https://developer.mozilla.org/en-US/docs/Web/API/document/execCommand#Commands