Установка и настройка TinyMCE. Правильная стыковка со Smarty

Кто не знает что такое TinyMCE? Вы не знаете?

Что же, тогда считаю нужным вам все объяснить - это визуальный редактор, который позволяет форматировать тексты в HTML формате без всяких тегов - все как в Word. Для многих - это намного удобнее, чем набирать статью в формате HTML тегов, поэтому, этот визуальный редактор настолько популярный.

В этом уроке мы разберем установку и настройку TinyMCE , но рассказывать и показывать все - вам буду не я. Что, непривычно?

TinyMCE – настройка и установка

Ничего страшного! Не так давно, я познакомился с человеком, который очень хорошо разбирается в создании сайтов - даже больше чем я (вот зараза )!

Поэтому я - счел нужным познакомить вас с ним. Ну и естественно, показать его познания в .

Зовут его - Дмитрий Науменко (привет Димон ). Он специалист в программировании, непосредственно - в языке PHP, и на данный момент я прохожу его курс - круть!!! Все понятно, просто и без воды - только практика.

У Димы есть свой сайт в сети, на котором он выкладывает очень интересные уроки. Признаюсь честно, я даже подумываю пару уроков стибрить на свой сайт. Ну такой я человек - все лучшее детям, ой сорри, Вам!

Чем отличаются его уроки от моих? Я учу работать на системе управления сайтом - , а он учит, как создать сайт полностью своими усилиями - именно динамический сайт. И у него это хорошо получается.

Можете прямо сейчас ознакомиться с его бесплатным курсом:

Этот курс позволит вам самим создать свой сайт при помощи PHP, и создать простенькую админку. Уверяю вас, когда сайт создан только вашими усилиями - это нечто! Да и к тому же все довольно просто, как оказывается на самом деле!

Обязательно ознакомьтесь с этим миникурсом - уверяю - не пожалеете!

Но не в курсе дело, я хочу предложить вам посмотреть два видеоурока по установке и настройке TinyMCE , которые Дима согласился предоставить.

Прикиньте, даже упрашивать не пришлось, одно название - свой человек!

Я сам просмотрел эти уроки и уже установил Tiny на свой сайт - загляните .

По моему, получилось четко! Также, TinyMCE можно пристроить и к комментариям. Можно вырезать половину кнопок, поменять стиль, в общем - настроить все по своему вкусу!

Поэтому смотрите следующие два видео, или качайте эти уроки к себе на компьютер:

Если вы не качали уроки - вам понадобиться сам редактор - его вы сможете скачать здесь:

Видеоурок по установке TinyMCE Видеоурок по настройке TinyMCE

В общем, я этими уроками доволен как слон! Надеюсь, они вам тоже пришлись по душе, а главное - принесли пользу, так как теперь вы сможете без проблем установить и настроить этот редактор на свой сайт.

Нарисовалась такая проблема, делал сайт заказчику на MODX revo 2.2.4, его не устроило что мало кнопок в редакторе TinyMCE. При детальном рассмотрении редактора, еще выяснилось, что ссылку на соседнюю страницу сделать невозможно, невозможно использовать таблицу, цвет шрифта, фона и т.д.. Пришлось покавыряться у разработчика в поисках дополнительных кнопок и расширений. В MODx evo, в настройках интерфейса была чудесная возможность включить "full" и все вопросы отпадали. В MODX revo все по другому, все настройки делать нужно ручками. Не хочет наш Российский средний заказчик содержать админа, что делать? Будем подстраиваться за его деньги. Редактор TinyMCE предустановлен с минимальным набором кнопок. Все дополнения приходится прописывать самому, хотя они все есть и установлены вместе с редактором. Вот картинка полнофункционального примера, его и буду придерживаться. Снято у разработчика. Информацию черпал .

Каждая кнопка в визуальном редакторе принадлежит определенному плагину, кнопок может быть несколько. Плагин и кнопка могут иметь одинаковое название, если в плагине одна кнопка.

