изменение файлов плагинов WordPress

’tag’

Лечим SyntaxHighlighter Evolved от удаления новой строки при смене редактора в WordPress 3.3.2

Июнь 5, 2012

Вчера, после того, как я добавил кнопку сохранения на панель Альтернативного Полноэкранного редактора 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(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/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 не успевает проверить и изменить код до начала сохранения.

Tags: , , , , , , , , ,
Записано в WordPress, Программирование    |    Постоянная ссылка

Добавление горячих клавиш к плагину WYSIWYG Inline Code Command

Май 29, 2012

Речь пойдет об изменении плагина WYSIWYG Inline Code Command, который я добавил ранее, чтобы иметь возможность выделять отдельные части текста с помощью тега <code>.

В прошлой записи я писал, как добавить горячие клавиши к кнопке плагина NoFollow.

В отличие от плагина NoFollow, плагин WYSIWYG Inline Code Command по-умолчанию уже имеет комбинацию клавиш:

ed.addShortcut ('alt+shift+c', 'Inline Code', 'mceWICC');

Как я и говорил в предыдущей записи, если используется комбинация с вхождением клавиши Shift, то следующий за ним символ, если это буква, должен быть большим. В связи с этим комбинация alt+shift+c не работает, т.к. символ "c" маленький.

Вносим изменения в следующий файл:
/wp-content/plugins/wysiwyg-inline-code-command/wicc-mce-plugin.php

Находим указанную выше строку и заменяем на:

ed.addShortcut ('alt+shift+C', 'Inline Code', 'mceWICC');

Сохраняем файл.

Заключение

В данном случае для изменения исходного файла плагина достаточно из Закрытой части WordPress перейти в раздел Плагины, а затем Редактор. После выбрать интересующий файл из списка и внести изменения.

Если горячие клавиши вдруг не работают, то стоит очистить кэш браузера.

Tags: , , , , , ,
Записано в JavaScript, WordPress, Программирование    |    Постоянная ссылка

Доработка плагина NoFollow: удаление rel и горячие клавиши

Май 29, 2012

У плагина NoFollow, который я ранее добавил к Визуальному редактору, есть два недостатка:

  1. он позволяет добавить атрибут rel="nofollow", но не удалить при повторном нажатии;
  2. кнопку нужно постоянно нажимать мышью.

Для меня это неудобство, которое я решил по-быстрому исправить.

Все изменения вносятся в следующий файл (на хостинге):
/wp-content/plugins/nofollow-link/mce/nofollow/editor_plugin.js

Удаление rel=nofollow

Заменяю следующий код:

if(ed.selection.getNode().nodeName=="A"){
	ed.selection.getNode().setAttribute("rel", "nofollow");
}

на:

if(ed.selection.getNode().nodeName=="A"){
	/* cay 1 */
	if (ed.selection.getNode().getAttribute("rel") == null) {
		// cay: was only this line
		ed.selection.getNode().setAttribute("rel", "nofollow");
	} else {
		ed.selection.getNode().removeAttribute("rel");
	}
	/* cay 1 # */
}

Комментарий с добавлением "cay" определяет в каком месте я вносил изменения. Потом можно будет с помощью поиска и использования команды Терминала "grep" отследить мои поправки в исходных кодах. Также справа от своей метки я добавляю номер изменения (не всегда).

Теперь, если атрибут rel установлен в nofollow, то при повторном нажатии атрибут будет удален.

Добавление горячих клавиш

В качестве горячих клавиш я решил использовать следующую комбинацию:
ctrl+shift+X

После следующего кода:

// Register buttons
ed.addButton('nofollow', {
	title : 'No Follow',
	cmd : 'mceNoFollow',
	image: url + '/nofollow-tag.png'
	});

добавляем:

// cay 2
ed.addShortcut ('ctrl+shift+X', 'Add NoFollow', 'mceNoFollow');

Чтобы не забыть комбинацию клавиш, добавим всплывающую подсказку. Вносим поправку в следующую строку:

title : 'No Follow',

Заменяем на:

title : 'No Follow (ctrl+shift+X)',

Сохраняем файл.

Заключение

Стоит отметить, что при использовании функции ed.addShortcut и комбинации, включающей кнопку Shift, символ клавиши должна писаться с большой буквы, иначе ничего не будет работать.

В функции ed.addShortcut последним параметром передается зарегистрированная под кнопку команда mceNoFollow. Ее название можно найти чуть выше по коду:

ed.addCommand('mceNoFollow', function() {

Если в Визуальном редакторе комбинация горячих клавиш не работает, то необходимо очистить кэш браузера.

Tags: , , , , , ,
Записано в JavaScript, WordPress, Программирование    |    Постоянная ссылка