Несколько первоначальных настроек в TinyMCE, для Вашего удобства

TinyMCE - удобный wysiwyg редактор, основанный на технологии javascript с использованием jquery ajax. Чаще всего используется разработчиками в качестве редактора страниц к админ-панели сайта. Есть множество инструкций по первоначальной настройке tinymce, но я хочу лишь выделить несколько пунктов, которые очень облегчат Ваше первоначальное использование редактора.

настройка редактора tinymce ajax

Убрать абзацы по нажатию "Enter":

Первое, с чем вы можете столкнутся первый раз установив и используя tinymce-редактор - это создание новых абзацев по нажатию "Enter", а перевод строки по нажатию "Shift+Enter". Многие незнают даже о "Shift+Enter", но это легко лечится с помощью нескольких строк при инициализации init tinymce:

forced_root_block : false,
force_br_newlines : true,
force_p_newlines : false

Теперь, кнопки "Enter" и "Shift+Enter" будут действовать наоборот.

Распределение кнопок:

Задайте при инициализации tinymce расширенный режим и вы увидите множество кнопок, рассортировать эти кнопки по колонкам Вам поможет дополнительная настройка "Theme advanced buttons". Разделяйте кнопки с помощью theme_advanced_buttons[цифра], где [цифра] - номер строки кнопок и знака "|", который разделяет блоки кнопок.

Привязывание tinemce ко всем textarea или к определённым textarea:

Tinymce можно работать в режиме(mode) "textareas", в таком случае он будет использоваться на всех textarea страницы. Также возможно вариант работы tinymce на заданных textarea, тогда Вам нужно прописать режим(mode) "exact" и задать элементы(elements) нужных textarea, которые будут соответствовать прописанным id у textarea.

Убрать автоматическое изменение ссылок

При вставке в текст изображений или ссылок, вы имеете шанс наткнуться на конвертацию url, которая будет изменять ваши ссылки на что-либо относительно редактора tinymce. Абсолютные ссылки будут также конвертированы в относительные. Это можно исправить с помощью отключения директивы convert_urls, которая по умолчанию стоит в true.

Пример инициализации tinymce init с использованием вышеприведённых примеров, в режиме "exact":


<script type="text/javascript">
tinyMCE.init({
        // General options
        mode : "exact",
        elements : "edit_tinymce,edit_tinymce_add,edit_main_text",
        theme : "advanced",
        language: "ru",
        plugins : "autolink,lists,spellchecker,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",
        // Theme options
        theme_advanced_buttons1 : "preview,fullscreen,|,undo,redo,|,newdocument,pastetext,pasteword,code,
|,replace,|,spellchecker,|,cleanup,|,print,iespell,|,image,media,|,link,unlink,anchor,|,insertdate,inserttime,
|,bullist,numlist",
        theme_advanced_buttons2 : "removeformat,|,bold,italic,underline,strikethrough,|,justifyleft,
justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect,|,forecolor,backcolor,|,
sub,sup,|,outdent,indent,blockquote,ltr,rtl,|,charmap,hr", 
        theme_advanced_buttons3 : "tablecontrols,|,insertlayer,moveforward,movebackward,absolute,|,
styleprops,cite,abbr,acronym,del,ins,attribs", 
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,


        // Skin options
        skin : "o2k7",
        skin_variant : "silver",


        // Example content CSS (should be your site CSS)
        content_css : "css/example.css",


        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "js/template_list.js",
        external_link_list_url : "js/link_list.js",
        external_image_list_url : "js/image_list.js",
        media_external_list_url : "js/media_list.js",
        forced_root_block : false,
	force_br_newlines : true,
	force_p_newlines : false,
	convert_urls: false});
</script>

Ну вот и всё!)
Скачать редактор tinymce и русификатор, можно на сайте: tinymce.com, также существует русский tinymce сайт - tinymce.ru

Опубликовано

07 Марта 2013

Рубрика

Веб Программирование

Теги

wysiwyg, tinymce

Комментарии и отзывы к материалу

Открыта вакансия на первого комментатора!

Отправить комментарий

Как зовут?

Сообщение