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 });
>Данные настройки позволят нам избежать появления вместо картинок иконок, говорящих что картинка не найдена из-за неверного пути…
А что делать, если у сайта изменилось доменное имя?
Тогда ваши абсолютные пути будут вести неизвестно куда, оставляя пустые квадраты. Лучше оставлять относительные пути без начального слеша, чтобы при желании можно было перенести сайт в подкаталог, не потеряв правильные пути к картинкам
Про перенос сайта согласен, что будет криво, тогда придется обновить все файлы. Но про относительные пути без слеша начального вопрос весьма спорный — все зависит от иерархии вашего сайта. Допустив у вас картинки лежат в файле imades/, а админка в папке admin. Тогда вызвав на страничке admin/index.php редактирование файла и вставиви картинку вы получите путь ../images/my-picture.jpg и вот тут наступит самое интересное, если вы редактировали страницу например news/category/news-article.html то путь к картинке будет кривой, так как изображение будет искаться в папке news/category/images/my-picture.jpg
Спасибо, друг! Давно не читал этот блог, вот вернулся. Отличный пост. Мне больше всего понравилось про пустые элементы. Как раз с пустыми вчера запарился.
В закладки =)
По началу принял это сообщение за спам 🙂
>Далее будет полезно разрешить в нашем редакторе javascript файлы и фреймы.
прямой путь к заливке шелла )
при включении подобного параметра стоит ограничить доступ к файлу аплоада.
Да конечно, это не есть гуд для безопастности, но ту же карту от гугла придется вставлять тогда другим способом. И естественно лучше объяснить тому кто пользуется админкой, что надо знать что заливать. К слову настройки разрешенных расширений файла храняться в другом месте, например в плагине MCEImageManager
У меня при добавлении картинки через image meneger в html коде не прописывается src.
а javascript Ошибок не возникает и файл нормально на сервере сохраняется?
Нет. Фаербаг ничего не показывает. после выбора кртинки показывает в html — и все src нет но, если повторить операцию через контекстное меню, все вставятеся нормально.
kot, у меня тоже самое в firefox. хотя раньше работало. в ie все ок
Нашел в чем причина. У меня стоял старый редактор и он (а точнее imagemeneger) под ff 3.6 не работает, а под более старой нормально. обновил редактор и все заработало