Панель редактора разделена на четыре части, в MODX revolution- Система/Настройка системы/tinemce/ имеет для настроек пять строчек. Здесь мы будем прописывать (регистрировать) каждую подключенную кнопку.

  • Custom Buttons Row 1 - это верхняя строчка в редакторе TinyMCE,
  • Custom Buttons Row 2 - это вторая строчка в визуальном редакторе TinyMCE и т.д.

Вытягивать не будем, делаем по образцу разработчика, то есть в четыре ряда. Плагины прописываются чуть ниже в разделе: Custom Plugins . Рекомендую, уже существующие кнопки не удалять, потому-что есть такие, которые написаны для MODX. Например modximage. Выбираем тему: General/Editor Theme/ , вернее меняем с "advanced" на "custom" . Далее я буду приводить плагины и кнопки по порядку слева на право и сверху вниз. Название плагина прописываем в графе "Сustom Plugins", название кнопки в соответствующей строке "Custom Buttons". Некоторые кнопки имеют уже предустановленные плагины, которые прописывать не нужно.

Я буду писать, как на картинке, а куда нужную кнопочки разместите вы, решайте сами.

Custom Buttons Row 1 .

Плагин: save - имеет две кнопки.

Cancel (отменить все изменения).

Предустановленный плагин:

Newdocument (новый документ)

Bold (полужирный)

Italic (курсив)

Underline (подчеркнутый)

Strikethrough (зачеркнутый)

Justifyleft (по левому краю)

Justifycenter (по центру)

Justifyright (по правому краю)

Justifyfull (по ширине)

Fontsizeselect

Custom Buttons Row 2.

Предустановленный плагин:

Cut (вырезать)

Copy (копировать)

Paste (вставить)

Плагин paste .

Pastetext (вставить как текст)

Pasteword (вставить из word)

Selectall (выделить все)

Плагин searchreplace :

Search (найти)

Предустановленный плагин:

Bullist (маркированный список)

Numlist (нумерованный список)

Outdent (уменьшить отступ)

Indent (увеличить отступ)

Blockquote (цитата)

Undo (отменить)

Redo (вернуть)

Anchor (добавить/изменить якорь)

Image (добавить/изменить изображение)

Cleanup (очистить лишний код)

Help (помощь)

Code (редактировать html-код)

Плагин insertdatetime :

Insertdate (добавить дату)

Inserttime (добавить время)

Плагин preview :

Preview (предварительный просмотр)

Плагин fullpage :

Fullpage (полная страница)

Предустановленный плагин:

Forecolor (цвет текста)

Backcolor (цвет выделения текста)

Forecolorpicker (цвет текста)

Backcolorpicker (цвет выделения текста)

Custom Buttons Row 3.

Плагин table :

Tablecontrols (добавление/изменение таблицы)

Следующие атрибуты кнопку не добавляют, но расширят возможности существующим кнопкам плагина table :

row_props (изменить свойства строки)
cell_props (изменить свойства ячейки)
delete_col (удалить столбец)
delete_row (удалить строку)
col_after (добавить колонку справа)
col_before (добавить колонку слева)
row_after (добавить строку снизу)
row_before (добавить строку сверху)
split_cells (разбить ячейку)
merge_cells (объядинить ячейки)

Предустановленный плагин:

Hr (добавить черту)

Removeformat (очистьть формат)

Visualaid (все знаки)

Sub (подстрочный)

Sup (надстрочный)

Charmap (добавить символ)

Плагин emotions :

Emotions (добавить смайл)

Плагин media :

Media (добавить/изменить клип)

Плагин advhr :

Advhr (добавить разделитель)

Плагин print :

Print (печать)

Плагин directionality :

Ltr (направление слева на право)

Rtl (направление справа налево)

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

Установка редактора TinyMCE описывается в статье "Установка редактора TinyMCE ", а здесь разберемся с директивами конфигурации редактора. Все директивы конфигурации редактора TinyMCE описаны в документации на домашнем сайте TinyMCE . Здесь разберем некоторые.

