Froala添加自定义预编码按钮 [英] Froala add custom pre code button

问题描述

我正在尝试使用 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版本，您的代码应该可以运行

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添加自定义预编码按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！