Новый дижок форматирования

Новая версия TinyMCE 3.3 идет вместе с новым движком для форматирования: жирный, курсив, определения размера шрифта и многих других функций. С использованием новых функций, будет намного проще добавлять и работать с пользовательским форматированием, и снизится колличество ошибок браузеров.

Проблемы execCommand
Большинство распространенных WYSIWYG редакторов используют для форматирования функцию execCommand. Именно так делалось в TinyMCE перед этой версией. Проблема с этим подходом в том, что каждый браузер интерпретирует эту команду по своему, и большинство реализаций глючат. На протяжении долгого времени постоянно исправлялись ошибки, но полностью исправлены совсем немногие.
В то время, когда браузер выполнял команды, движок редактора решал его ошибки. Для этого запускалась специальная очистка. Проблема в том, что некоторые специфические случаи обрабатывались довольно трудно, и для них требовалось много хаков. Поэтому, было принято решения эту часть исправить.

Новые варианты, новые возможности
Формат шрифта теперь можно задавать вручную. Например, можно переопределить жирный и курсив, вместо стандартных strong и em.

tinyMCE.init({
...
// Переопределение внутреннего форматирования
formats : {
	bold : {inline : 'span', 'classes' : 'bold'},
	italic : {inline : 'span', 'classes' : 'italic'}
},

// Используется в выпадающем меню «Формат»
style_formats : [
	{title : 'Bold text', inline : 'b'},
	{title : 'Red text', inline : 'span', styles : {color : '#ff0000'}}
	]
});

Новое API
API довольно проста в использовании. Всё, что необходимо сделать, это добавить свой стиль текста в хэш formats или использовать функцию register. Ниже приведен пример, как зарегистрировать формат и применять его к выделенному тексту.

tinymce.activeEditor.formatter.register('mycustomformat', {
	inline : 'span',
	styles : {color : '#ff0000'}
});

tinymce.activeEditor.formatter.apply('mycustomformat');

Улучшенный HTML на выходе
Новый движок выполняет работу на более высоком уровне, чем прежде. С этого момента, тэги отвечающий за форматирование — объединяются. Когда вы применяете размер шрифта и цвет к выбранному слову, то это порождало сразу два тэга:

<span style="font-size: medium;"><span style="color: #ff0000;">word</span>

Новый движок понимает это, и объединяет тэги в один:

<span style="font-size: medium; color: #ff0000;">word</span>

Аналогично с классами:

<span class="bold italic">word</span>