Управление поведением редактора в отношении ссылок

  • convert_urls - по умолчанию true. Все URL будут конвертироваться в относительные. Действие зависит от следующей директивы.
  • relative_urls - по умолчанию true. Все URL будут приведены к домашнему домену.
  • remove_script_host - по умолчанию true. Если директива включена, то из урла будут удалены название протокола и хост. Если директива установлена в false, то урлы будут храниться в полном формате: "http://www.example.com/somedir/somefile.htm" вместо: "/ somedir / somefile.htm". Эта директива работает только если relative_urls установлено в false.
  • document_base_url - значением по умолчанию является каталог текущего документа. Эта директива определяет базовый URL для всех относительных URL-адресов в документе. Если указывается какое-то значение, то оно должно указать на каталог (не документ) и должно заканчиваться символом "/".

Управление поведением редактора в отношении html тэгов

Директив в этом разделе весьма много и все перечислять смысла нет. Приведу несколько наиболее критичных.

Хотите знать больше? Нажмите "Нравится"

  • valid_elements - эта директива определяет, какие html тэги остануться нетронутыми после сохранения документа. Если мы хотим, чтобы все тэги и все атрибуты тэгов не изменялись и не удалялись, указываем *[*]. Если хотим сохранять только некоторые тэги или же заменять одни тэги другими, то перечисляем нужное через запятую "a, b, em, ul, li". Запись "strong/b" разрешает тэг "strong" и заставляет редактор принудительно заменять тег "b" тэгом "strong". Запись "a" разрешает тэг "a" с атрибутом "href" и устанавливает атрибут "target" в значение "_blank". Например: valid_elements: "a,strong/b,div,br".
  • extended_valid_elements - действие директивы аналогично действию valid_elements с той разницей, что она добавляет тэги к существующему списку. Если в этой директиве встретится тэг уже описанный в valid_elements , он будет переопределен. В настройках лучше использовать именно эту директиву.
  • invalid_elements - директива прямо противоположная предыдущей. В ней указываются запрещенные тэги, которые будут удаляться редактором из текста. Формат директивы такой же как и у valid_elements .
  • cleanup - очистка кода при сохранении документа. Если эта директива установлена в true, то из текста удаляются служебные атрибуты редактора, как то: mce_style, mce_href, mce_src и другие. В этом случае в директиве valid_elements необходимо прописать теги и атрибуты, которые не должны удаляться редактором (такие как noindex, iframe, strong, object, em, embed).

Другие директивы

  • gecko_spellcheck - значение по умолчанию false. С помощью этой директивы управляется логика проверки орфографии Gecko/Firefox. Значение true включает внутреннюю проверку орфографии.
  • language - явно указывает язык документов. В нашем случае логично указать: "ru".
  • inline_styles - по умолчанию true. При установки этой директивы в true, редактор осуществляет преобразование некоторых атрибутов тэгов в css нотации, что приближает кодировку к XHTML стандартам.
  • entity_encoding - способ кодирования специальных символов.
    Возможные значения:
    • named - спецсимволы будут кодироваться символьной нотацией, например неразрывный пробел закодируется как
    • numeric - спецсимволы будут кодироваться числовой нотацией, например неразрывный пробел закодируется как
    • raw - спецсимволы кодироваться не будут за исключением & " (& < > ").
  • content_css - прикрепляет пользовательский стиль.
  • width - директива явно определяет ширину окна редактора. Размерность указывается в пикселях, указывать ее явно не надо.
  • height - директива явно определяет высоту окна редактора. Размерность указывается в пикселях, указывать ее явно не надо.
  • mode -директива определяет способ подключения редактора к тэгу textarea.
    Возможные варианты:
    • textareas - редактор подключается ко всем тэгам textarea на странице;
    • specific_textareas - подключает редактор к textarea, который отмечен классом указанным в директиве editor_selector ;
    • exact подключает редактор к textarea или div, который отмечен id указанным в директиве elements;
    • none - не подключать редактор. Подключение осуществляется функцией tinyMCE.execCommand() .
  • skin - определяет "шкурку" вашего редактора (оформление). Сейчас доступно две шкурки: default" и "o2k7".
  • theme - директива определяет "тему" (а по сути набор кнопок) редактора. Имеется две встроенных темы: simple и advanced. simple ставит минимальный набор кнопок и возможностей. advanced позволяет управлять набором кнопок. Темы можно создавать самостоятельно.
  • plugins - определяет список подключаемых плугинов.
  • theme_advanced_toolbar_location - указывает в каком месте будут находиться панели редактора. Возможные значения: "top" или "bottom".
  • theme_advanced_statusbar_location указывает в каком месте будут находиться панель статуса. Возможные значения: "top" или "bottom".
  • theme_advanced_buttons1 - определяет набор кнопок в панеле (указана цифрой, обычно от 1 до 4) редактора.

