Вчера, после того, как я добавил кнопку сохранения на панель Альтернативного Полноэкранного редактора TinyMCE, я отметил, что после сохранения в тегах <pre></pre>, которые по сути даже не должны форматироваться, удаляются новые строки и многострочный код выводится в последствии в одну строку.
Проблема, как я выяснил, заключается в плагине SyntaxHighlighter Evolved, а именно в замене им стандартной функции WordPress pre_wpautop на pre_wpautop2. Происходит это в следующем файле:
/wp-content/plugins/syntaxhighlighter/syntaxhighlighter_mce.js
В самом конце файла находится:
switchEditors._pre_wpautop = switchEditors.pre_wpautop; switchEditors._wpautop = switchEditors.wpautop; switchEditors.pre_wpautop = pre_wpautop2; switchEditors.wpautop = wpautop2;
Нас интересует 1-я и 3-я строки, в которых происходит замена функции. Однако, взглянем на нее, она находится в том же файле:
var syntaxHLlast = 0;
function pre_wpautop2(content) {
var d = new Date(), time = d.getTime();
if ( time - syntaxHLlast < 500 )
return content;
syntaxHLlast = time;
content = content.replace(new RegExp('<pre>\\s*\\[(' + syntaxHLcodes + ')', 'gi'), '[$1');
content = content.replace(new RegExp('\\[\\/(' + syntaxHLcodes + ')\\]\\s*<\\/pre>', 'gi'), '[/$1]');
content = this._pre_wpautop(content);
content = content.replace(new RegExp('\\[(' + syntaxHLcodes + ')[^\\]]*\\][\\s\\S]+?\\[\\/\\1\\]', 'gi'),
function(a) {
return a.replace(/</g, '<').replace(/>/g, '>').replace(/&/g, '&').replace(/<%%KEEPWHITESPACE%%>/g, '');
});
return content;
}
Казалось бы не происходит ничего особенного. Я пытался вернуть из функции сразу после вызова переменную content, но это ничего не дало.
Для того, чтобы решить проблему неверного форматирования кода в тегах <pre></pre> достаточно заменить переопределение. Возвращаемся к 4-м строкам, показанным ранее и заменяем их на:
// cay 1 switchEditors._pre_wpautop = switchEditors.pre_wpautop; switchEditors._wpautop = switchEditors.wpautop; // cay 2 switchEditors.pre_wpautop = pre_wpautop2; switchEditors.wpautop = wpautop2;
Теперь при работе и сохранении в Альтернативном Полноэкранном режиме редактора TinyMCE, форматирование кода сохраняется.
Примечание
В своих поисках я пришел к изучению следующего файла:
/wp-includes/js/tinymce/plugins/wordpress/editor_plugin.js
При сохранении в Полноэкранном режиме срабатывает следующий код:
ed.onSaveContent.add(function(ed, o) {
if ( ed.getParam('wpautop', true) && typeof(switchEditors) == 'object' ) {z
if ( ed.isHidden() )
o.content = o.element.value;
else
o.content = switchEditors.pre_wpautop(o.content);
}
});
Несмотря на мои попытки внести изменения в эту функцию, код все равно форматировался неверно.
При сохранении, чтобы было понятно, исполняется данная строчка:
o.content = switchEditors.pre_wpautop(o.content);
Удивительно то, что если округлить эту строку в с помощью функции alert(), чтобы посмотреть на содержание переменной o.content до и после ее вызова, то видно, как неправильно форматируется текст. Однако, сам код в последствии имеет верное форматирование. Это скорее всего связано с тем, что добавляется задержка перед сохранением файла. Видимо TinyMCE не успевает проверить и изменить код до начала сохранения.