Новая версия 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>
(по умолчанию 30px):