Инициализация редактора TinyMCE может быть такой



tinyMCE.init({
// General options
mode: "textareas",
theme: "advanced",
language: "ru",
inline_styles: true,
convert_urls: false,
relative_urls: false,
remove_script_host: false,
cleanup: true,
extended_valid_elements:"noindex, strong/b, em/i, sup, sub, ul, ol, li, div, span, hr, img, a, iframe, embed, object",

plugins: "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, wordcount, advlist, autosave",

// Theme options
theme_advanced_buttons1: "undo, redo, |, bold, italic, underline, strikethrough, |, justifyleft, justifycenter, justifyright, justifyfull, styleselect, formatselect, fontselect, fontsizeselect, sub, sup, |, forecolor, backcolor",
theme_advanced_buttons2: "cut, copy, paste, pastetext, pasteword, removeformat, cleanup, |, search, replace, |, bullist, numlist, |, outdent, indent, blockquote, |, link, unlink, image, |, insertdate, inserttime, hr, |, charmap, emotions, iespell",
theme_advanced_buttons3: "tablecontrols, |, visualaid",
theme_advanced_buttons4: "styleprops, |, cite, abbr, acronym, del, ins, |, visualchars, nonbreaking, |, print, preview, |, fullscreen",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,

});

TinyMCE – это очень навороченный WYSIWYG -редактор, который можно установить достаточно легко на любую html-форму textarea . Лично я устанавливал этот редактор на несколько своих сайтов в форму ввода комментариев, так как TinyMCE реально может помочь вашим посетителям в написании новых комментариев.

В TXP есть Textile, но так как он мало где распространен, его среднестатистический пользователь не знает и в ваших комментариях соответственно использовать не будет.

А этот самый TinyMCE делает процесс написания комментария простым и быстрым, используя графический интерфейс.

Почему именно TinyMCE?

Этот WYSIWYG -редактор обладает несколькими неподкупными достоинствами, к которым можно отнести:

  • широкий функционал;
  • русский язык;
  • простая установка;
  • гибкая настройка панели редактора.
Устанавливаем TinyMCE в Textpattern

