Дек
11
0

TinyMCE + полный набор плагинов

Author K_E_V_in    Category Создание сайтов     Tags , , , , , , , , ,

Продолжаем тему про визуальные редакторы (начало можно посмотреть здесь). Сейчас хочу представить многим уже знакомый визуальный редактор для сайта – Tiny MCE. Основная его ценность в моей сборке – полный набор плагинов (включая файловый менеджер и менеджер изображений, а также многое другое не менее вкусное).

Итак, скачиваем архив с редактором и будем его устанавливать. Это всё делается не так и сложно, но определенные навыки всё-таки быть должны. Поехали!

Вставляем в head страницы такой код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
    tinyMCE.init({
        mode : "exact",
        elements : "editor1",
        theme : "advanced",
        language:"ru",
        plugins: "imagemanager,filemanager,media,paste",

    // Theme options
    theme_advanced_buttons1 : "bold,italic,underline,strikethrough,sub,sup,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor,|,media,insertfile,insertimage",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,

    // 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",
    width: "100%",
    height: "400",
    skin: "o2k7"
    });
</script>

А само поле, которое будет обрабатываться редактором, должно выглядеть примерно так:

1
<textarea id="editor1" name="text"></textarea>

Посмотреть вариацию различных параметров, а также их влияние на внешний вид редактора можно здесь.

Читайте интересные статьи про Интернет. Женский / мужской журнал. Там тоже может быть много интересного!

Прокомментировать

Рубрики

Облако меток

В прямом эфире