Кто-нибудь нашел способ приятно обрабатывать код в WYSIHTML5?

Я использую WYSIHTML5 Bootstrap ( http://jhollingworth.github.com/bootstrap-wysihtml5) , основанный на WYSIHTML5 ( https://github.com/xing/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, и я не знаю, как это сделать... Может ли кто-нибудь помочь мне с этим?

Вот код функции formatInline в wysihtml5:

 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);

javascript parsing syntax wysihtml5
person Edo Si    schedule 26.09.2012    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Получил ответ от Кристофера, разработчика wysihtml5:

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>

Большое спасибо Кристофер!!

person Edo Si    schedule 27.09.2012

arrow_upward
2
arrow_downward

Сегодня я развил проект bootstrap-wysihtml5 и добавил поддержку подсветки кода с помощью Highlight.js.

Вы можете проверить демо по адресу http://evereq.github.com/bootstrap-wysihtml5 и просмотреть исходный код. код https://github.com/evereq/bootstrap-wysihtml5. По сути, это почти тот же код, что и от Кристофера, вместе с изменениями пользовательского интерфейса и встроенный в загрузочную версию самого редактора.

person Evereq    schedule 03.12.2012
comment
подсветка кода не сохраняется должным образом, в основном она хорошо отображается, когда вы находитесь в режиме редактирования, но когда вы сохраняете содержимое текстовой области, например, в базе данных, код сохраняется между ‹span›, а не ‹code›, поэтому он не отображается выделено позже - person Rad; 27.07.2013
comment
@Rad, вы можете проверить wysihtml5ParserRules.js, там должен быть код: {}, акроним: {rename_tag: span}, он преобразует код в span. вы можете легко изменить его. - person littlealien; 21.10.2013