Простая установка TinyMCE в Textpattern заключается в всего лишь в нескольких несложных действиях, которые необходимо выполнять по порядку:

  • Загружаем последнюю версию TinyMCE с официального сайта .
  • Загружаем пакет русификации с того же сайта . Тут нужно выбрать какие языки нужны и нажать на DOWNLOAD .
  • Далее необходимо поместить последнюю версию TinyMCE на свой хостинг, где размещен сайт. По умолчанию разработчики предлагают размещать все в директории /js/tiny_mce , но Вы может куда угодно его засунуть.
  • После этого необходимо “накатить” на все это русификацию, которая была на втором шаге. Прямо скопировать поверх всех загруженных файлов.
  • После этого добавляем небольшой html-код на страницу сайта. Главное, чтобы этот код был выше формы, на которую нужно добавить TinyMCE. Сам код:

    В этом коде необходимо указать путь до файла tiny_mce.js .
    В строке:

    theme:“simple”

    указываем тему. По умолчанию используется advanced , которая имеет на панели абсолютно все значки. Есть и простая simple , в которой нет ничего лишнего. Вот последнюю и рекомендуется использоваться.
    Строка:

    language:“ru”

    говорит, что использоваться будет русский язык.

    • На этом все!! TinyMCE установлен на всех формах ниже.

    Небольшие доработки из личного опыта

    Меня дико раздражало, что этот самый TinyMCE иногда начинает вставлять мусорный html-код, пытаясь насильно указать шрифт и кегль шрифта. Закономерности я в этом никакой не нашел, но зато нашел решение этой проблемы.

    Решение оказалось простым. Нужно просто удалить или закомментировать две строчки в CSS -файле установленной темы. Так как тема установлена simple , то CSS -файл будет вот этот: /tiny_mce/themes/simple/skins/default/content.css .

    В нем нужно удалить вот этот блок:

    body, td, pre {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    }

    Разобравшись с основным функционалом административной панели в WordPress. Наибольшее количество времени, после формирования основы нашего сайта, мы будем уделять статьям, их написанию и оптимизации. Для набора и форматирования записей в WordPress внедрен редактор, однако он очень уступает плагинам специализированным под эти нужды. После установки и настройки плагина визуального и html редактора Tinymce Advanced осуществлять редактирование записей будет гораздо проще.


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

    Навигация по статье:

    Для того что бы начать пользоваться и тестировать данный плагин TinyMCE Advanced нужно скачать и установить его, как это сделать представлено ниже в видео уроке.

    Описание плагина TinyMCE Advanced

    Плагин дополнение к редактору TinyMCE Advanced существует очень давно и наверное у 90% пользователей платформы WordPress он установлен и ежедневно используется.

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

    Благодаря TinyMCE Advanced мы можем добавить к нашему стандартному редактору, доступному после , большое количество новых кнопок, которые безусловно пригодятся вам.

    Переоценить данный плагин практически не возможно, он используется ежечасно, каждая минимальная и тонкая настройка станет простой и доступной с помощью TinyMCE Advanced.

    Видео обзор TinyMCE Advanced, его установка и настройка

    В данном видео вы увидите преимущества доступные при установке и работе с TinyMCE Advanced.

    Чем TinyMCE Advanced лучше стандартного

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

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

    Как видим в подтверждение сказанного выше далеко со стандартным редактором не разгонишься, вот по этой причине нам на помощь и идет TinyMCE Advanced с его расширенным функционалом.

    С первого взгляда понятно что наши возможности значительно вырастут с таким функционалом возможностей TinyMCE Advanced. Тот кто хоть раз работал с текстовыми редакторами сможет легко разобраться в иконках и возможностях плагина. Для тех же кому хочется не искать нужные элементы методом тыка разберем основные возможности и настройки TinyMCE Advanced.

    Что даст нам TinyMCE Advanced

    Итак, использование расширенного редактора TinyMCE Advanced позволит нам добавить и использовать следующие возможности:

  • Легкое и удобное создание таблиц непосредственно при написании статьи. Редактирование и наполнение которых не вызовет у вас неудобств.
  • Расширенное и удобное форматирование структуры страницы. Возможность создания и регулирования размещения слоев ( блоки).
  • Вам так же станет доступно ставить верхние и нижние индексы.
  • Менять цвет фона текста с TinyMCE Advanced можно очень легко без использования CSS.
  • Внедрять видео файлы станет гораздо удобнее с редактором TinyMCE Advanced.
  • Изменять размер шрифта.
  • Широкий выбор семейства шрифтов.
  • Набор горячих клавиш добавит вам скорости написания и форматирования ваших текстов.
  • Станет доступна очистить одной клавишей всего форматирования.

    • Эти и другие возможности пригодятся вам в формировании ваших творений с WordPress.

    Плагин постоянно обновляется что не может нас не радовать, ведь это основной признак того что о вашем комфорте думают разработчики.

    Пользуясь TinyMCE Advanced вы будете писать ваши посты уверенным в своих возможностях, желаем вам вдохновения и уникальных текстов, встретимся в следующем

    Возможные проблемы с TinyMCE Advanced и методы их решения

    Плагин TinyMCE Advanced написан на PHP, так же как и любая программа она может по тем или иным причинам не работать. Ниже описаны проблемы, с которыми чаще всего сталкиваются пользователи. Чем же болеет редактор для WordPress.

    Не работает визуальный редактор WordPress TinyMCE Advanced

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

  • Проверить работоспособность других плагинов которыми вы управляете с админки, если их кнопки настроек работают тогда переходим к следующему пункту. В случае возникновения проблем и с другими дополнениями нужно искать причины внутренних настроек, а не в самом плагине.
  • Обновите WordPress до последней версии.
  • Полностью удалите плагин и скачайте TinyMCE Advanced с официального сайта.
  • После установки активируте его и проверьте работоспособность.

    • Если это вам не поможет возможно проблемы связаны с другими плагинами, иногда они могут конфликтовать, попробуйте отключить все плагины и проверить не изменилась ли ситуация. Если TinyMCE Advanced не работает и при «чистом» движке нужно искать более глубокие проблемы, стоит обратиться к программисту.

    На странице администрирования: не сортируются кнопки TinyMCE, они не двигаются, панель инструментов пустая, другие ошибки на странице

    Это, как правило, вызвано другим плагином, которые добавляют несовместимые библиотеки JavaScript для всех страниц, а не только там, где необходимо. Обойти это можно попытавшись узнать, какие плагины делают это, временно отключить остальные плагины, пока все кнопки TinyMCE не появятся, и включать их по очередности проверяя изменения в настройках.

    Если это не помогло, попробуйте некоторые общие устранения неисправностей Javascript: очистить кэш, попробуйте другой браузер, попробуйте другой компьютер, если это возможно, удалить и заново загрузить все файлы плагина, и, наконец, установить Firefox с Firebug или Opera, обратите внимание на первый JS вызывающий ошибки (важно) и разместите его ниже или поищите в Интернете, чтобы узнать то, что вызывает его.

    Организовал кнопки и сохранил их, но ничего не меняется в визуальном редакторе на странице записей

    Нажмите на кнопку «Удалить» (рядом с кнопкой Сохранить), а затем на «Продолжить». Затем выключить и активировать плагин снова. Это сбросить все настройки, которые хранятся в базе данных.

    Некоторые кнопки отсутствуют в меню TinyMCE, либо некоторые инструменты не появляются вообще, или TinyMCE ведет себя странно после установки плагина

    Почти все эти проблемы вызваны кэш браузера, или сетевой кэш. Очистите кэш браузера, закройте браузер, а затем запустить его и попробуйте еще раз. Если проблема не устраняется, попробуйте перезагрузить страницу, удерживая Ctrl (в IE) или Shift (в Firefox), чтобы указать браузеру что нужна перезагрузка страницы с сервера. Это также может быть вызвано сетевым кэш где-то между вами и вашим веб-хостинга. Просто подождите несколько часов для того, чтобы проблема исчезнет.

    Я не вижу каких-либо стилей импортируемых в «style» в раскрывающемся меню

    Эти стили (только классы) импортируются из редактора в файл style.css вашей текущей темы. Однако некоторые темы не включать этот файл. В этом случае следуйте инструкциям на странице настроек TinyMCE Avdanced, чтобы добавить свой собственный файл style.css редактор к вашей теме. При определении стилей имейте в виду, что TinyMCE будет импортировать имена только класса:

    My_class{}

    My_other_class {}

    Я только что установил плагин TinyMCE Avdanced, но ничего не произошло

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

    Когда я добавляю «смайлики», они не показывают в редакторе

    Кнопка «Смайлики» в TinyMCE добавляет коды смайлов. Фактические изображения добавляет WordPress при просмотре записи / страницы. Убедитесь, что флажок «Преобразовывать смайлики наподобие:-) и:-P в картинки» в меню «Настройки»/»Написание» установлен.

    Плагин не добавляет никаких кнопок, «Визуально» и «HTML текст» вкладки отсутствуют

    Убедитесь, что «Отключить визуальный редактор» флажок в разделе «Пользователи»/»Ваш профиль» снят.