I'm using WYSIHTML5 Bootstrap ( ), based on WYSIHTML5 ( ) which is absolutely fantastic at cleaning up HTML when copy pasting from websites.

I'd like to be able to handle code into the editor, and then highlight the syntax with HighlightJS.

I've created a new button and replicated the method used in wysihtml5.js to toggle bold <b> on and off, using <pre> instead:

(function(wysihtml5) {
var undef;

wysihtml5mands.pre = {
    exec: function(poser, mand) {

        return wysihtml5mands.formatInline.exec(poser, mand, "pre");
    },

    state: function(poser, mand, color) {

        return wysihtml5mands.formatInline.state(poser, mand, "pre");
    },

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

But that's not enough. The editor hides the tags when editing. I need to be able to wrap my content in both <pre>and <code>ie. <pre><code></code></pre>.

This means writing a different function than the one used by wysihtml5, and I don't know how... Could anyone help me with that?

Here's the code for the formatInline function in wysihtml5:

 wysihtml5mands.formatInline = {
exec: function(poser, mand, tagName, className, classRegExp) {
  var range = poser.selection.getRange();
  if (!range) {
    return false;
  }
  _getApplier(tagName, className, classRegExp).toggleRange(range);
  poser.selection.setSelection(range);
},

state: function(poser, mand, tagName, className, classRegExp) {
  var doc           = poser.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 = poser.selection.getRange();
  if (!range) {
    return false;
  }

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

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

I'm using WYSIHTML5 Bootstrap ( http://jhollingworth.github./bootstrap-wysihtml5 ), based on WYSIHTML5 ( https://github./xing/wysihtml5 ) which is absolutely fantastic at cleaning up HTML when copy pasting from websites.

I'd like to be able to handle code into the editor, and then highlight the syntax with HighlightJS.

I've created a new button and replicated the method used in wysihtml5.js to toggle bold <b> on and off, using <pre> instead:

(function(wysihtml5) {
var undef;

wysihtml5.mands.pre = {
    exec: function(poser, mand) {

        return wysihtml5.mands.formatInline.exec(poser, mand, "pre");
    },

    state: function(poser, mand, color) {

        return wysihtml5.mands.formatInline.state(poser, mand, "pre");
    },

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

But that's not enough. The editor hides the tags when editing. I need to be able to wrap my content in both <pre>and <code>ie. <pre><code></code></pre>.

This means writing a different function than the one used by wysihtml5, and I don't know how... Could anyone help me with that?

Here's the code for the formatInline function in wysihtml5:

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

state: function(poser, mand, tagName, className, classRegExp) {
  var doc           = poser.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 = poser.selection.getRange();
  if (!range) {
    return false;
  }

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

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

• javascript
• parsing
• syntax
• wysihtml5

2 Answers 2

Got the answer from Christopher, the developer of wysihtml5:

wysihtml5.mands.formatCode = function() {
exec: function(poser) {
var pre = this.state(poser);
if (pre) {
  // caret is already within a <pre><code>...</code></pre>
  poser.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 = poser.selection.getRange(),
      selectedNodes = range.extractContents(),
      pre = poser.doc.createElement("pre"),
      code = poser.doc.createElement("code");
  pre.appendChild(code);
  code.appendChild(selectedNodes);
  range.insertNode(pre);
  poser.selection.selectNode(pre);
}
},
state: function(poser) {
var selectedNode = poser.selection.getSelectedNode();
return wysihtml5.dom.getParentElement(selectedNode, { nodeName: "CODE" }) && wysihtml5.dom.getParentElement(selectedNode, { nodeName: "PRE" });
}
};

... and add this to your toolbar:

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

Many thanks Christopher!!

I fork today bootstrap-wysihtml5 project and add code highlighting support using Highlight.js.

You can check demo at http://evereq.github./bootstrap-wysihtml5 and review source code https://github./evereq/bootstrap-wysihtml5. It's basically almost same code as from Christopher, together with UI changes and embeded inside bootstrap version of editor itself.