1

我正在尝试使用Froala编辑器创建一个代码按钮，它基本上可以通过按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>

对于选项一或二完成此操作的任何帮助将不胜感激。

4

1 回答 1

2

如果您升级到 Github 上可用的 1.2.3 版本，您的代码应该可以在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();
        }
  }
}
于 2014-10-19T16:15:08.240 回答