Bootstrap所见即所得编辑器和语法高亮

Question

我正在尝试为Bootstrap所见即所得编辑器创建一个新的功能，用于插入highlightjs源代码，但是未能成功。

在官方页面（github）上，我找到了一些关于自定义和execCommand的句子，但我不知道如何实现。

有人可以帮忙吗？

编辑： 我已经成功地在工具栏上添加了一个按钮:

<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" title="insertCode"><i class="icon-code"></i>&nbsp;<i class="icon-angle-down icon-on-right"></i></a> 
<ul class="dropdown-menu dropdown-light"> 
    <li><a data-edit="insertCode c">C/C++</li>
    <li><a data-edit="insertCode php">PHP</li>
</ul>

我尝试编辑bootstrap-wysiwyg.js文件，如下：

(function(b) {
   var insertCode = function (language) {
       var preElem = document.createElement("pre"),
       var codeElem = document.createElement("code");
       codeElem.className = language;
   }
...
...

但是我不知道如何完成这个。但在此之前，我无法运行此方法。

编辑2：：目前我已经更换了我的编辑器为summernote，因为我不知道如何解决这个问题。

- Kolesar

---

我试图将自定义函数insertCode添加到bootstrap-wysiwyg.js文件中，但不幸的是我不知道如何操作，因为无论如何都会出现错误。在Mozzila的execCommand页面上，我没有找到任何示例:( - Kolesar

Answer 1

要添加一个按钮，使其可以将所选内容格式化为代码，您可以在工具栏中添加类似于此的链接。

<a class="btn" data-edit="formatBlock pre" title="Code"><i class="icon-cog"></i></a>

然而，我无法使用 highlightjs 让它正常工作。我不确定 highlightjs 是否能够捕获在初始化时不存在的新的 pre 标签。另一个问题是，我提供的按钮将代码包装在 <pre> 标签中，而不是 <pre><code> 标签。

这可能已经足够让你开始了。

- Frank Riccobono