有没有人找到一种方法来愉快地处理 WYSIHTML5 中的代码？

Question

我正在使用基于 WYSIHTML5 (https://github.com/xing/wysihtml5) 的 WYSIHTML5 Bootstrap (http://jhollingworth.github.com/bootstrap-wysihtml5)，它在从网站复制粘贴时清理 HTML 非常棒。

我希望能够将代码处理到编辑器中，然后使用 HighlightJS 突出显示语法。

我创建了一个新按钮并复制了 wysihtml5.js 中使用的方法来打开和关闭粗体 <b>，改用 <pre>：

(function(wysihtml5) {
var undef;

wysihtml5.commands.pre = {
    exec: function(composer, command) {

        return wysihtml5.commands.formatInline.exec(composer, command, "pre");
    },

    state: function(composer, command, color) {

        return wysihtml5.commands.formatInline.state(composer, command, "pre");
    },

    value: function() {
        return undef;
    }
};
})(wysihtml5)

但这还不够。编辑器在编辑时隐藏标签。我需要能够将我的内容包装在<pre>和<code>ie 中。 <pre><code></code></pre>.

这意味着要编写一个与 wysihtml5 使用的函数不同的函数，我不知道如何......谁能帮我解决这个问题？

这是 wysihtml5 中 formatInline 函数的代码：

 wysihtml5.commands.formatInline = {
exec: function(composer, command, tagName, className, classRegExp) {
  var range = composer.selection.getRange();
  if (!range) {
    return false;
  }
  _getApplier(tagName, className, classRegExp).toggleRange(range);
  composer.selection.setSelection(range);
},

state: function(composer, command, tagName, className, classRegExp) {
  var doc           = composer.doc,
      aliasTagName  = ALIAS_MAPPING[tagName] || tagName,
      range;

  // Check whether the document contains a node with the desired tagName
  if (!wysihtml5.dom.hasElementWithTagName(doc, tagName) &&
      !wysihtml5.dom.hasElementWithTagName(doc, aliasTagName)) {
    return false;
  }

   // Check whether the document contains a node with the desired className
  if (className && !wysihtml5.dom.hasElementWithClassName(doc, className)) {
     return false;
  }

  range = composer.selection.getRange();
  if (!range) {
    return false;
  }

  return _getApplier(tagName, className, classRegExp).isAppliedToRange(range);
},

value: function() {
  return undef;
}
};
})(wysihtml5);

Answer 1

从 wysihtml5 的开发者 Christopher 那里得到了答案：

wysihtml5.commands.formatCode = function() {
exec: function(composer) {
var pre = this.state(composer);
if (pre) {
  // caret is already within a <pre><code>...</code></pre>
  composer.selection.executeAndRestore(function() {
    var code = pre.querySelector("code");
    wysihtml5.dom.replaceWithChildNodes(pre);
    if (code) {
      wysihtml5.dom.replaceWithChildNodes(pre);
    }
  });
} else {
  // Wrap in <pre><code>...</code></pre>
  var range = composer.selection.getRange(),
      selectedNodes = range.extractContents(),
      pre = composer.doc.createElement("pre"),
      code = composer.doc.createElement("code");
  pre.appendChild(code);
  code.appendChild(selectedNodes);
  range.insertNode(pre);
  composer.selection.selectNode(pre);
}
},
state: function(composer) {
var selectedNode = composer.selection.getSelectedNode();
return wysihtml5.dom.getParentElement(selectedNode, { nodeName: "CODE" }) && wysihtml5.dom.getParentElement(selectedNode, { nodeName: "PRE" });
}
};

...并将其添加到您的工具栏：

<a data-wysihtml5-command="formatCode">highlight code</a>

非常感谢克里斯托弗！！

Answer 2

我今天 fork bootstrap-wysihtml5 项目并使用 Highlight.js 添加代码高亮支持。

您可以在http://evereq.github.com/bootstrap-wysihtml5查看演示并查看源代码https://github.com/evereq/bootstrap-wysihtml5。它基本上与 Christopher 的代码几乎相同，包括 UI 更改并嵌入在编辑器本身的引导版本中。