button - Froala カスタム プリコード ボタンを追加

Question

Froalaエディターでコード ボタンを作成しようとしています。これは、基本的に SO で を押すことで同じことを行うことができますCNTRL+K。今、私には2つの選択肢があると思います。

最初に froala-editor.js ファイルを編集します。これは、Froala には既に<pre>タグを追加するだけの「コード」ボタンがあるためです。<code>どうにかしてタグも追加することができれば、問題は解決しました。残念ながら、私はこれを機能させませんでした。

2 番目のオプションは、カスタム ボタンを作成することです。これまでのところ、次のコードが用意されています。

$('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のいずれかでこれを行うための助けがあれば大歓迎です。