Froala添加自定义代码前按钮(Froala add custom pre code button

我试图创建一个与代码按钮Froala编辑器，可以通过按下basicly做同样的事情，在这里SO CNTRL+K 。现在，我想我有两个选择。

第一个是编辑froala-editor.js内文件，因为Froala已经有一个“代码”按钮，这仅仅增加了<pre>标记。如果我能以某种方式得到它也添加<code>标签，问题就迎刃而解了。不幸的是我没有得到这个工作。

第二个选择是创建一个自定义按钮，所以到目前为止，我有这段代码：

$('textarea[name="description"]').editable({
    //Settings here
    customButtons: {
        insertCode: {
            title: 'Insert code',
            icon: {
                type: 'font',
                value: 'fa fa-code'
            },
            callback: function() {
                this.saveSelection();

                if (!this.selectionInEditor()) {
                    this.$element.focus(); // Focus on editor if it's not.
                }

                var html = '<pre><code>' + this.text() + ' </code></pre>';

                this.restoreSelection();
                this.insertHTML(html);
                this.saveUndoStep();
            }
        }
    }
});

它的工作原理莫名其妙，但它的越野车，并产生奇怪的HTML像这样：

<p><code></code>
  <pre><code>asdasdasdasd
</code></pre>
</p>

与能完成这一操作对于任何一种选择一个或两个的任何帮助，将不胜感激。

如果升级到1.2.3版本，可在Github上的代码应工作https://github.com/froala/wysiwyg-editor 。这是没有必要保存/恢复的选择。

稍后编辑：下面是它的jsfiddle http://jsfiddle.net/9pmmg1jk/ 。

customButtons: {
  insertCode: {
    title: 'Insert code',
      icon: {
        type: 'font',
          value: 'fa fa-code'
      },
        callback: function() {
          if (!this.selectionInEditor()) {
            this.$element.focus(); // Focus on editor if it's not.
          }

          var html = '<code>' + (this.text() || '&#8203;') + '<span class="f-marker" data-type="false" data-id="0" data-fr-verified="true"></span><span class="f-marker" data-type="true" data-id="0" data-fr-verified="true"></span></code>';

          this.insertHTML(html);
          this.restoreSelectionByMarkers();
          this.saveUndoStep();
        }
  }
}