Знакомство с великим и могучим текстовым редактором на JS

 

Как вы уже поняли, редактор является платформенным Javascript редактором HTML кода, т.е. WYSIWYG редактором для сайтов и веб приложений. Разработчиком этого полезного продукта является компания Moxiecode Systems AB. К ключевым особенностям программы относятся: поддержка тем\шаблонов, языковая поддержка и возможность подключения плагинов. HTML редактор TinyMCE используется во многих системах управления и движках сайтов, в том числе и в системе управления BIT company CMS v 1.01. Мы можем отметить программу как отличный и широкофункциональный инструмент для редактирования HTML кода, вставки видео, текстово-графической информации, таблиц и графиков. Правда так же отметим и скудность русскоязычной информации о методах и свойствах JS редактора TinyMCE( но вам повезло! Здесь вы найдете ответы на базовые вопросы и научитесь работать с редактором TinyMCE).

Как видно из титульного изображения выше, JS редактор очень похож на текстовый редактор в офисных приложения - принцип работы у редактора TinyMCE аналогичный. Для пользователей не знакомых с возможностями html и css есть графический интерфейс редактора. Для пользователей которые владеют языком программирования html и css есть так же расширенный редактор HTML. Данный редактор позволяет решить практически любые задачи, связанные с оформление страниц.

Инструкция полностью применима для редактора версии 3.5.11. Для более поздних версий методология работы с редактором так же должна быть аналогичной.

Установка и настройка TinyMCE

1. Скачиваем свежую версию редактора здесь и распаковываем.

2. Копируем содержимое архива в нужную вам директорию сайта.

3. Подключаем редактор к нашему сайту путем вставки кода на нужную страницу:

<script type="text/javascript" src="/path/to/tiny_mce.js"></script>

4. Инициализируем редактор при помощи JavaScript кода:

<!-- TinyMCE -->
<script type="text/javascript">
tinyMCE.init({
    mode : "textareas",
    theme : "simple"
 });
</script>
<!-- /TinyMCE -->
<textarea></textarea>

5. Готово! Теперь вы вставили и инициализировали простейший TinyMCE редактор.

Как вы заметили подключение и инициализация JS редактора проходит в 3 логических шага:

Инициализация редактора и его параметры

Редактор TinyMCE возможно инициализировать с различными параметрами, темами, плагинами. В данном разделе мы рассмотрим некоторые параметры и их значения. Вот пример инициализации редактора в системе управления BIT company CMS V 1.01:

<!-- TinyMCE -->
<script type="text/javascript">
    tinyMCE.init({
        // General options
        mode : "exact",
        elements: "content_editor",
        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,precode,uploads_image",
    
        // Theme options
        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,preCode,anchor,image,uploads_image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
        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",

        // 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",

        // Replace values for the template plugin
        template_replace_values : {  username : "Some User",  staffid : "991234"  }
    });
    </script>
<!-- /TinyMCE -->

mode [textareas|exact|specific_textareas|none] — определяет какие html экхемляры будут преобразованы в графические редакторы TinyMCE.

<script type="text/javascript">
        tinyMCE.init ({
            mode : "specific_textareas",
            editor_selector : "editme",
            language:"ru",
            theme : "simple"
        });
    </script>
<textarea id="content" class="editme" name="content"></textarea>

theme [simple|advanced] — определяет режим инициализации редактора.

language — указывает код языкового пакета графического редактора TinyMCE.

plugins — список плагинов, инициализируемых вместе с редактором, разделенные запятыми.


theme_advanced_buttons<1-n> — содержит список элементов управления для вставки в панели инструментов, где <1-n> строка в панели инструментов.

theme_advanced_toolbar_location — указывает, где должны располагаться панели инструментов: top — сверху, bottom — снизу.

theme_advanced_toolbar_align — позволяет задать выравнивание панели инструментов: по левому краю, по правому и по центру.

theme_advanced_statusbar_location — задает положение статусбара (top — вверху, bottom — внизу), либо указывает на его отсуствие — none.

theme_advanced_resizing — включает — true или выключает — false возможность изменять размеры окна редактора. Не работает, если значение theme_advanced_statusbar_location установлено в none.

skin — указывает какой скин данной темы необходимо использовать.

skin_variant — указывает какой вариант скина необходимо использовать.

content_css — подключает пользовательский css-файл(либо набор файлов, перечисленных через запятую), который будет использоваться в редакторе.

relative_urls — устанавливает, будут ли ссылки в редакторе относительные (true) или абсолютные (false).

template_replace_values — преобразование элемента страницы в графический редактор html кода с параметрами.

template_replace_values : { username : "Some User", staffid : "991234" }

Вот мы и подытожим с вопросом подключения и инициализации графического редактора html кода TinyMCE для сайта. Всем спасибо!

Лучший способ сказать автору «СПАСИБО»рассказать друзьям или поделиться ссылкой!
Другие статьи:
Всплывающая фиксированная навигация для сайта jQuery, CSS - инструкция, примеры

18/02/2020

В этой статье Мы покажем Вам, как сделать так, чтобы шапка сайта выезжала при прокрутке страницы вверх, но при этом скрывалась при прокрутке страницы вниз, чтобы не загораживать нам просмотр самой страницы.

Всплывающая фиксированная навигация для сайта jQuery, CSS - инструкция, примеры
Плагин DateTimePicker для сайта - инструкция, настройка, инициализация

05/02/2019

DateTimePicker – удобный и легкий в использовании плагин для быстрой подстановки даты и времени в поля ввода.

Плагин DateTimePicker для сайта - инструкция, настройка, инициализация
Плагин маски ввода для input - jquery maskedinput - инструкция, настройка, инициализация

23/01/2019

В этой статье будет рассмотрено решение этой задачи с использованием плагина Masked Input, который отличается простотой и удобством в использовании.

Плагин маски ввода для input - jquery maskedinput - инструкция, настройка, инициализация
Публикация на стене Вконтакте средствами API - кросспостинг

24/03/2017

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

Публикация на стене Вконтакте средствами API - кросспостинг
Чтение excel на PHP - основные методы класса PHPExcel

03/11/2016

С помощью PHPExcel можно производить чтение и запись информации в файлы, форматировать их содержимое,выполнять операции с формулами, стилями и т.д.

Чтение excel на PHP - основные методы класса PHPExcel
TinyMCE вырезает теги - исключения для тегов TinyMCE

21/09/2016

Текстовый редактор TinyMCE в визуальном режиме при стандартной конфигурации обрезает некоторый теги и свойства.

TinyMCE вырезает теги - исключения для тегов TinyMCE
Cвойства и методы TinyMCE - вставка тегов, вывод значений

21/09/2016

Научимся вставлять теги в выделенный фрагмент текста, вставлять теги на место селектора в тексте и получать средствами JS HTML код отредактированного текста и текст без HTML сущностей.

Cвойства и методы TinyMCE - вставка тегов, вывод значений
Установка и настройка jCarousel - параметры и методы

20/09/2016

В статье мы: познакомимся с каруселью; научимся интегрировать ее на свой сайт; познакомимся с основными параметрами инициализации;рассмотрим самые популярные свойства и методы классов jCarousel

Установка и настройка jCarousel - параметры и методы
Инструкция SMTP PHPMailer - свойства и методы класса

20/09/2016

Любой backend программист php сталкивается с задачей автоматизации почтовой рассылки на веб сайтах и многие,кто сталкивался с данной задачей впервые, вставали перед ключевым вопросом: "Писать или не писать smtp клиент с нуля?".

Инструкция SMTP PHPMailer - свойства и методы класса