文本编辑需要帮助

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”功能：如果使用“bold”作为命令

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

所以：

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

特别是，这条线例如，HTML将被修改并以粗体显示。

这里有一些文档：

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

和命令的可能列表，如果你想用同样的方式来扩展它：

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