Полезные настройки tinyMCE

TinyMCE — один из самых, если не самый, мощный редактор, используемый в сайтостроении. Вкупе с менеджером файлов и картинок, он становится самым настоящим монстром, но использовать базовые настройки не всегда удобно.Я расскажу о некоторых, которые пригодились в свое время мне.

Убираем относительные пути для ссылок и картинок:

relative_urls : false
convert_urls : false

Данные настройки позволят нам избежать появления вместо картинок иконок, говорящих что картинка не найдена из-за неверного пути.
Как дополнительно к предыдущему свойству можем добавить

remove_script_host : false

В данном случае мы получим в html-коде путь к картинке либо ссылку на страницу как «http://www.example.com/somedir/somefile.htm» вместо формата по умолчанию: «/somedir/somefile.htm«.

Вставляем флеш и youtube ролики через tinyMCE.

Для того, что пользователи могли добавлять ролики с youtube и другие флешки нужно добавить следующие параметры:

 extended_valid_elements : 'object[width|height|classid|codebase|embed|param],param[name|value],embed[param|src|type|width|height|flashvars|wmode]'

Ролики с youtube вставляются и с базовыми настройками, но наш редактор порежет такой тэк как embed вместе со всем его содержимым, а это значит что ИЕ будет ругаться. Также нужно дописать в конфигурации редактора еще и такую настройку:

media_strict: false

Пустые div и p.

По умолчанию редактор удаляет пустые элементы div и p, точнее<div></div> превратиться  в пустое место. С этим я столкнулся когда заказчик начал вставлять яндекс-карты и google maps на сайт, там в коде что дают эти системы есть пустые элементы, в которых в последствии и отрисовываются карты. Чтобы разрешить оставлять пустые элементы указываем такой параметр

extended_valid_elements : 'div[*],p[*]

Далее будет полезно разрешить в нашем редакторе javascript файлы и фреймы.

Для этого мы указываем такие настройки:

extended_valid_elements : 'script[type|src],iframe[src|style|width|height|scrolling|marginwidth|marginheight|frameborder]

Ну и в заключение покажу на каких настройках редактора работает моя админка, может быть кому-то будет полезно:

    tinyMCE.init({
                // General options
		mode : "exact",
		elements : "wysiwygEditor",
		theme : "advanced",
		skin : "o2k7",
                plugins : "imagemanager,filemanager,safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,flash",
                extended_valid_elements : 'script[type|src],iframe[src|style|width|height|scrolling|marginwidth|marginheight|frameborder],div[*],p[*],object[width|height|classid|codebase|embed|param],param[name|value],embed[param|src|type|width|height|flashvars|wmode]',
		media_strict: false,
                theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,formatselect,fontselect,fontsizeselect",
                theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code",
                theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,iespell,media,advhr,|,print,|,fullscreen",
                theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,|,insertdate,inserttime,preview,|,forecolor,backcolor",
                theme_advanced_toolbar_location : "top",
                theme_advanced_toolbar_align : "left",
                theme_advanced_statusbar_location : "bottom",
                theme_advanced_resizing : true,
		relative_urls : "false",
		remove_script_host : false,
		convert_urls : false
});

Полезные настройки tinyMCE: 12 комментариев

  1. >Данные настройки позволят нам избежать появления вместо картинок иконок, говорящих что картинка не найдена из-за неверного пути…

    А что делать, если у сайта изменилось доменное имя?
    Тогда ваши абсолютные пути будут вести неизвестно куда, оставляя пустые квадраты. Лучше оставлять относительные пути без начального слеша, чтобы при желании можно было перенести сайт в подкаталог, не потеряв правильные пути к картинкам

    • Про перенос сайта согласен, что будет криво, тогда придется обновить все файлы. Но про относительные пути без слеша начального вопрос весьма спорный — все зависит от иерархии вашего сайта. Допустив у вас картинки лежат в файле imades/, а админка в папке admin. Тогда вызвав на страничке admin/index.php редактирование файла и вставиви картинку вы получите путь ../images/my-picture.jpg и вот тут наступит самое интересное, если вы редактировали страницу например news/category/news-article.html то путь к картинке будет кривой, так как изображение будет искаться в папке news/category/images/my-picture.jpg

  2. Спасибо, друг! Давно не читал этот блог, вот вернулся. Отличный пост. Мне больше всего понравилось про пустые элементы. Как раз с пустыми вчера запарился.

  3. >Далее будет полезно разрешить в нашем редакторе javascript файлы и фреймы.
    прямой путь к заливке шелла )
    при включении подобного параметра стоит ограничить доступ к файлу аплоада.

    • Да конечно, это не есть гуд для безопастности, но ту же карту от гугла придется вставлять тогда другим способом. И естественно лучше объяснить тому кто пользуется админкой, что надо знать что заливать. К слову настройки разрешенных расширений файла храняться в другом месте, например в плагине MCEImageManager

  4. У меня при добавлении картинки через image meneger в html коде не прописывается src.

    • а javascript Ошибок не возникает и файл нормально на сервере сохраняется?

  5. Нет. Фаербаг ничего не показывает. после выбора кртинки показывает в html — и все src нет но, если повторить операцию через контекстное меню, все вставятеся нормально.

  6. Нашел в чем причина. У меня стоял старый редактор и он (а точнее imagemeneger) под ff 3.6 не работает, а под более старой нормально. обновил редактор и все заработало

Обсуждение закрыто.