Button Froala添加自定义预编码按钮

我正在尝试用编辑器创建一个代码按钮，它可以通过按

CNTRL+K

来完成与这里基本相同的操作。现在我想我有两个选择

第一个是编辑froala-editor.js文件，因为froala已经有一个“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();
            }
        }
    }
});

这是restoreSelection（）；
这个.insertHTML（html）；
这个.saveUndoStep（）；
}
}
}
});

它在某种程度上起作用，但它有缺陷，并生成奇怪的html，如下所示：

---

如果您能为选项1或选项2提供帮助，我们将不胜感激。

如果您升级到Github上提供的1.2.3版，您的代码将正常工作。无需保存/恢复所选内容

---

稍后编辑： 这里有一个JSFIDLE

自定义按钮：{
插入代码：{
标题：“插入代码”，
图标：{
键入：“字体”，
值：“固定资产代码”
},
回调：函数（）{
如果（！this.SelectionEditor（））{
此.$element.focus（）；//如果编辑器不是，则将焦点放在编辑器上。
}
var html=“
”+（this.text（）| |“​；”）+“
”；
这个.insertHTML（html）；
这是。restoreSelectionByMarkers（）；
这个.saveUndoStep（）；
}
}
}

有人有什么建议吗？也许是另一个所见即所得的编辑？谢谢你的回答。我手动将JS文件替换为GitHub中的新文件。我还删除了行

this.saveSelection（）

和

this.restoreSelection（）

。当我点击自定义按钮时，我得到了HTML:

。所以它不起作用了。如果可能的话，我希望它与默认的“code”按钮一样工作，它目前也会去掉

标记，但只添加

标记，而不是

标记。我希望我能对你有所帮助，提前谢谢你！我编辑了评论并添加了一个JSFIDLE，您可以从这里开始。非常感谢，这非常有效。我还可以轻松添加
标记。我喜欢Froala编辑器，它有我需要的一切。您能解释一下标记跨距的作用吗？是的，它们将光标与
this.restoreSelectionByMarkers（）一起放在
标记内。附带的小提琴手可以是一个更简洁的工具
$('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();
            }
        }
    }
});