Froala添加自定义预编码按钮

问题描述

我正在尝试使用 Froala 编辑器创建一个代码按钮，该按钮基本上可以执行与在这里按 CNTRL + K .现在我想我有两个选择.

I'm trying to create a code button with the Froala editor which can basicly do the same thing as here on SO by pressing CNTRL+K. Now I think I have two choices.

第一个是编辑froala-editor.js文件，因为Froala已经具有一个代码"按钮，该按钮仅添加< pre> 标记.如果我能以某种方式获得它并添加< code> 标记，问题就解决了.不幸的是，我没有得到这个工作.

The first one is to edit the froala-editor.js file, because Froala already has a 'code' button which only adds the <pre> tags. If I could somehow get it to also add the <code> tag, problem solved. Unfortunately I didn't get this to work.

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

The second option is to create a custom button, so far I have this piece of 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，如下所示:

It works somehow, but it's buggy and produces strange html like so:

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

对于在第一个或第二个选项中完成此操作的任何帮助，将不胜感激.

Any help with getting this done for either option one or two would be greatly appreciated.

推荐答案

如果升级到Github上可用的1.2.3版本，您的代码应该可以运行 https://github.com/froala/wysiwyg-editor .不必保存/恢复选择.

If you upgrade to version 1.2.3 that is available on Github your code should work https://github.com/froala/wysiwyg-editor. It's not necessary to save/restore selection.

最新这是它的jsFiddle http://jsfiddle.net/9pmmg1jk/.

LATER Here is a jsFiddle for it 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();
        }
  }
}

这篇关于Froala添加自定义预编码按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！