tinyMCE — установка, настройка и использование.

Владимир | | CSS, JavaScript, Web разработка.

tinymce

Сегодня речь пойдет об использовании tinyMCE – одного из лучших JavaScript редакторов. На сегодняшний день подобных редакторов воз и маленькая тележка и, конечно, идеального не существует. Кстати, раньше я рассказывал об одном из них (Подключаем FCKeditor к CodeIgniter).

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

1) Предельно простое подключение.

2) В дистрибутив входит тема с минимальным количеством элементов управления.

3) Есть готовые скрипты для сжатия редактора.

4) Есть пакет для русификации.

Второй пункт я хочу пояснить отдельно. Большинство редакторов имеют очень много возможностей. Во всяком случае по количеству кнопок в меню они напоминают офисные пакеты вроде Word’а. Но в большинстве случаев эти возможности просто не нужны.

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

Конечно, возможность настройки панелей есть во всех редакторах. Но в tinyMCE настраивать ничего не нужно. Достаточно просто указать тему «simple». В результате вы получите панель с девятью кнопками, которыми пользоваться приходится чаще всего.

Теперь рассмотрим подключение редактора.

Как я и говорил, все предельно просто. Нужно вставить в страницу два блока script.

<script type="text/javascript" src="http://sitename.domen/js/tiny_mce/tiny_mce.js"></script>

<script type="text/javascript">
	tinyMCE.init({
		mode:"textareas",
		theme:"simple",
		language:"ru"
	});
</script>

Тут предполагается, что вы распаковали архив с редактором в папку js/tiny_mce. И кроме того, установили пакет с русскими переводами. Архив с этими переводами нужно просто распаковать поверх редактора.

При настройках, указанных в методе init, каждое поле textarea будет преобразовано в редактор.

Изменение размера шрифта в редакторе.

На мой взгляд, шрифт в 10 px, который используется по умолчанию, мелковат. И его нужно увеличить хотя бы до 12 px.

Для этого открываем папку используемой темы и ищем в ней файл со стилями. В данном случае нам нужен этот файл:

tiny_mce/themes/simple/skins/default/content.css

После этого нужно изменить значение параметра font-size.

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

Точно также можно изменить и другие параметры отображения редактора.

Сжатие.

Это очень полезная возможность, т.к. позволяет значительно уменьшить размер редактора и соответственно время загрузки страницы.

Принцип работы. Все используемые javascript файлы собираются в один и упаковываются в zip архив. Этот архив и отправляется клиенту.

Для того, чтобы включить сжатие вам потребуется.

1) Скачать архив с соответствующими скриптами и распаковать его в папку с редактором. Я использовал PHP вариант (Compressor PHP), но есть реализации для .NET и JSP.

2) Немного изменить код подключения редактора.

<script type="text/javascript" src="http://sitename.domen/js/tiny_mce/tiny_mce_gzip.js"></script>
<script type="text/javascript">
	tinyMCE_GZ.init({
		themes : 'simple',
		disk_cache : true,
		languages:"ru",
		debug : false
	});
</script>
<script type="text/javascript">
	tinyMCE.init({
		mode:"textareas",
		theme:"simple",
		language:"ru"
	});
</script>

Как видите, изменился основной файл редактора. Теперь подключаем tiny_mce_gzip.js вместо tiny_mce.js.

И добавился ещё один тег script, в котором мы указываем настройки сжатия.

Чтобы продемонстрировать результат я сделал два скриншота.

До включения сжатия.

uncompressed

После включения сжатия.

compressed

Как видите, во втором случае загружается два файла вместо одного. Но размер их почти в 3 раза меньше. И это эффект получен при использовании самой простой темы без плагинов.

В общем, очень полезная возможность.

В заключение хочу отметить, что при желании вы можете из очень простого редактора сделать супер навороченный. Посмотрите этот пример (и исходный код к нему). Думаю даже без чтения документации вы разберетесь как добавить или удалить кнопки на панели 😉

Удачи!

P.S. Все вопросы и замечания пишите в комментариях, буду рад ответить 🙂

Интересные ссылки

Regent анализирует средства выборки DOM-узлов по имени класса. Функция getElementsByClassName

Аутсорсинг непрофильных бизнес-процессов. Консалтинговая фирма Логос-Аудит — услуги бухгалтерского сопровождения для тех, кто понимает.

  • GG

    Может не совсем в тему но я начал изучать JavaScript и интересует вопрос дебага.
    Спасибо за ответ.

    • Я использую Firebug (плагин к FireFox). На сегодняшний день — это один из лучших отладчиков.

  • GG

    Может не совсем в тему но я начал изучать JavaScript и интересует вопрос дебага.
    Спасибо за ответ.

    • Я использую Firebug (плагин к FireFox). На сегодняшний день — это один из лучших отладчиков.

  • TinyMCE Имхо самый лучший визивиг. Он единственный позволяет как угодно работать с таблицами. Тем более есть для него в рунете бесплатный плагин управления файлами на сервере(родной платный). Fckeditor — послабее будет. Но он все равно тяжеленький так же как и fckeditor.
    Если нужен легенький — советую niceditor.

    • Спасибо, я с niceditor раньше не работал.
      Только хочу уточнить, какой редактор вы имели ввиду?
      Я нашел два с похожими названиями:
      1) NicEdit
      2) NICEditor

  • TinyMCE Имхо самый лучший визивиг. Он единственный позволяет как угодно работать с таблицами. Тем более есть для него в рунете бесплатный плагин управления файлами на сервере(родной платный). Fckeditor — послабее будет. Но он все равно тяжеленький так же как и fckeditor.
    Если нужен легенький — советую niceditor.

    • Спасибо, я с niceditor раньше не работал.
      Только хочу уточнить, какой редактор вы имели ввиду?
      Я нашел два с похожими названиями:
      1) NicEdit
      2) NICEditor

  • Пользовался, очень удобно и просто

  • Пользовался, очень удобно и просто

  • Имелся в виду первый

    • Спасибо, я так и подумал 😉

      • А поскольку он новенький, у него нет legasy кода. Поэтому код у него красивенький, в отличии от старых fckeditor and tinyMCE

        • К сожалению это временное преимущество.
          Ранно или поздно разработчикам придется выбирать, переписывать код заново или сохранить совместимость с предыдущими версиями.
          Не простой выбор, особенно если к тому времени появится много сторонних плагинов или тем для редактора.

        • Виктор

          Здравствуйте Владимир.
          Подскажите пожалуйста почему может не работать верхний и нижний регистр. Причём в админке всё нормально, а на сайте ничего не меняется. CMS WordPress.

        • Источником проблемы может быть либо тема, либо плагины.

          Проверить проще всего так, переключаете тему на дефолтную, отключаете плагины, а затем включаете их по одному. И смотрите когда появится проблема.

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

  • Имелся в виду первый

    • Спасибо, я так и подумал 😉

      • А поскольку он новенький, у него нет legasy кода. Поэтому код у него красивенький, в отличии от старых fckeditor and tinyMCE

        • К сожалению это временное преимущество.
          Ранно или поздно разработчикам придется выбирать, переписывать код заново или сохранить совместимость с предыдущими версиями.
          Не простой выбор, особенно если к тому времени появится много сторонних плагинов или тем для редактора.

  • Никита

    Скажите ещё как сделать однострочные поля для ввода текста схожими по дизайну с получившимся textarea.

    • Проще всего при создании textarea указать атрибут rows=»1".
      К обычному input прицепить редактор, наверное, можно, не пробовал. Но что будет если посетитель в таком редакторе запишет несколько строк текста и отправить форму?

      • Ответ Владимиру

        легко, обратите внимание на строчку mode:»textareas»
        можно использовать любое поле поменяв textareas на input
        rows=»1" — это страшный изврат, покурили бы мануалы перед тем, как людей в заблуждение вводить

        • Мда, читая свои коментарии 2-х летней давности, мне сложно вспомнить о чем шла речь 🙂
          Похоже, я просто не понял вопрос Никиты.

  • Никита

    Скажите ещё как сделать однострочные поля для ввода текста схожими по дизайну с получившимся textarea.

    • Проще всего при создании textarea указать атрибут rows=»1".
      К обычному input прицепить редактор, наверное, можно, не пробовал. Но что будет если посетитель в таком редакторе запишет несколько строк текста и отправить форму?

  • Никита

    Я имел ввиду только рамку и фон, без возможностей редактора. Я сам нашёл, может кому пригодится:
    border: 1px solid #CCCCCC;
    background: none repeat scroll 0 0 #FFFFFF;

  • Никита

    Я имел ввиду только рамку и фон, без возможностей редактора. Я сам нашёл, может кому пригодится:
    border: 1px solid #CCCCCC;
    background: none repeat scroll 0 0 #FFFFFF;

  • подскажите куда нужно положить файл русификации ru.xml ?

    • Это немного запутанный момент у них на сайте 🙂
      Вам не нужен ru.xml (если, конечно, вы не собираетесь делать собственные файлы переводов).

      Нужно отметить чекбокс напротив соответствующего языка и нажать кнопку Download под таблицей. В результате вы получите файл tinymce_lang_pack.zip. Его нужно распаковать в папку с редактором.
      Выбор языка я описывал в статье.

      Если что-то не получится, пишите!

  • подскажите куда нужно положить файл русификации ru.xml ?

    • Это немного запутанный момент у них на сайте 🙂
      Вам не нужен ru.xml (если, конечно, вы не собираетесь делать собственные файлы переводов).

      Нужно отметить чекбокс напротив соответствующего языка и нажать кнопку Download под таблицей. В результате вы получите файл tinymce_lang_pack.zip. Его нужно распаковать в папку с редактором.
      Выбор языка я описывал в статье.

      Если что-то не получится, пишите!

  • Alex

    Расскажите начинающему, пожалуйста поподробнее, как внедрить html код к «этому примеру (http://tinymce.moxiecode.com/examples/full.php)» в SugarCRM.

    • Я никогда не работал с SugarCRM.
      Но принцип подключения редактора примерно одинаков для всех CMS и движков.
      Вам нужно найти где подключаются JS файлы (обычно это файл темы в котором создается заголовок страницы (head), в WP, например, он так и называется header.php).
      Добавить в него код подключения редактора (как это сделать рассказано в статье).
      Скопировать редактор в корень сайта, например, так чтобы он был доступен по адресу sitename.com/js/tinymce/

      Чтобы увеличить количество кнопок на панели замените
      theme:»simple»
      на
      theme : «advanced»

  • Alex

    Расскажите начинающему, пожалуйста поподробнее, как внедрить html код к «этому примеру (http://tinymce.moxiecode.com/examples/full.php)» в SugarCRM.

    • Я никогда не работал с SugarCRM.
      Но принцип подключения редактора примерно одинаков для всех CMS и движков.
      Вам нужно найти где подключаются JS файлы (обычно это файл темы в котором создается заголовок страницы (head), в WP, например, он так и называется header.php).
      Добавить в него код подключения редактора (как это сделать рассказано в статье).
      Скопировать редактор в корень сайта, например, так чтобы он был доступен по адресу sitename.com/js/tinymce/

      Чтобы увеличить количество кнопок на панели замените
      theme:»simple»
      на
      theme : «advanced»

  • hasbah

    хотел вставить в asp.net,а мне пишет:
    Error updating JScript IntelliSense: C:Documents and SettingsАдминистраторМои документыVisual Studio 2008WebSitesWebSite7tiny_mcetiny_mce.js: «DOM.get(…)» — есть null или не является объектом @ 0:31610

    в чем проблема ?

    • С ASP я не работал, поэтому ответить не могу.
      Вообще-то редактор полностью написан на JavaScript, поэтому не зависит ни от ASP, ни от PHP. Попробуйте просто вставить скрипты внутрь страницы (вместе с обычным html).

  • hasbah

    хотел вставить в asp.net,а мне пишет:
    Error updating JScript IntelliSense: C:\Documents and Settings\Администратор\Мои документы\Visual Studio 2008\WebSites\WebSite7\tiny_mce\tiny_mce.js: «DOM.get(…)» — есть null или не является объектом @ 0:31610

    в чем проблема ?

    • С ASP я не работал, поэтому ответить не могу.
      Вообще-то редактор полностью написан на JavaScript, поэтому не зависит ни от ASP, ни от PHP. Попробуйте просто вставить скрипты внутрь страницы (вместе с обычным html).

  • hasbah

    я так и делал

    • Меня немного смущает строка C:Documents and SettingsАдминистраторМои документыVisual Studio 2008WebSitesWebSite7tiny_mcetiny_mce.js. Почему указан путь к файлу на диске, а не на сервере?
      Т.е. localhost/tiny_mce/tiny_mce.js

  • hasbah

    я так и делал

    • Меня немного смущает строка C:\Documents and Settings\Администратор\Мои документы\Visual Studio 2008\WebSites\WebSite7\tiny_mce\tiny_mce.js. Почему указан путь к файлу на диске, а не на сервере?
      Т.е. localhost/tiny_mce/tiny_mce.js

  • Елена

    Здравствуйте!
    Скажите пожалуйста, как в TinyMCE переопределить обработчик существующей кнопки?

    • Я не уверен, что это лучшее решение, но должно работать

      tinyMCE.init({
      mode:"textareas",
      theme:"simple",
      language:"ru",
      setup: function(ed) {
      ed.onPostRender.add(function() {
      tinymce.dom.Event.add('mce_0_underline',
      'click', function(e) {alert('111');});
      });
      }
      });

    • mce_0_underline — это id кнопки подчеркивания, можно заменить на любой другой.

  • Елена

    Здравствуйте!
    Скажите пожалуйста, как в TinyMCE переопределить обработчик существующей кнопки?

    • Я не уверен, что это лучшее решение, но должно работать

      tinyMCE.init({
      mode:"textareas",
      theme:"simple",
      language:"ru",
      setup: function(ed) {
      ed.onPostRender.add(function() {
      tinymce.dom.Event.add('mce_0_underline',
      'click', function(e) {alert('111');});
      });
      }
      });

    • mce_0_underline — это id кнопки подчеркивания, можно заменить на любой другой.

  • Елена

    Огромное спасибо, Владимир!

  • Елена

    Огромное спасибо, Владимир!

  • Елена

    Почему Вы считаете, что это не лучшее решение?

    • Я не очень хорошо ориентируюсь в API tinyMCE, просто редко приходится его настраивать. Поэтому я просто не уверен, возможно существует более удачное решение, а может быть и нет 😉

  • Елена

    Почему Вы считаете, что это не лучшее решение?

    • Я не очень хорошо ориентируюсь в API tinyMCE, просто редко приходится его настраивать. Поэтому я просто не уверен, возможно существует более удачное решение, а может быть и нет 😉

  • hasbah

    а меня больше всего пугает это …»DOM.get(…)» — есть null или не является объектом @ 0:31610

    • Это означает только то, что объект DOM не создан.
      Вообще такое впечатление, что не подключился tiny_mce_gzip.js

  • hasbah

    а меня больше всего пугает это …»DOM.get(…)» — есть null или не является объектом @ 0:31610

    • Это означает только то, что объект DOM не создан.
      Вообще такое впечатление, что не подключился tiny_mce_gzip.js

  • А нет ли у кого ссылочки на плагин для отключения глючного сжатия. Не хочется лезть в коды на многочисленных проектов.Буду признателен

    • А о каком глючном сжатии речь? У меня gzip версия работает отлично, точнее точно так же как и не сжатая.

  • А нет ли у кого ссылочки на плагин для отключения глючного сжатия. Не хочется лезть в коды на многочисленных проектов.Буду признателен

    • А о каком глючном сжатии речь? У меня gzip версия работает отлично, точнее точно так же как и не сжатая.

  • Не могу сделать чтобы картинки отображались! В tinyMCE легко вставляются, а после отправки страницы только текст без картинок! Если возможно помогите!

  • Не могу сделать чтобы картинки отображались! В tinyMCE легко вставляются, а после отправки страницы только текст без картинок! Если возможно помогите!

  • Все понял сам! Извините!

    • Напишите как решили проблему.
      У меня картинки не всегда отображаются, пробую менять урл картинок иногда помагает. Не пойму как сделать чтобы на любой странице сайта отображались картинки.
      PS криво отображаются на страницах с SOBI2

  • Все понял сам! Извините!

    • Напишите как решили проблему.
      У меня картинки не всегда отображаются, пробую менять урл картинок иногда помагает. Не пойму как сделать чтобы на любой странице сайта отображались картинки.
      PS криво отображаются на страницах с SOBI2

  • Денис

    может есть решение, как в вордпресе и еще где-то видел, чтоб при копировании из ворда и прочих ресурсов, чтоб с клипбоарда отсеивало всякие левые теги типа
    /* Style Definitions */
    и тому подобное…

  • Денис

    может есть решение, как в вордпресе и еще где-то видел, чтоб при копировании из ворда и прочих ресурсов, чтоб с клипбоарда отсеивало всякие левые теги типа
    /* Style Definitions */
    и тому подобное…

  • Денис

    не влезли —

  • Денис

    не влезли —

  • Денис

    Normal 0 MicrosoftInternetExplorer4

  • Денис

    Normal 0 MicrosoftInternetExplorer4

  • Можно переключится в режим редактирования кода, в этом случае будет вставлен только текст.
    Кроме того, можно скопировать текст сначала в блокнот, а из него — в редактор.

    • Денис

      это да… но вот как-то настраивается сам тини. видел в вордпресе, но не могу разобрать по параметрам.. там когда из ворда идет вставка, то после переключения на хтмл-код, там чисто! только br, font, table.. и нет всякой белеберды от стилей других.

      • Честно говоря, я никогда не пробовал. Напрямую из word'а ничего не вставляю. А в WP у меня визуальный режим вообще отключен. Посмотрите, может в WP используются дополнительные плагины?

  • Можно переключится в режим редактирования кода, в этом случае будет вставлен только текст.
    Кроме того, можно скопировать текст сначала в блокнот, а из него — в редактор.

    • Денис

      это да… но вот как-то настраивается сам тини. видел в вордпресе, но не могу разобрать по параметрам.. там когда из ворда идет вставка, то после переключения на хтмл-код, там чисто! только br, font, table.. и нет всякой белеберды от стилей других.

      • Честно говоря, я никогда не пробовал. Напрямую из word'а ничего не вставляю. А в WP у меня визуальный режим вообще отключен. Посмотрите, может в WP используются дополнительные плагины?

  • Kamilla

    при работе с этим редактором я столкнулась с некоторыми проблемами.

    подскажите пожалуйста, как их решить!

    если в mode указать exactи указать элементы, то они крайне странно отображаются (приглядитесь: формочка внутки формочки)
    http://i062.radikal.ru/0907/aa/66a320871a9f.bmp

    если применять ко всем областям — то всё будет нормальгл, вот так: http://i024.radikal.ru/0907/e0/7dab2ed68727.png

    • А в чём проблема? На втором скриншоте всё нормально выглядит.

      Не понятно, что в конечном итоге вы хотите получить.

  • Kamilla

    при работе с этим редактором я столкнулась с некоторыми проблемами.

    подскажите пожалуйста, как их решить!

    если в mode указать exactи указать элементы, то они крайне странно отображаются (приглядитесь: формочка внутки формочки)
    http://i062.radikal.ru/0907/aa/66a320871a9f.bmp

    если применять ко всем областям — то всё будет нормальгл, вот так: http://i024.radikal.ru/0907/e0/7dab2ed68727.png

    • А в чём проблема? На втором скриншоте всё нормально выглядит.

      Не понятно, что в конечном итоге вы хотите получить.

  • Евгений

    А как в нем PHP код вставлять???

    • Код можно вставить как обычный текст. Выполняться он естественно не будет.

  • Евгений

    А как в нем PHP код вставлять???

    • Код можно вставить как обычный текст. Выполняться он естественно не будет.

  • Dachiko

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

  • Dachiko

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

  • Dachiko

    Теги в предыдущем сообщении конечно-же порезались 🙂
    Имелись ввиду xtml и body.

  • Dachiko

    Теги в предыдущем сообщении конечно-же порезались 🙂
    Имелись ввиду xtml и body.

  • Где именно вы получаете полноценную страницу?

  • Где именно вы получаете полноценную страницу?

  • Dachiko

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

  • Dachiko

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

  • Доброго времени суток.
    Подскажите пожалуйста как заменить теги —
    например при кнопке B он вставляет а мне надо чтобы вставлялось

  • Доброго времени суток.
    Подскажите пожалуйста как заменить теги —
    например при кнопке B он вставляет а мне надо чтобы вставлялось

  • Мда оригинально получилось) ссори)
    в общем заменить в редакторе при клике на кнопке — болд итег стронг на б

    • Можно переопределить обработчик кнопки. Примерно в середине этой ленты комментариев я приводил пример переопределения обработчика.

  • Мда оригинально получилось) ссори)
    в общем заменить в редакторе при клике на кнопке — болд итег стронг на б

    • Можно переопределить обработчик кнопки. Примерно в середине этой ленты комментариев я приводил пример переопределения обработчика.

  • Вопросик к автору:
    Подскажите, меня очень за***ло (не устраивает уж сильно) что tinyMCE исправляет исходники при Submit'е, например, хочу строку [123], исправляет на [123], вместо ставит параграфы ()… Самое отвратительное другое: допустим даже что такое форматирование как делается сейчас — удобно, но когда я его выключаю tinyMCE.get('edt1').hide(); (edt1 — ID TEXTAREA) и исправляю 123 на 123, то при сабмите он все равно исправляет код! Помогите…

    • Я отключаю редктор так:
      tinyMCE.get('textarea_id').remove();
      Содержимое textarea после этого отправляется в том виде, в котором вы видите его на экране. Т.е. если уберете <p>, то их и не будет.
      Кроме того, в расширенном варианте редактора есть кнопка html. Она открывает окно в котором можно исправить разметку. Правда если вы уберете <p>, то слова будут записаны в одну строку.
      Я так понимаю у вас текст вперемешку с кодом? Может на стороне сервера анализировать полученный текст и убирать не нужные параграфы?

      • Все гораздо скромней, Редактор подключается к полю для ввода параметров, котороым выступает TEXTAREA. Эти параметры могут быть и HTML и просто текст, чаще HTML. Функция редактора HTML все равно возвратит параграф Р наместо после того как я нажму Update в окне HTML. Полное отключение — это вариант! А как вернуть потом редактор назад?

        • С помощью
          tinyMCE.init({…})

          Возможно существует другой способ, я не уверен, просто такую задачу раньше решать не приходилось. Но init работает точно работает 😉

      • Сергей

        В редакторе TinyMCE, установленном в MODX, столкнулся с такой же не очень приятной вещью. При попытке вставить допустим имидж или просто пустую строку, редактор автоматом добавляет к нему теги оформления параграфа и не хочет их удалять даже в простом режиме HTML! Как можно отключить это принудительное автоматическое форматирование? Как заменить это на перенос строки () я уже разобрался, но хотелось бы убрать это совсем 🙂

  • Вопросик к автору:
    Подскажите, меня очень за***ло (не устраивает уж сильно) что tinyMCE исправляет исходники при Submit'е, например, хочу строку [123], исправляет на [123], вместо ставит параграфы ()… Самое отвратительное другое: допустим даже что такое форматирование как делается сейчас — удобно, но когда я его выключаю tinyMCE.get('edt1').hide(); (edt1 — ID TEXTAREA) и исправляю 123 на 123, то при сабмите он все равно исправляет код! Помогите…

    • Я отключаю редктор так:
      tinyMCE.get('textarea_id').remove();
      Содержимое textarea после этого отправляется в том виде, в котором вы видите его на экране. Т.е. если уберете <p>, то их и не будет.
      Кроме того, в расширенном варианте редактора есть кнопка html. Она открывает окно в котором можно исправить разметку. Правда если вы уберете <p>, то слова будут записаны в одну строку.
      Я так понимаю у вас текст вперемешку с кодом? Может на стороне сервера анализировать полученный текст и убирать не нужные параграфы?

      • Все гораздо скромней, Редактор подключается к полю для ввода параметров, котороым выступает TEXTAREA. Эти параметры могут быть и HTML и просто текст, чаще HTML. Функция редактора HTML все равно возвратит параграф Р наместо после того как я нажму Update в окне HTML. Полное отключение — это вариант! А как вернуть потом редактор назад?

        • С помощью
          tinyMCE.init({…})

          Возможно существует другой способ, я не уверен, просто такую задачу раньше решать не приходилось. Но init работает точно работает 😉

  • Спасибо, я решил проблему переходом на FCK

  • Спасибо, я решил проблему переходом на FCK

  • gogi

    А где можно найти ещё более подробное описание как включить кнопку на панели инструментов ? Может кто знает где есть видео уроки на эту тему ? Немогу я включить кнопку media и всё блин. ПОМОГИТЕ………

    • Лучший способ — зайти на страницу с демонстрационными примерами (на оф.сайте) и поковырять firebug'ом.

  • gogi

    А где можно найти ещё более подробное описание как включить кнопку на панели инструментов ? Может кто знает где есть видео уроки на эту тему ? Немогу я включить кнопку media и всё блин. ПОМОГИТЕ………

    • Лучший способ — зайти на страницу с демонстрационными примерами (на оф.сайте) и поковырять firebug'ом.

  • Владимир спасибо за статью.
    Только начал изучать этот редактор.
    Но никак не могу изменить размер шрифта по умолчанию
    правлю
    tiny_mce/themes/simple/skins/default/content.css

    все равно размер 10

    • Открываем файл
      tiny_mcethemessimpleskinsdefaultcontent.css
      (путь может изменяться в зависимости от темы, которую вы используете)
      и изменяем стили
      body, td, pre {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 10px;
      }

  • Владимир спасибо за статью.
    Только начал изучать этот редактор.
    Но никак не могу изменить размер шрифта по умолчанию
    правлю
    tiny_mce/themes/simple/skins/default/content.css

    все равно размер 10

    • Открываем файл
      tiny_mce\themes\simple\skins\default\content.css
      (путь может изменяться в зависимости от темы, которую вы используете)
      и изменяем стили
      body, td, pre {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 10px;
      }

  • Элла

    Начала использовать этот редактор для админки клиентов, до определенного момента была довольна, пока не столкнулась с проблемой, которую вследствии малознания явыскрипт не могу решить никак. Роюсь в кодах редактора уже вторые сутки, помогите если можете!
    Проблема такая, значит админка у меня стоит на модреврайте в одной папке, редктор паралельно в папке, а закачка картинок для статей сайта еще в паралельной папке. Я написала отдельно закачку картинок в админке, и там же вижу пути. Мне надо чтобы пути картинок оставались абсолютными, то есть типа http://www и т.д. Но когад я стою в админке, я уже по модреврайту нахожусь типа в подпапках, то когда я вставляю урл картинки, пока я еще только его поставила, он нормальный, после отправки формы — урлы идут в базу уже типа ../../и там дальше путь до картинки относительно корня сайта.
    Потмо я меняю пути например в mysql напрямую, но когда я захожу снова в эту статью в редакторе, то он уже при попадании туда снова меняет мне пути на ../../блабла..
    Как убрать эту автозамену путей? Эти статьи у меня будут еще на других сайтах стоять автоматически (единая база для нескольких сайтах) и пусть пока урлы бы оставались как я их ставлю.
    Что посоветуете?

    • Я сам с такой проблемой не сталкивался. Могу только посоветовать использовать решение как в админке WordPress. Т.е. осуществлять загрузку картинок не используя редактор (с помощью отдельной формы). А в редактор просто вставлять ссылку на загруженную картинку.

      • Dhuck

        Здравствуйте, Владимир! Очень полезная статья для начинающих работать с tiny_mce. Так как я тоже отношусь к начинающим у меня к Вам такой вопрос: можно ли добавить свою кнопку для встроенной загрузки изображения в tiny_mce рядом с полем адреса ввода изображения, для вызова собственной формы загрузки изображения, которая возвращает в поле «Адрес изображения» tiny_mce путь загруженного изображения? Если да, то не подскажите как или ссылку скинте гдеможно почитать про это, или может есть уже готовые решения. Буду очень благодарен! P.S. я пишу на .net.

        • Да, можно. Только вам нужно искать не загрузку изображений в TinyMCE, а просто любой скрипт для загрузки изображений.

          После того, как изображение будет загружено на сервер, ссылку на него можно вставить двумя способами.
          1) Сделать свою кнопку «Вставить картинку» (отдельно от TinyMCE), клик по которой вставит ссылку в редактор (так реализована загрузка картинок в WordPress).

          2) Использовать сам TinyMCE. В расширенной версии редактора есть кнопка вставки изображений (она открывает форму с кучей настроек). Я советую вам для начала попробовать именно этот вариант.

        • рррр

          Он всё равно правит пути. Хоть ты набири вручную.

        • У вас не получается указать правильную ссылку на картинку?
          Как именно tinyMce изменяет ссылку? Приведите пример.

        • рррр

          Так что твой совет медвежья услуга

  • Элла

    Начала использовать этот редактор для админки клиентов, до определенного момента была довольна, пока не столкнулась с проблемой, которую вследствии малознания явыскрипт не могу решить никак. Роюсь в кодах редактора уже вторые сутки, помогите если можете!
    Проблема такая, значит админка у меня стоит на модреврайте в одной папке, редктор паралельно в папке, а закачка картинок для статей сайта еще в паралельной папке. Я написала отдельно закачку картинок в админке, и там же вижу пути. Мне надо чтобы пути картинок оставались абсолютными, то есть типа http://www и т.д. Но когад я стою в админке, я уже по модреврайту нахожусь типа в подпапках, то когда я вставляю урл картинки, пока я еще только его поставила, он нормальный, после отправки формы — урлы идут в базу уже типа ../../и там дальше путь до картинки относительно корня сайта.
    Потмо я меняю пути например в mysql напрямую, но когда я захожу снова в эту статью в редакторе, то он уже при попадании туда снова меняет мне пути на ../../блабла..
    Как убрать эту автозамену путей? Эти статьи у меня будут еще на других сайтах стоять автоматически (единая база для нескольких сайтах) и пусть пока урлы бы оставались как я их ставлю.
    Что посоветуете?

    • Я сам с такой проблемой не сталкивался. Могу только посоветовать использовать решение как в админке WordPress. Т.е. осуществлять загрузку картинок не используя редактор (с помощью отдельной формы). А в редактор просто вставлять ссылку на загруженную картинку.

      • Dhuck

        Здравствуйте, Владимир! Очень полезная статья для начинающих работать с tiny_mce. Так как я тоже отношусь к начинающим у меня к Вам такой вопрос: можно ли добавить свою кнопку для встроенной загрузки изображения в tiny_mce рядом с полем адреса ввода изображения, для вызова собственной формы загрузки изображения, которая возвращает в поле «Адрес изображения» tiny_mce путь загруженного изображения? Если да, то не подскажите как или ссылку скинте гдеможно почитать про это, или может есть уже готовые решения. Буду очень благодарен! P.S. я пишу на .net.

        • Да, можно. Только вам нужно искать не загрузку изображений в TinyMCE, а просто любой скрипт для загрузки изображений.

          После того, как изображение будет загружено на сервер, ссылку на него можно вставить двумя способами.
          1) Сделать свою кнопку «Вставить картинку» (отдельно от TinyMCE), клик по которой вставит ссылку в редактор (так реализована загрузка картинок в WordPress).

          2) Использовать сам TinyMCE. В расширенной версии редактора есть кнопка вставки изображений (она открывает форму с кучей настроек). Я советую вам для начала попробовать именно этот вариант.

  • Начал задумывать разработку пары плагинов для TinyMCE, но есть вопросы по работе функций execCommand, и функций созданий и вызова диалоговых окон.
    Хочу понять, каким образом вызвать диалоговое окно, и потом, обработав, передать в редактор код. (Например [!код!])
    Подскажите, пожалуйста, где в рунете есть удобоваримая доккументация по этим вопросам. Спсб.

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

  • Начал задумывать разработку пары плагинов для TinyMCE, но есть вопросы по работе функций execCommand, и функций созданий и вызова диалоговых окон.
    Хочу понять, каким образом вызвать диалоговое окно, и потом, обработав, передать в редактор код. (Например [!код!])
    Подскажите, пожалуйста, где в рунете есть удобоваримая доккументация по этим вопросам. Спсб.

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

  • Здравствуйте. Меня интересует следующий вопрос:
    Возможно ли указать по умолчанию, чтобы все формы на странице отображались с темой simple, без лишних указаний, с тегом id='hard' форма со всеми элементами, с id='none' — форма без элементов, как есть.
    Пример:

    tinyMCE.init({
    language : "ru",
    mode : "textareas",
    editor_deselector : "none",
    theme : "simple"
    });
    tinyMCE.init({
    language : "ru",
    editor_selector : "hard",
    theme : "advanced",
    skin : "o2k7",
    skin_variant : "silver"
    });

    Никак не могу его завести.

    • Чтобы работал editor_selector нужно установить
      mode : «specific_textareas»

      Я не знаю точно как будут работать два метода init.
      Думаю, что если к формам с темой simple добавить какой-нибудь класс, то решить задачу было бы проще. В общем, не уверен, что можно таким образом подключить редакторы «по умолчанию».

    • Владимир

      Попробовал, получилось. И 2 init-a вместе работают, только во втором нужно тоже указывать атрибут mode:»textareas»

      tinyMCE.init({
      mode:"textareas",
      theme:"simple",
      editor_selector : "hard",
      language:"ru"
      });

      tinyMCE.init({
      mode:"textareas",
      language : "ru",
      editor_selector : "hard1",
      theme : "advanced",
      skin : "o2k7",
      skin_variant : "silver"
      });

      Чтобы textarea отображал простой набор кнопок, вешаем класс class=»hard», расширенный — hard1, чтобы вообще без кнопок — никакой класс не указываем и все.

  • Здравствуйте. Меня интересует следующий вопрос:
    Возможно ли указать по умолчанию, чтобы все формы на странице отображались с темой simple, без лишних указаний, с тегом id='hard' форма со всеми элементами, с id='none' — форма без элементов, как есть.
    Пример:

    tinyMCE.init({
    language : "ru",
    mode : "textareas",
    editor_deselector : "none",
    theme : "simple"
    });
    tinyMCE.init({
    language : "ru",
    editor_selector : "hard",
    theme : "advanced",
    skin : "o2k7",
    skin_variant : "silver"
    });

    Никак не могу его завести.

    • Чтобы работал editor_selector нужно установить
      mode : «specific_textareas»

      Я не знаю точно как будут работать два метода init.
      Думаю, что если к формам с темой simple добавить какой-нибудь класс, то решить задачу было бы проще. В общем, не уверен, что можно таким образом подключить редакторы «по умолчанию».

    • Владимир

      Попробовал, получилось. И 2 init-a вместе работают, только во втором нужно тоже указывать атрибут mode:»textareas»

      tinyMCE.init({
      mode:"textareas",
      theme:"simple",
      editor_selector : "hard",
      language:"ru"
      });

      tinyMCE.init({
      mode:"textareas",
      language : "ru",
      editor_selector : "hard1",
      theme : "advanced",
      skin : "o2k7",
      skin_variant : "silver"
      });

      Чтобы textarea отображал простой набор кнопок, вешаем класс class=»hard», расширенный — hard1, чтобы вообще без кнопок — никакой класс не указываем и все.

  • Добрый день! Эта крохотная зараза творит ужасные вещи. лан, пишет криво как дримвивер, но куда денешься если самому лень. всё бы ничего но какого фига оно привит мой код? я прописываю одно, оно берёт и исправляет на своё… например убирает слэши перед ссылкой на изображение — и всё не работает.
    как бороться?

    • Я знаю только один эффективный способ — использовать html режим, т.е. по-сути отключить редактор. Именно так я сделал в админке этого блога.

      • тогда смысл редактора проподает))))

        вообщем я решила проблему, если кому-то понадобится, делайте так:

        там где у вас tinyMCE.init({ })
        впишите внутрь convert_urls : false

        и будет нам счастье великое, оно перестанет хулиганить)

        • это точно, смысл пропадает 🙂
          я отключал потому, что меня не устраивала разметка не только url.

      • как сделать html режим? просто теперь мне нужно сделать так:

        формочка, id=»small»

        но

        чтобы при отправке tiny ничего не делал! вообще ничего!
        // дело в том, что в текстовую формочку инклюдится файл, его код подсвечивается функцией PHP, а я его тем временем правлю
        и нажимаю ок — содержимое формочки записывается в файл — но не должны быть лишние подписи этого редактора!!!!!!

        просто я не могу найти редактор, чтоб подсвечивал код!! приходится так извращаться…

        • Вообще в редакторе есть кнопка переключения в html режим. И должен быть соответствующий метод. Но, скорее всего, это вам не поможет, т.к. в этом режиме вы просто увидите все ваши теги подсветки (так как их расставила PHP функция).

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

  • Добрый день! Эта крохотная зараза творит ужасные вещи. лан, пишет криво как дримвивер, но куда денешься если самому лень. всё бы ничего но какого фига оно привит мой код? я прописываю одно, оно берёт и исправляет на своё… например убирает слэши перед ссылкой на изображение — и всё не работает.
    как бороться?

    • Я знаю только один эффективный способ — использовать html режим, т.е. по-сути отключить редактор. Именно так я сделал в админке этого блога.

      • тогда смысл редактора проподает))))

        вообщем я решила проблему, если кому-то понадобится, делайте так:

        там где у вас tinyMCE.init({ })
        впишите внутрь convert_urls : false

        и будет нам счастье великое, оно перестанет хулиганить)

        • это точно, смысл пропадает 🙂
          я отключал потому, что меня не устраивала разметка не только url.

      • как сделать html режим? просто теперь мне нужно сделать так:

        формочка, id=»small»

        но

        чтобы при отправке tiny ничего не делал! вообще ничего!
        // дело в том, что в текстовую формочку инклюдится файл, его код подсвечивается функцией PHP, а я его тем временем правлю
        и нажимаю ок — содержимое формочки записывается в файл — но не должны быть лишние подписи этого редактора!!!!!!

        просто я не могу найти редактор, чтоб подсвечивал код!! приходится так извращаться…

        • Вообще в редакторе есть кнопка переключения в html режим. И должен быть соответствующий метод. Но, скорее всего, это вам не поможет, т.к. в этом режиме вы просто увидите все ваши теги подсветки (так как их расставила PHP функция).

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

  • ах вы этот режим имели ввиду, хах, я-то думала, что сразу в формочке код) ясно, спасибо за статью, я правда до неё ещё не добралась, хотя уже живу на этом сайте)

    а onSubmit это к чему относится? вы какое действие имеете ввиду?

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

  • ах вы этот режим имели ввиду, хах, я-то думала, что сразу в формочке код) ясно, спасибо за статью, я правда до неё ещё не добралась, хотя уже живу на этом сайте)

    а onSubmit это к чему относится? вы какое действие имеете ввиду?

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

  • ну эту задумку проще сделать на PHP, я как раз это делала, однако достаточно будет striptags ?

  • ну эту задумку проще сделать на PHP, я как раз это делала, однако достаточно будет striptags ?

  • Проблема такая: использовал TinyMCE в связке с TinyBrowser-ом на Explay CMS. Всё вроде нормально, но проблема появилась такая- ссылки на картинки и смайлы генерятся неверно и в итоге не отображаются. Появляются неверные пути. в чём может быть проблема?

    • Напишите, пожалуйста, какие именно должны быть пути и какие получаются.

  • Проблема такая: использовал TinyMCE в связке с TinyBrowser-ом на Explay CMS. Всё вроде нормально, но проблема появилась такая- ссылки на картинки и смайлы генерятся неверно и в итоге не отображаются. Появляются неверные пути. в чём может быть проблема?

    • Напишите, пожалуйста, какие именно должны быть пути и какие получаются.

  • Олег

    Здраствуйте, я столкнулся с такой проблемой — добавляю в форму html код сохраняю, а он (tiny_mce) исправляет его как захочет, например пропадает несколько блоков. Как с этим можно бороться?

    • Он исправляет не как захочет, а по своим строго определенным правилам 🙂
      А если серьезно, подумайте, действительно ли вам нужен tinyMCE? Смысл этого редактора в том, что он ставит свою разметку.
      Может вам будет достаточно кнопок как над формой добавления комментария в этом блоге?

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

      • Помог, блять. Спрашивали, как сделать так, чтобы код не комментировался, а он тупо сказал, чтобы не меняли html-код. Функция есть — должна работать. Но она, сука, не работает.

  • Олег

    Здраствуйте, я столкнулся с такой проблемой — добавляю в форму html код сохраняю, а он (tiny_mce) исправляет его как захочет, например пропадает несколько блоков. Как с этим можно бороться?

    • Он исправляет не как захочет, а по своим строго определенным правилам 🙂
      А если серьезно, подумайте, действительно ли вам нужен tinyMCE? Смысл этого редактора в том, что он ставит свою разметку.
      Может вам будет достаточно кнопок как над формой добавления комментария в этом блоге?

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

  • Александр

    Доброго времени суток!

    Поставил себе этот редактор — очень даже ничего. Но есть небольшой баг — он букву «ш» выводит как «мар�?рут».
    Можно ли это как-то исправить?

    Заранее спасибо за ответ.

    • Боюсь проблема не в редакторе, а в кодировках вашей БД или PHP скриптов.
      Попробуйте ввести слово «маршрут» в редакторе, который размещен на оф. сайте, там все нормально.

  • Александр

    Доброго времени суток!

    Поставил себе этот редактор — очень даже ничего. Но есть небольшой баг — он букву «ш» выводит как «мар??рут».
    Можно ли это как-то исправить?

    Заранее спасибо за ответ.

    • Боюсь проблема не в редакторе, а в кодировках вашей БД или PHP скриптов.
      Попробуйте ввести слово «маршрут» в редакторе, который размещен на оф. сайте, там все нормально.

  • Спасибо огромное за статью!!! Чё бы раньше не набрать в поиске, просидел пол ночи в поисках варианта изменения размера шрифта, так ничего и не нарыв.
    Ещё раз СПАСИБО!

  • Спасибо огромное за статью!!! Чё бы раньше не набрать в поиске, просидел пол ночи в поисках варианта изменения размера шрифта, так ничего и не нарыв.
    Ещё раз СПАСИБО!

  • campusboy

    Классная статья и комментарии ничуть не хуже. Почитал всё. Многое понадобиться. Но на так и не увидел как запретить редактору править тот код, который очень нужен. Моя проблема и привела к вам, сразу в закладки))В общем, я ссылки ставлю в Сама ссылка. При переходе в визуальный редактор и обратно — всё пропадает. Вот nofollow никуда не девается. Искал в исходниках, что правит код — не нашел, да и мало понимаю ява скрипт я. Какие у кого мысли? Плагины ставить на свой Ворпресс не хочу. Просто хочется разобраться 🙂

    • campusboy

      о, не отобразилось 🙁 я говорил о теге noindex. Его этот редактор не хочет понимать, просто стирает. Где убрать это ограничение?

      • Попробуйте использовать опцию
        tinyMCE.init({

        cleanup : false
        });
        или
        verify_html : false

        Проблема в том, что у редактора куча настроек, которые влияют на то, как он обрабатывает введенный текст. Полный перечень здесь (раздел Cleanup/Output).

        Из-за какой именно опции происходит удаление noindex я не знаю, нужно пробовать.

        • campusboy

          Не сочтите за тупого, но я не могу найти такой текст 🙁 Выражение tinyMCE.init где находится? А те выражения я понаходил, но они идут как комментарий в ява скрипте. Можете рассказать как найти tinyMCE.init?

        • Это код, который подключает редактор. Смотрите первый листинг в этой статье.

  • campusboy

    Классная статья и комментарии ничуть не хуже. Почитал всё. Многое понадобиться. Но на так и не увидел как запретить редактору править тот код, который очень нужен. Моя проблема и привела к вам, сразу в закладки))В общем, я ссылки ставлю в Сама ссылка. При переходе в визуальный редактор и обратно — всё пропадает. Вот nofollow никуда не девается. Искал в исходниках, что правит код — не нашел, да и мало понимаю ява скрипт я. Какие у кого мысли? Плагины ставить на свой Ворпресс не хочу. Просто хочется разобраться 🙂

    • campusboy

      о, не отобразилось 🙁 я говорил о теге noindex. Его этот редактор не хочет понимать, просто стирает. Где убрать это ограничение?

      • Попробуйте использовать опцию
        tinyMCE.init({

        cleanup : false
        });
        или
        verify_html : false

        Проблема в том, что у редактора куча настроек, которые влияют на то, как он обрабатывает введенный текст. Полный перечень здесь (раздел Cleanup/Output).

        Из-за какой именно опции происходит удаление noindex я не знаю, нужно пробовать.

        • campusboy

          Не сочтите за тупого, но я не могу найти такой текст 🙁 Выражение tinyMCE.init где находится? А те выражения я понаходил, но они идут как комментарий в ява скрипте. Можете рассказать как найти tinyMCE.init?

        • Это код, который подключает редактор. Смотрите первый листинг в этой статье.

  • Элла

    Скажите пожалуйста, как отключить в этом редакторе автоматическое формирование ссылок и вообще отключить возможность ставить ссылки?

  • Элла

    Скажите пожалуйста, как отключить в этом редакторе автоматическое формирование ссылок и вообще отключить возможность ставить ссылки?

  • Элла

    прописала
    convert_urls : false
    relative_urls : false

    и все равно почему то преобразует

  • Элла

    прописала
    convert_urls : false
    relative_urls : false

    и все равно почему то преобразует

  • Элла

    здравствуйте! Хочу (просто уже мечтаю) отключить преобразование текста типа http://www.blabla в ссылку при вставлении в этот редактор.
    Сделала convert_urls : false,

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

  • Элла

    здравствуйте! Хочу (просто уже мечтаю) отключить преобразование текста типа http://www.blabla в ссылку при вставлении в этот редактор.
    Сделала convert_urls : false,

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

  • Элла

    Я поняла! convert_urls : false не работает у меня только в IE 7, в мозиле и опере работает. Что же теперь для ИЕ сделать? А есть возможность вообще снести эту функцию? Мало ли где она сработает еще!

    • Очистите кеш IE.
      Есть пример, который вроде нормально работает в IE.

      • Элла

        Я в том примере тоже уже проверяла.. Я ввожу http://www.blabla.com например и оно автоматически преобразуется в ссылку. И емайл то же самое.

      • Элла

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

      • Элла

        Вот тут на главной я форму эту поставила с редактором
        http://www.окна.name

      • Элла

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

        • Я понял. А cleanup : false не помогает?

          В любом случае, вы не сможете запретить ввод ссылок таким способом. Далеко не все спамеры будут вообще пользоваться формой на сайте. Например, с помощью cURL можно сформировать любой запрос с любыми данными и отправить его напрямую вашему серверу. И никакой html-редактор не поможет. Вообще не помогут никакие действия на клиентской стороне.
          Единственное решение — фильтровать все полученные данные php скриптом (перед сохранением их в БД).

          Ссылки можно найти с помощью такого регулярного выражения
          /<ab[^>]*>(.*?)</a>/gi
          а замену выполнить с помощью preg_replace.

  • Элла

    Я поняла! convert_urls : false не работает у меня только в IE 7, в мозиле и опере работает. Что же теперь для ИЕ сделать? А есть возможность вообще снести эту функцию? Мало ли где она сработает еще!

    • Очистите кеш IE.
      Есть пример, который вроде нормально работает в IE.

      • Элла

        Я в том примере тоже уже проверяла.. Я ввожу http://www.blabla.com например и оно автоматически преобразуется в ссылку. И емайл то же самое.

      • Элла

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

      • Элла

        Вот тут на главной я форму эту поставила с редактором
        http://www.окна.name

      • Элла

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

        • Я понял. А cleanup : false не помогает?

          В любом случае, вы не сможете запретить ввод ссылок таким способом. Далеко не все спамеры будут вообще пользоваться формой на сайте. Например, с помощью cURL можно сформировать любой запрос с любыми данными и отправить его напрямую вашему серверу. И никакой html-редактор не поможет. Вообще не помогут никакие действия на клиентской стороне.
          Единственное решение — фильтровать все полученные данные php скриптом (перед сохранением их в БД).

          Ссылки можно найти с помощью такого регулярного выражения
          /<a\b[^>]*>(.*?)</a>/gi
          а замену выполнить с помощью preg_replace.

  • Элла

    Форму на сайте я вытащила чтобы вам показать, вообще добавление любой информации идет из личного кабинета с обязательной авторизацией. У меня на некоторых сайтах есть такое, ссылки не ставят, но сайты с www пишут часто. Просто сайты.
    За замену спасибо, буду применять.

  • Элла

    Форму на сайте я вытащила чтобы вам показать, вообще добавление любой информации идет из личного кабинета с обязательной авторизацией. У меня на некоторых сайтах есть такое, ссылки не ставят, но сайты с www пишут часто. Просто сайты.
    За замену спасибо, буду применять.

  • Элла

    Я потестрировала еще редакторы, мне кажется что ИЕ сам как то автоматически создает эту ссылку при введении .

    • Может быть. В принципе, если не нужно сложное форматирование текста, то редактор можно вообще отключить.
      И авторизация спамеру не помеха, просто чуть больше работы. Нужно один раз зарегистрироваться вручную. А с помощью curl можно спокойно войти в личный кабинет, если известны логин и пароль.

      • Элла

        У меня авторизация не на сессиях. И идет везде проверка. В принципе за последние 2-3 года ни один сайт через личные кабинеты явно не спамили.. Ну как бы не об этом. Решила все таки отрезать при добавлении в базу, делала по вашему совету

        /]*>(.*?)/gi
        preg_replace.

        Не получилось, че то ругалось на регулярное выражение, сделала вот так

        $string = $_POST["texts"];
        $pattern = '|]+>([^<]+)|ism';
        $replacement = '(.*?)';
        echo preg_replace($pattern, $replacement, $string);

        Работает) но если после первой скобки перед a пробел, то уже не работает, и вообще отрезает всю ссылку. А как сделать чтобы осталась середина то.. Я вобще не сильна в этих выражениях, нарыла в интернете.

  • Элла

    Я потестрировала еще редакторы, мне кажется что ИЕ сам как то автоматически создает эту ссылку при введении .

    • Может быть. В принципе, если не нужно сложное форматирование текста, то редактор можно вообще отключить.
      И авторизация спамеру не помеха, просто чуть больше работы. Нужно один раз зарегистрироваться вручную. А с помощью curl можно спокойно войти в личный кабинет, если известны логин и пароль.

      • Элла

        У меня авторизация не на сессиях. И идет везде проверка. В принципе за последние 2-3 года ни один сайт через личные кабинеты явно не спамили.. Ну как бы не об этом. Решила все таки отрезать при добавлении в базу, делала по вашему совету

        /]*>(.*?)/gi
        preg_replace.

        Не получилось, че то ругалось на регулярное выражение, сделала вот так

        $string = $_POST["texts"];
        $pattern = '|]+>([^<]+)|ism';
        $replacement = '(.*?)';
        echo preg_replace($pattern, $replacement, $string);

        Работает) но если после первой скобки перед a пробел, то уже не работает, и вообще отрезает всю ссылку. А как сделать чтобы осталась середина то.. Я вобще не сильна в этих выражениях, нарыла в интернете.

  • Элла

    ой.. вот это вот я не делала
    $replacement = '(.*?)';

    я там пробел поставила.

    • Я немного поспешил.
      Вы может получить отдельно текст, который находится в круглых скобках, т.е. текст ссылки.
      А во втором параметре preg_replace можно указать, что заменять весь текст, который соответствует регулярному выражению можно на этот текст.
      $accents = '/&([A-Za-z]{1,2})(grave|acute|circ|cedil|uml|lig);/';
      $string_encoded = htmlentities($string,ENT_NOQUOTES,'UTF-8');
      $string = preg_replace($accents,'$1',$string_encoded);

      $1 — номер выражения в круглых скобках, нумерация начинается с нуля.

  • Элла

    ой.. вот это вот я не делала
    $replacement = '(.*?)';

    я там пробел поставила.

    • Я немного поспешил.
      Вы может получить отдельно текст, который находится в круглых скобках, т.е. текст ссылки.
      А во втором параметре preg_replace можно указать, что заменять весь текст, который соответствует регулярному выражению можно на этот текст.
      $accents = '/&([A-Za-z]{1,2})(grave|acute|circ|cedil|uml|lig);/';
      $string_encoded = htmlentities($string,ENT_NOQUOTES,'UTF-8');
      $string = preg_replace($accents,'$1',$string_encoded);

      $1 — номер выражения в круглых скобках, нумерация начинается с нуля.

  • JIPuBET

    добро,
    подскажите пожалуйста,
    в tinyMCE есть кнопка html, я туда вставляю свой html а он исправляет фсе, подскажите как отключить чтобы не исправлял не чаго ?
    а то в js добавил CDATA, даблицу вставленную мной исковеркал

    • Попробуйте использовать опцию
      tinyMCE.init({

      cleanup : false
      });
      или
      verify_html : false

  • JIPuBET

    добро,
    подскажите пожалуйста,
    в tinyMCE есть кнопка html, я туда вставляю свой html а он исправляет фсе, подскажите как отключить чтобы не исправлял не чаго ?
    а то в js добавил CDATA, даблицу вставленную мной исковеркал

    • Попробуйте использовать опцию
      tinyMCE.init({

      cleanup : false
      });
      или
      verify_html : false

  • JIPuBET

    СУПЕР СПАСИБО !!!
    Очень Вам благодарен, а то искал часов так 3-4, так толком инфы и не нашол…

    переменная cleanup : false
    почему то за комментировала добавленной мной js скрипт и добавила mce
    ну соответственно за комментированный js не работает.

    а вот verify_html : вставленный html почти не изменяет, но в конце и начале js скрипта все ровно ставит в конце а у меня доктейп такое не признает

  • JIPuBET

    СУПЕР СПАСИБО !!!
    Очень Вам благодарен, а то искал часов так 3-4, так толком инфы и не нашол…

    переменная cleanup : false
    почему то за комментировала добавленной мной js скрипт и добавила mce
    ну соответственно за комментированный js не работает.

    а вот verify_html : вставленный html почти не изменяет, но в конце и начале js скрипта все ровно ставит в конце а у меня доктейп такое не признает

  • JIPuBET

    что-то пооткусывал у меня текст продолжаю…

    а вот verify_html : вставленный html почти не изменяет, но в конце и начале js скрипта все ровно ставит <![CDATA[ ,но скрипт работает 🙂

    а можно как то вообще выключить в ставленой html также и php
    чтобы работал только с текстом который я в вожу в поле редактированния tinymce ? тисто теги кстати он ещо и добавляет слеши /> в конце а у меня доктейп такое не признает

    • Не уверен, что правильно понял вопрос. PHP работает на серевере, т.е. нужно ввести текст в редактор, переслать данные, и только когда сервер их получит с ними можно будет сделать что-нибудь на PHP.
      Или вы хотите сам PHP код вводить в редакторе? Это очень небезопасно (создадите критическую уязвимость).

  • JIPuBET

    что-то пооткусывал у меня текст продолжаю…

    а вот verify_html : вставленный html почти не изменяет, но в конце и начале js скрипта все ровно ставит <![CDATA[ ,но скрипт работает 🙂

    а можно как то вообще выключить в ставленой html также и php
    чтобы работал только с текстом который я в вожу в поле редактированния tinymce ? тисто теги кстати он ещо и добавляет слеши /> в конце а у меня доктейп такое не признает

    • Не уверен, что правильно понял вопрос. PHP работает на серевере, т.е. нужно ввести текст в редактор, переслать данные, и только когда сервер их получит с ними можно будет сделать что-нибудь на PHP.
      Или вы хотите сам PHP код вводить в редакторе? Это очень небезопасно (создадите критическую уязвимость).

  • tray1991

    fа как убрать преобразование символов? а то задолбало уже час проторчал в нете ниче не работает бплина

  • tray1991

    fа как убрать преобразование символов? а то задолбало уже час проторчал в нете ниче не работает бплина

  • tray1991

    о все спасип оказалась проблема совсем не в тини ))) а в настройке codeigniter`a

  • tray1991

    о все спасип оказалась проблема совсем не в тини ))) а в настройке codeigniter`a

  • Как сделать так чтобы первый textarea использовал tinyMCE а следующий textarea не использовал??

    • Использовать параметры mode и elements

      tinyMCE.init({

      mode : «exact»,
      elements : «elm1,elm2»
      });

      elm1, elm2 — это id textarea к которым вы хотите подключить редактор

      • Огромное спасибо, очень помогли.

  • Как сделать так чтобы первый textarea использовал tinyMCE а следующий textarea не использовал??

    • Использовать параметры mode и elements

      tinyMCE.init({

      mode : «exact»,
      elements : «elm1,elm2»
      });

      elm1, elm2 — это id textarea к которым вы хотите подключить редактор

      • Огромное спасибо, очень помогли.

  • JIPuBET

    хм… я tinyMCE использую только в админке,
    насщет добавления php в html редактор, извените перегнул и вправду будет что-то не понятное в mysql php код, ну да ладно,
    я пытаюсь сделать чтобы в редакторе html полностью я мог изменить код, а выходит то что я изменяю он всетаки исправляет на свое, к примеру конечные теги /> и при добавлении alt="" к картинке он вообще ого удаляет
    переменная verify_html работает но не теперь не весь редактирует код

  • JIPuBET

    хм… я tinyMCE использую только в админке,
    насщет добавления php в html редактор, извените перегнул и вправду будет что-то не понятное в mysql php код, ну да ладно,
    я пытаюсь сделать чтобы в редакторе html полностью я мог изменить код, а выходит то что я изменяю он всетаки исправляет на свое, к примеру конечные теги /> и при добавлении alt="" к картинке он вообще ого удаляет
    переменная verify_html работает но не теперь не весь редактирует код

  • JIPuBET

    нашол плагин,
    убирает слэш />
    включает выключает, выключает включает
    вобщем плагин меня выручил а в нете чота н енашол кроме тут

    • Если вы хотите полностью контролировать html разметку, то зачем вам такой редактор? Посмотрите, например, на админку WP, в ней два редактора постов, один использует tinyMCE, а второй — нет (в нём есть только кнопки для быстрой вставки тегов, примерно такие же как над этим полем комментария).
      Думаю, вам будет удобнее сделать тоже самое.

  • JIPuBET

    нашол плагин,
    убирает слэш />
    включает выключает, выключает включает
    вобщем плагин меня выручил а в нете чота н енашол кроме тут

    • Если вы хотите полностью контролировать html разметку, то зачем вам такой редактор? Посмотрите, например, на админку WP, в ней два редактора постов, один использует tinyMCE, а второй — нет (в нём есть только кнопки для быстрой вставки тегов, примерно такие же как над этим полем комментария).
      Думаю, вам будет удобнее сделать тоже самое.

  • Спасибо за статью,всё очень доступно

  • Спасибо за статью,всё очень доступно

  • Андрей

    Здравствуйте, подскажите пожалуйста, как активировать модуль youtube в TinyMCE?
    Я скачал модуль, загрузил его в папку с модулями а как подклучить и вывести иконку в редактор не знаю

    • Напишите, пожалуйста, какой именно модуль вы использовали.

  • Андрей

    Здравствуйте, подскажите пожалуйста, как активировать модуль youtube в TinyMCE?
    Я скачал модуль, загрузил его в папку с модулями а как подклучить и вывести иконку в редактор не знаю

    • Напишите, пожалуйста, какой именно модуль вы использовали.

  • Тимофей

    Добрый день у меня проблема. Я на страничке динамически получаю текст (аяксу) и не знаю как передать его в редактор, что бы он отображался. Если вставить например, то текст не отборажается и если в обратится к по id — тоже не выходит. Помогите пожалуйста

  • Тимофей

    Добрый день у меня проблема. Я на страничке динамически получаю текст (аяксу) и не знаю как передать его в редактор, что бы он отображался. Если вставить например, то текст не отборажается и если в обратится к по id — тоже не выходит. Помогите пожалуйста

  • Генри

    Здравствуйте. Такой есть вопрос. На сайте используется очень много форм, для всех нужно использовать редактор кроме 2-х, как сделать исключение?

    • Устанавливаете класс для textarea, которые нужно исключить
      <textarea class=»mceNoEditor»…>

      И подключаете редактор
      tinyMCE.init({

      editor_deselector : «mceNoEditor»
      });

  • Генри

    Здравствуйте. Такой есть вопрос. На сайте используется очень много форм, для всех нужно использовать редактор кроме 2-х, как сделать исключение?

    • Устанавливаете класс для textarea, которые нужно исключить
      <textarea class=»mceNoEditor»…>

      И подключаете редактор

      tinyMCE.init({
      	...
      	editor_deselector : "mceNoEditor"
      });
  • Дина

    Здравствуйте.Подскажите как сделать чтоб в редакторе работал подсчет слов и символов.
    Как например здесь в правом нижнем углу.
    http://tinymce.moxiecode.com/examples/full.php
    http://xinha.raimundmeyer.de/x_examples/ext_example.html

    Для меня важнеее количество введенных символов

    • Я видел готовое решение на форуме tinymce
      tinyMCE.init({
      ….

      //Character count
      theme_advanced_path : false,
      setup : function(ed) {
      ed.onKeyUp.add(function(ed, e) {
      var strip = (tinyMCE.activeEditor.getContent()).replace(/(<([^>]+)>)/ig,»»);
      var text = strip.split(' ').length + » Words, » + strip.length + » Characters»
      tinymce.DOM.setHTML(tinymce.DOM.get(tinyMCE.activeEditor.id + '_path_row'), text);
      });
      }

      });
      Сам не проверял, но очень советую почитать всю ветку

  • Дина

    Здравствуйте.Подскажите как сделать чтоб в редакторе работал подсчет слов и символов.
    Как например здесь в правом нижнем углу.
    http://tinymce.moxiecode.com/examples/full.php
    http://xinha.raimundmeyer.de/x_examples/ext_example.html

    Для меня важнеее количество введенных символов

    • Я видел готовое решение на форуме tinymce

      tinyMCE.init({
          ....
      
           //Character count
           theme_advanced_path : false,
           setup : function(ed) {
                ed.onKeyUp.add(function(ed, e) {   
                     var strip = (tinyMCE.activeEditor.getContent()).replace(/(<([^>]+)>)/ig,"");
                     var text = strip.split(' ').length + " Words, " +  strip.length + " Characters"
              tinymce.DOM.setHTML(tinymce.DOM.get(tinyMCE.activeEditor.id + '_path_row'), text);   
          });
           }
      
      });

      Сам не проверял, но очень советую почитать всю ветку

  • Виктор

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

  • Виктор

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

  • Виктор

    Не влезло:

  • Виктор

    Не влезло:

  • Виктор

    form input… select

  • Виктор

    form input… select

  • Спасибо за статью и ответы в комментариях.
    Проблема такая: TinyMCE добавляет в редактируемые таблицы class=»mceItemTable» (в ).
    Может, вы знаете, как это убрать?

    • Не пробовал. Но зачем вам его убирать? Пока вы не объявите CSS стили для этого класса он никак не будет влиять на отображение таблицы.

  • Спасибо за статью и ответы в комментариях.
    Проблема такая: TinyMCE добавляет в редактируемые таблицы class=»mceItemTable» (в ).
    Может, вы знаете, как это убрать?

    • Не пробовал. Но зачем вам его убирать? Пока вы не объявите CSS стили для этого класса он никак не будет влиять на отображение таблицы.

  • Виктор

    Думаю это то что я искал:
    http://www.formgenics.com/
    Скачаю и посмотрю. Просто у меня сейчас появилась задача создание специальных шаблонов для пользователя чтоб было проще ему создавать документы, вот я и подумал что скорейвсего должен быть готовый редактор.
    Намного проще будет если я пользователю дам право создавать нужные ему формы чем ему со мной договариватся об этом.

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

  • Виктор

    Думаю это то что я искал:
    http://www.formgenics.com/
    Скачаю и посмотрю. Просто у меня сейчас появилась задача создание специальных шаблонов для пользователя чтоб было проще ему создавать документы, вот я и подумал что скорейвсего должен быть готовый редактор.
    Намного проще будет если я пользователю дам право создавать нужные ему формы чем ему со мной договариватся об этом.

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

  • новичек

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

    • Установите firebug (это плагин к firefox) и посмотрите какие ошибки он показывает.

  • новичек

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

    • Установите firebug (это плагин к firefox) и посмотрите какие ошибки он показывает.

  • Вячеслав

    Доброго времени суток!
    У меня проблема:
    Я скачал редактор и русификатор, все распаковал в корень сайта, подключаю редактор:

    tinyMCE.init({
    mode:"textareas",
    theme:"simple",
    language:"ru"
    });


    Изначально на странице ни формы, ни текстареи нет.
    Textarea и форма создаются в скрипте:
    var formForText = document.createElement("form");
    var textMsg = document.createElement("textarea");

    и добавляются в контейнер, который уже создан изначально:
    formForText.appendChild(textPisma);
    vyborDiv.appendChild(formForText);

    В итоге вместо редактора появляется обычное текствое поле без какого-либо намека на редактор…
    Подскажите, что я делаю не так?

  • Вячеслав

    Доброго времени суток!
    У меня проблема:
    Я скачал редактор и русификатор, все распаковал в корень сайта, подключаю редактор:

    tinyMCE.init({
    mode:"textareas",
    theme:"simple",
    language:"ru"
    });


    Изначально на странице ни формы, ни текстареи нет.
    Textarea и форма создаются в скрипте:
    var formForText = document.createElement("form");
    var textMsg = document.createElement("textarea");

    и добавляются в контейнер, который уже создан изначально:
    formForText.appendChild(textPisma);
    vyborDiv.appendChild(formForText);

    В итоге вместо редактора появляется обычное текствое поле без какого-либо намека на редактор…
    Подскажите, что я делаю не так?

  • Вячеслав

    Вместо
    formForText.appendChild(textPisma);
    на самом деле
    formForText.appendChild(textMsg);
    Опечатка ))

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

      • Вячеслав

        Владимир, спасибо за ответ!
        Я как-то не подумал про очередность…
        Код подключения редактора добавил сразу после кода добавления textarea к модели и все работает.
        P.S. Очереди не использовал, т.к. не особо понял их назначение… Мне кажется они мне не особо подходят. У меня форма создается после клика по кнопке. Но все равно еще раз спасибо вам за ответ и за хорошую статью.
        С уважением, Вячеслав.

  • Вячеслав

    Вместо
    formForText.appendChild(textPisma);
    на самом деле
    formForText.appendChild(textMsg);
    Опечатка ))

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

      • Вячеслав

        Владимир, спасибо за ответ!
        Я как-то не подумал про очередность…
        Код подключения редактора добавил сразу после кода добавления textarea к модели и все работает.
        P.S. Очереди не использовал, т.к. не особо понял их назначение… Мне кажется они мне не особо подходят. У меня форма создается после клика по кнопке. Но все равно еще раз спасибо вам за ответ и за хорошую статью.
        С уважением, Вячеслав.

  • Наталья

    Здравствуйте, Владимир. Скачала tinymce, распаковала, запустила примеры локально(например simple), поформатировала текст. При просмотре измененного кода в firebug'е добавляется лишний спан со стилем mce_style=»text-decoration: line-through;». Посмотрела примеры online на официальном сайте — таких проблем нет. Не подскажите в чем проблема? Спасибо.

  • Наталья

    Здравствуйте, Владимир. Скачала tinymce, распаковала, запустила примеры локально(например simple), поформатировала текст. При просмотре измененного кода в firebug'е добавляется лишний спан со стилем mce_style=»text-decoration: line-through;». Посмотрела примеры online на официальном сайте — таких проблем нет. Не подскажите в чем проблема? Спасибо.

  • андрей

    спасибо, хорошая вещь, я как и некоторые тут мучался со шрифтом, на будущее для всех чтобы изменить размер шрифта в поле нужно просто добавить span со стилем: < Ваш текст PS Извините за пред.пост

  • андрей

    спасибо, хорошая вещь, я как и некоторые тут мучался со шрифтом, на будущее для всех чтобы изменить размер шрифта в поле нужно просто добавить span со стилем: < Ваш текст PS Извините за пред.пост

  • Владимир

    Добрый день. У меня следующая проблема — textarea лежит в форме, как положено. отправка идет через post — на выходе есть все значения кроме текстэрии, которая задействована под tinymce — вообще пусто. Что это может быть?

    • А если вы отключите tinymce данные уйдут?
      Я не сталкивался с такой проблемой и сложно что-то конкретное сказать не видя кода.

  • Владимир

    Добрый день. У меня следующая проблема — textarea лежит в форме, как положено. отправка идет через post — на выходе есть все значения кроме текстэрии, которая задействована под tinymce — вообще пусто. Что это может быть?

    • А если вы отключите tinymce данные уйдут?
      Я не сталкивался с такой проблемой и сложно что-то конкретное сказать не видя кода.

  • Андрей

    А у меня вылазяет ошибка tinyMCE is not defined!
    Может кто-нибудь сталкивался с такой и знает ее решение?

    • Скорее всего, не подключился скрипт с самим редактором (строка 1 в первом листинге). Возможно ошибка в пути к файлу.

  • Андрей

    А у меня вылазяет ошибка tinyMCE is not defined!
    Может кто-нибудь сталкивался с такой и знает ее решение?

    • Скорее всего, не подключился скрипт с самим редактором (строка 1 в первом листинге). Возможно ошибка в пути к файлу.

  • Анара

    Здравствуйте, Владимир! Спасибо за статью, она очень помогла мне. Но вот уже несколько дней я бьюсь над кодировкой редактора. Дело в том, что при загрузке нового документа(используется функция формирования документа из пакета Oracle) — редактор отлично отображает русские буквы. Затем я вношу изменения в редактор и сохраняю в БД, где использую функцию clobToBlob() с использованием кодировки CL8MSWIN1251, так как в таблице поле в формате BLOB. В базу ложатся русские буквы, но когда снова загружается редактор — отображаются кракозябры: ÏËÀÍ 1
    ïðîâåäåíèÿ âíåøíåãî ãîñóäàðñòâåííîãî ôèíàíñîâîãî êîíòðîëÿ

    Вот этот код я использую для вызова редактора:

    tinyMCE.init({
    // General options
    mode : «textareas»,
    theme : «advanced»,
    plugins : «safari,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,imagemanager,filemanager»,

    // 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,anchor,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,
    language:»ru»,
    fullpage_default_encoding : «UTF-8»,
    fullpage_default_langcode : «ru»,

    // Example content CSS (should be your site CSS)
    content_css : «../../js/tiny_mce/themes/advanced/skins/default/content.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»,

    // Replace values for the template plugin
    template_replace_values : {
    username : «Some User»,
    staffid : «991234»
    }
    });
    function mce_save_callback(ed) {
    var mce = tinyMCE.get(active_editor_id);
    mce.save();
    mce.remove();
    }

    Что можете посоветовать в моем случае?

    • Если вы формируете страницу одним и тем же способом (до и после редактирования), то этот код менять кодировку не может, значит в БД после редактирования данные сохраняются в другой кодировке. Возможно, программа, которой вы просматриваете базу автоматически распознаёт кодировки и показывает вам правильные символы.

      В первую очередь я бы изменил
      fullpage_default_encoding : «UTF-8»
      на
      fullpage_default_encoding : «windows-1251»

      Потом нужно посмотреть в какой кодировке уходит отредактированный текст (post запрос).

      Дальше — по ситуации. Я с oracle не работал, поэтому как изменить кодировку не подскажу.

  • Анара

    Здравствуйте, Владимир! Спасибо за статью, она очень помогла мне. Но вот уже несколько дней я бьюсь над кодировкой редактора. Дело в том, что при загрузке нового документа(используется функция формирования документа из пакета Oracle) — редактор отлично отображает русские буквы. Затем я вношу изменения в редактор и сохраняю в БД, где использую функцию clobToBlob() с использованием кодировки CL8MSWIN1251, так как в таблице поле в формате BLOB. В базу ложатся русские буквы, но когда снова загружается редактор — отображаются кракозябры: ???? 1
    ?????????? ???????? ???????????????? ??????????? ????????

    Вот этот код я использую для вызова редактора:

    tinyMCE.init({
    // General options
    mode : «textareas»,
    theme : «advanced»,
    plugins : «safari,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,imagemanager,filemanager»,

    // 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,anchor,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,
    language:»ru»,
    fullpage_default_encoding : «UTF-8»,
    fullpage_default_langcode : «ru»,

    // Example content CSS (should be your site CSS)
    content_css : «../../js/tiny_mce/themes/advanced/skins/default/content.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»,

    // Replace values for the template plugin
    template_replace_values : {
    username : «Some User»,
    staffid : «991234»
    }
    });
    function mce_save_callback(ed) {
    var mce = tinyMCE.get(active_editor_id);
    mce.save();
    mce.remove();
    }

    Что можете посоветовать в моем случае?

    • Если вы формируете страницу одним и тем же способом (до и после редактирования), то этот код менять кодировку не может, значит в БД после редактирования данные сохраняются в другой кодировке. Возможно, программа, которой вы просматриваете базу автоматически распознаёт кодировки и показывает вам правильные символы.

      В первую очередь я бы изменил
      fullpage_default_encoding : «UTF-8»
      на
      fullpage_default_encoding : «windows-1251»

      Потом нужно посмотреть в какой кодировке уходит отредактированный текст (post запрос).

      Дальше — по ситуации. Я с oracle не работал, поэтому как изменить кодировку не подскажу.

  • Тут рекомендовали niceedit.
    Буквально на днях попробовал и обплевался от него.
    А Tiny MCE ещё, где-то в феврале месяце, имплантировал на ломальной машине в код форума, ориентируясь на данную статью. Всё прошло успешно и сам редактор меня очень порадовал! Спасибо!

  • Тут рекомендовали niceedit.
    Буквально на днях попробовал и обплевался от него.
    А Tiny MCE ещё, где-то в феврале месяце, имплантировал на ломальной машине в код форума, ориентируясь на данную статью. Всё прошло успешно и сам редактор меня очень порадовал! Спасибо!

  • ApatityMax

    Подскажите пожалуйста, как в этом редакторе сменить цвет фона. Дело в том, на сайте используется тёмный фон с блыми буквами, а окно редактора в админке (джумла) белое и писать белым шрифтом как-то неудобно :-). Уже недели 2 ковыряюсь…

    • Попробуйте изменить стиль

      .mceEditorArea {
      background: #FFFFFF;
      }

      в файле editor_ui.css

      • Серж

        Попробуйте изменить стиль

        .mceEditorArea {
        background: #FFFFFF;
        }

        в файле editor_ui.css

        во первых нет такого файлаeditor_ui.css

        во вторых вставлял этот код в разные места основного файла, после инициализации редактора, и в

        body.mceContentBody {
        background:#fff000; }

        .mceEditorArea {
        background: #FFF000;
        }

        и в CSS файл

        и пробывал

        body.mceContentBody {
        background:#fff000; }

        так цвет фона и не поменялся!!!!!!!!!!!!!!(((((((((((((((

        а мне нужен темный цвет textarea с tiny_mce редактором!!

        также во всех манипуляциях чистил кеш !!!
        плиз помогите кто нибудь как изменить цвет фона tiny mce для ввода текста???

        • Прошу прощения, я ошибся.
          Нужно создать CSS файл со стилем
          body.mceContentBody {
          background: #F00;
          }
          и подключить его при инициализации редактора
          tinyMCE.init({
          content_css : «mycontent.css»,

          });
          mycontent.css — имя файла.
          Подробнее здесь

  • ApatityMax

    Подскажите пожалуйста, как в этом редакторе сменить цвет фона. Дело в том, на сайте используется тёмный фон с блыми буквами, а окно редактора в админке (джумла) белое и писать белым шрифтом как-то неудобно :-). Уже недели 2 ковыряюсь…

    • Попробуйте изменить стиль

      .mceEditorArea {
      background: #FFFFFF;
      }

      в файле editor_ui.css

      • Серж

        Попробуйте изменить стиль

        .mceEditorArea {
        background: #FFFFFF;
        }

        в файле editor_ui.css

        во первых нет такого файлаeditor_ui.css

        во вторых вставлял этот код в разные места основного файла, после инициализации редактора, и в

        body.mceContentBody {
        background:#fff000; }

        .mceEditorArea {
        background: #FFF000;
        }

        и в CSS файл

        и пробывал

        body.mceContentBody {
        background:#fff000; }

        так цвет фона и не поменялся!!!!!!!!!!!!!!(((((((((((((((

        а мне нужен темный цвет textarea с tiny_mce редактором!!

        также во всех манипуляциях чистил кеш !!!
        плиз помогите кто нибудь как изменить цвет фона tiny mce для ввода текста???

        • Прошу прощения, я ошибся.
          Нужно создать CSS файл со стилем

          body.mceContentBody {
             background: #F00;
          }

          и подключить его при инициализации редактора

          tinyMCE.init({
          	content_css : "mycontent.css",
          ...
          });

          mycontent.css — имя файла.
          Подробнее здесь

  • iF

    Ребят, установил tinymce 3.3.2 все гуманно работает =))
    Остался один вопрос, какие плагины из стандартных следует убрать?
    Я в общем с офф. сайта взял код с расширенного примера и убрал лишние кнопки, которые мне не нужны.
    А вот с плагинами запоролся =)) не хочется грузить что не нужно =))
    Кто может помочь, буду благодарен!!!!

    Р.S. могу кинуть скриншот с моим набором кнопок, думаю так будет проще разобраться.
    Спасибо!!!

  • iF

    Ребят, установил tinymce 3.3.2 все гуманно работает =))
    Остался один вопрос, какие плагины из стандартных следует убрать?
    Я в общем с офф. сайта взял код с расширенного примера и убрал лишние кнопки, которые мне не нужны.
    А вот с плагинами запоролся =)) не хочется грузить что не нужно =))
    Кто может помочь, буду благодарен!!!!

    Р.S. могу кинуть скриншот с моим набором кнопок, думаю так будет проще разобраться.
    Спасибо!!!

  • iF

    Вот, еще немного покоцал.

    $().ready(function() {
    $('textarea.tinymce').tinymce({
    // Location of TinyMCE script
    script_url : 'ajax/tiny_mce/tiny_mce.js',
    language : "ru",
    // General options
    theme : "advanced",
    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,advlist",
    // Theme options
    theme_advanced_buttons1 : "tablecontrols",
    theme_advanced_buttons2 : "pasteword,|,bullist,numlist,|,outdent,indent,|,undo,redo,|
    ,preview,fullscreen",
    theme_advanced_buttons3 : "bold,italic,underline,|,forecolor,|,justifyleft,
    justifycenter,justifyright,justifyfull,|,sub,sup,|,
    formatselect,fontselect,fontsizeselect",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,
    });
    });

    • К сожалению, тут я помочь не могу. Обычно делаю в обратном порядке. Беру минимальный пример и наращиваю функционал.

  • iF

    Вот, еще немного покоцал.

    $().ready(function() {
    $('textarea.tinymce').tinymce({
    // Location of TinyMCE script
    script_url : 'ajax/tiny_mce/tiny_mce.js',
    language : "ru",
    // General options
    theme : "advanced",
    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,advlist",
    // Theme options
    theme_advanced_buttons1 : "tablecontrols",
    theme_advanced_buttons2 : "pasteword,|,bullist,numlist,|,outdent,indent,|,undo,redo,|
    ,preview,fullscreen",
    theme_advanced_buttons3 : "bold,italic,underline,|,forecolor,|,justifyleft,
    justifycenter,justifyright,justifyfull,|,sub,sup,|,
    formatselect,fontselect,fontsizeselect",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,
    });
    });

    • К сожалению, тут я помочь не могу. Обычно делаю в обратном порядке. Беру минимальный пример и наращиваю функционал.

  • Пасст

    Хороший редактор. Но вот при включении картинок надо подключить любой файл-менеджер (или имедж-менеджер). На самом деле он нужен только для того, что-бы не ручками задавать путь к закачиваему файлу, а путем поиска-указания.
    Такие программулины есть на офицальном сайте, но — за деньги :-(. А кто знает что-нибудь бесплатное, что можно использовать для указанной цели?

    • Специально не искал. Такие менеджеры обычно встраиваются в CMS и во всех распространённых (например, том же WP) они есть.

      • Пасст

        Да, спасибо, наверное встраивают. Но не прикручивать-же к маленькому сайтику CMS только ради такой фичи :-).
        Хотелось бы найти небольшой скриптик или плагин для этого.

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

  • Пасст

    Хороший редактор. Но вот при включении картинок надо подключить любой файл-менеджер (или имедж-менеджер). На самом деле он нужен только для того, что-бы не ручками задавать путь к закачиваему файлу, а путем поиска-указания.
    Такие программулины есть на офицальном сайте, но — за деньги :-(. А кто знает что-нибудь бесплатное, что можно использовать для указанной цели?

    • Специально не искал. Такие менеджеры обычно встраиваются в CMS и во всех распространённых (например, том же WP) они есть.

      • Пасст

        Да, спасибо, наверное встраивают. Но не прикручивать-же к маленькому сайтику CMS только ради такой фичи :-).
        Хотелось бы найти небольшой скриптик или плагин для этого.

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

  • Здравствуйте!
    У меня есть ряд вопросов:
    1. Почему некоторые кнопки не активны? Я так понимаю, что просто нет этих плагинов и нигде не могу найти.
    2. Какой файл редактировать, чтобы сделать вывод тегов не так , а так [].
    3. В каком файле прописан вывод кнопок по умолчанию, если их не прописывать в коде вызова редактора.
    Заранее благодарен!

    • 1) Какие кнопки неактивны? Мне сложно ответить не видя редактора.

      2) Вы хотите заменить угловые скобки на квадратные? Если да, то в какой момент? При отправке данных на сервер? Это можно сделать с помощью обработчика события onSaveContent

      • На счет кнопок. Даже если посмотреть примеры на офф. сайте, там видно какие кнопки.
        Спасибо за ответы!

      • Да, вы правильно поняли при отправки данных на сервер.
        Извините, но я не очень понимаю JavaScript, если не трудно помогите.

        • Насчет кнопок я так и не понял. В примере на оф. сайте действительно часть кнопок неактивна, но это кнопки, которые работают только при определенных условиях. Например, кнопка «Undo» (Отменить действие) не будет активна до тех пор, пока вы не начнете изменять текст. Точно также кнопка создания ссылки начнет работать только после того, как вы выделите текст.

          Замена скобок будет выглядеть примерно так
          tinyMCE.init({

          setup : function(ed) {
          ed.onSaveContent.add(function(ed, o) {
          o.content = o.content.split('<').join('[');
          o.content = o.content.split('>').join(']');
          });
          }
          });
          Код я не тестировал, но, надеюсь, идея ясна 😉

  • Здравствуйте!
    У меня есть ряд вопросов:
    1. Почему некоторые кнопки не активны? Я так понимаю, что просто нет этих плагинов и нигде не могу найти.
    2. Какой файл редактировать, чтобы сделать вывод тегов не так , а так [].
    3. В каком файле прописан вывод кнопок по умолчанию, если их не прописывать в коде вызова редактора.
    Заранее благодарен!

    • 1) Какие кнопки неактивны? Мне сложно ответить не видя редактора.

      2) Вы хотите заменить угловые скобки на квадратные? Если да, то в какой момент? При отправке данных на сервер? Это можно сделать с помощью обработчика события onSaveContent

      • На счет кнопок. Даже если посмотреть примеры на офф. сайте, там видно какие кнопки.
        Спасибо за ответы!

      • Да, вы правильно поняли при отправки данных на сервер.
        Извините, но я не очень понимаю JavaScript, если не трудно помогите.

        • Насчет кнопок я так и не понял. В примере на оф. сайте действительно часть кнопок неактивна, но это кнопки, которые работают только при определенных условиях. Например, кнопка «Undo» (Отменить действие) не будет активна до тех пор, пока вы не начнете изменять текст. Точно также кнопка создания ссылки начнет работать только после того, как вы выделите текст.

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

          tinyMCE.init({
             ...
             setup : function(ed) {
                ed.onSaveContent.add(function(ed, o) {
                    o.content = o.content.split('<').join('[');
                    o.content = o.content.split('>').join(']');
                });
             }
          });

          Код я не тестировал, но, надеюсь, идея ясна 😉

  • С третьим вопросом разобрался.

  • С третьим вопросом разобрался.

  • А можно сделать так, чтобы в кнопке «добавить/изменить ссылку» по-умолчанию стояло «открыть в новой вкладке — _blank»?

    • Не уверен, но, похоже, единственный способ — изменить файл
      tinymcejscriptstiny_mcepluginsadvlinkjsadvlink.js
      Нужно поменять строки 504 и 505 местами.

  • А можно сделать так, чтобы в кнопке «добавить/изменить ссылку» по-умолчанию стояло «открыть в новой вкладке — _blank»?

    • Не уверен, но, похоже, единственный способ — изменить файл
      tinymce\jscripts\tiny_mce\plugins\advlink\js\advlink.js
      Нужно поменять строки 504 и 505 местами.

  • Спасибо за помощь, код протестирую и отпишу.

  • Спасибо за помощь, код протестирую и отпишу.

  • А как вставить в TinyMCE вставить тег ?
    А то при нажатии «Enter» вставляет новый , а я хочу

    • порезал теги 🙂
      как вставить BR
      а то по нажатию Enter вставляет еще один тег P, а хочется тег BR

  • А как вставить в TinyMCE вставить тег ?
    А то при нажатии «Enter» вставляет новый , а я хочу

    • порезал теги 🙂
      как вставить BR
      а то по нажатию Enter вставляет еще один тег P, а хочется тег BR

  • И еще нюанс!
    ТайниМЦЕ переделывает пути в ссылках из относительных в абсолютные?
    Т.е. я пишу «/files/1.doc», а он заменяет на «../files/1.doc»

  • И еще нюанс!
    ТайниМЦЕ переделывает пути в ссылках из относительных в абсолютные?
    Т.е. я пишу «/files/1.doc», а он заменяет на «../files/1.doc»

  • Там есть кнопка «Paste from Word» (картинку добавил в поле «Вебсайт» этой формы ответа). Очень даже неплохо чистит.

  • Кстати, да, тоже вариант.

  • Dreamer

    Здравствуйте! Подскажите как сделать в Tinymce чтоб при нажатии на кнопку смайликов не открывалось новое окно, а просто становился видимым div в который предварительно были загружены смайлики?
    Заранее спасибо за помощь!

  • Dreamer

    Здравствуйте! Подскажите как сделать в Tinymce чтоб при нажатии на кнопку смайликов не открывалось новое окно, а просто становился видимым div в который предварительно были загружены смайлики?
    Заранее спасибо за помощь!

  • Решение отсюда вам подойдет?

  • Dreamer

    Да спасибо, подошло. Правда пришлось немного попотеть 🙂

  • Dreamer

    Здравствуйте, Владимир!
    После подключения редактора возникла такая вот проблема. В строке статуса постоянно написано «Ожидание ответа от сайта». Не подскажете что это может быть? Вначале загружается страница с пустыми тегами, инициализация tinymce не вызывается. Часть с textarea загружается AJAXом. Затем вызывается функция инициализации tinymce. Всё замечательно загружается и редактор и смайлы, но в строке статуса вместо готово остаётся «ожидание ответа». Что это за запрос может выполняться? Если отключаю инициализацию то всё в норме.

  • Предположительно, редактор отправляет ajax запрос и ждет ответа. Это может происходить если где-нибудь не правильно указан url скрипта к которому отправляется запрос.

    В любом случае, ставьте firebug и смотрите какие запросы «висят» на вкладке «Консоль».

  • Dreamer

    firebug стоит. Избавиться удалось. Обязательно надо initmce делать при загрузке страницы. А потом если динамически добавлять textarea, то надо ещё раз вызывать initmce. По-видимому в файле tiny_mce.js что-то инициализируется и посылает запросы, только что это непонятно. Хотелось бы вызывать один раз ток при необходимости, но видимо не получится

  • Dreamer

    Я столкнулся с той же проблемой. Если без tinymce то всё в норме, а если с ним, то при просмотре javascript получается в текстареа находятся те данные которые были туда загружены ранее, а всё что вводишь с клавиатуры в текстареа не попадает. Может надо как-то извлекать из фрейма и добавлять в текстареа?

  • Dreamer

    Нашёл решение для продвинутых и не очень

  • Редактор не открывается в ИЕ, в опере все нормально. Вот какую ошибку выдает:

    Сведения об ошибке на веб-странице

    Агент пользователя: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6.5; MRA 5.5 (build 02842); InfoPath.2; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
    штамп времени: Mon, 5 Jul 2010 14:12:47 UTC

    Сообщение: Предполагается наличие идентификатора, строки или числа
    Строка: 64
    Символ: 2
    Код: 0
    URI-код: http://www.мой-сайт.ru/admin/

  • Проверьте список параметров, которые вы передаете при создании редактора.
    После последнего элемента не должно быть запятой. Т.е.
    tinyMCE.init({
    mode:»textareas»,
    theme:»simple»,
    language:»ru»
    });
    но не
    tinyMCE.init({
    mode:»textareas»,
    theme:»simple»,
    language:»ru»,
    });

  • СПАСИБО, заработало.

  • Владимир, здравствуйте!
    Пожалуйста , помогите. Ситуация
    1 tinymce после установки
    http://webmaster9.ru/tinymce/examples/full.html
    Все прекрасно. Русифицирую.
    2 Добавил
    language:»ru»
    Сыылка http://webmaster9.ru/tinymce/examples/1myfull.html
    Вабще не работает
    3 Все убрал, оставил только
    <script type=»text/javascript»>
    tinyMCE.init({
    mode : «textareas»,
    theme : «advanced»,
    language:»ru»

    });
    </script>
    http://webmaster9.ru/tinymce/examples/myfull.html
    работает. Но многого нужного нет (выбор цветов, размера шрифта)
    Наверное надо потихоньку добавлять, чтоб не сломать Но как?

  • Попробуйте поставить в строке 14 (1myfull.html) запятую после
    language:»ru»

  • Спасибо! Заработало. Кнопочки тоже научился менять.
    Но вот другая проблемка. Я леплю drag and drop конструктор сайтов
    Tinymce использую для создания текстов. Мне надо чтоб текст
    из окна Tinymce переносился в нужное место на странице. С обычной textarea + javascript проблем нет. А вот с Tinymce ничего
    не работает- не тест в окне не доступен, ни на события не реагирует.Не знаете случаем, что там Tinymce наменяла?

  • И еще. При вставлении картинки надо указать ее URL. А я хочу чтоб картинка выбиралась из библиотеки wordpress. Пока предполагается
    что URL будет copy/paste. но это пошло, надо чтобы URL всталялся
    когда кликают на картинку. Не знаете как достучаться до поля для
    урлов?

  • Tinymce создаёт iframe и в нём документ, представляющий собой текст.
    У меня D&D нормально работает (проверял перенос из tinymce в word), но, возможно, это зависит от браузера (я использовал FF3.6.8).

    Со вставкой url я не понял. WP сам использует tinymce и вставка url нормально работает.

  • 1 Спасибо, дело точно в iframe, то что я писал с ней и не должно работать . Позже попробую по другому, когда все задышит.пока сделаю попроще .
    2 wordpress+ tinymce Там редактор слабый (нет выбора цвета щрифта и тд) И к тому же у меня будет независимый от wordpress
    вариант. Мне надо
    — не вствлять вручную url картинки (или линка) а выбирать из галереи (наподобие tinybrowser) и списка линков Для этого надо знать имя поля в открывающемся окне
    — при вставлении линка надо иметь возможность использовать
    noindex, nofollow

    Можно покопаться в коде tinymce , но может Вы знаете

  • По поводу wordpress. посмотрел повнимательнее как там все происходит
    — в дополнительной панели выбор цвета щрифта есть, но много нужного нет.(тип шрифта, размер, цвет почеркивания)
    — при вставке ссылки надо вручную указать url,автоматического выбора из списка линков нет. noindex, nofollow нет
    — привставке медиа файла есть возможность посмотреть картинки в библиотеке.Но как вставить я не понял. Если только вручную копировать url

    А я хочу чтобы у меня в конструкторе это было. А кстати и wordpress плагин не помешад бы.

  • Если вы используете свой движок, то вам нужно будет написать скрипт (php), который сформирует список картинок с миниатюрами, ссылками и т.д.
    А вставить в tinymce произвольный текст можно с помощью стандартных методов.
    Например, с помощью такой функции
    function insertHTML(html) {
    tinyMCE.execInstanceCommand(«mce_editor_0",»mceInsertContent»,false,html);
    }

  • Посмотрите этот плагин

  • Спасибо. Мне нужно как раз из текстового поля tinyMCE вынуть а не вставить текст. А вставить в поля для урл картинок и линков.
    Я понял что сузествуют функции доступа к tinyMCE. Не подскажете где из можно посмотреть?

  • Посмотреть функции можно здесь.

    Получить текст из редактора — getContent

  • Егор

    и куда этот код вставлять? вы так пишите как- будто я знаю что мне делать, если бы знал не заходил бы на ваш «блог». УГ.

    • Вы зря так расстраиваетесь.CI не накладывает жестких ограничений на структуру приложения. Поэтому я не знаю как вы формируете страницу и, соответственно, не могу конкретно написать куда вставлять код.Обычно, разметка формируется в представлениях (папка views), это рекомендованная практика. Но ничто вам не мешает вставить разметку в контроллер.В общем, поищите где у вас выводится закрывающий тег и вставляйте код прямо перед ним.

  • Телевизор

    Добро, скажите пожалуйста,
    при клике на «добавить слой» появляется квадратик — div слой,
    а рядошком кнопочка активированная «абсолютное позиционирование»
    но при клике на кнопку «на передний план» почему то не работает, не активируется. я так предпологаю при клике на передний план можно двигать этот слой, верно?
    как бы починить эту кнопку чтобы перемещать div-слой ?
    Думаю что какой то не подключен css ?
    все css tinymce прописаны в папку examples по стандарту, может что-то я не учел ? или не правильно воспользовался div слоем ?

    • Только что посмотрел на оф. сайте. Кнопка «на передний план» работает только когда курсор находится внутри слоя, т.е. слой выбран. Если уберете курсор за пределы слоя, кнопка опять станет не активной.

  • Alexander

    Спасибо. Русифицировал. Оказывается просто нужно было добавить строчку language:»ru»

  • xand

    Здравствуйте! Подскажите как подключить редактор TinyMCE не ко всем тектовым полям (mode:»textareas»), а к определённому полю?
    Например к

    • Для вашего случая:
      tinyMCE.init({

      mode : «specific_textareas»,
      editor_selector : «area1»
      });

  • Office

    Мы используем практически на всех сайтах этот редактор, но часто бывают конфликты при совмещении с другими обьектами javascript, ну к примеру с simple scroll и т.д.
    Code201.net

  • Dog21

    Редактор удаляем тег noindex, как это можно исправить?? В каком файле находиться запрещённые теги ?

    • Перечень тегов можно указать при инициализации редактора.
      Пример.

  • Almas3000

    Подскажите а как отключить очистку кода? захожу в режим HTML вставляю в редактор код например кнопочек социальных сетей с яндекса а он обрезает его и ничего не выводит. Что делать? Я начинающий.

    • Прежде всего, разберитесь, какие теги вырезает tinymce. Дело в том, что у этого редактора много настроек, которые влияют на форматирование и фильтрацию текста.

      Скорее всего, вам нужна опция valid_elements. Полный список этих настроек можно посмотреть здесь.

  • tir

    А как работает кнопка «Использовать шаблоны»?
    Возможно можно где-то добавить несколько шаблонов, чтобы потом быстро и легко вставлять их на сайт? (например какую-нибудь таблицу, чтобы каждый раз ее не рисовать, а сохранить в шаблон и использовать)

    • Уточните, пожалуйста, о какой именно кнопке вы говорите?

      • tir

        о кнопке «Использовать шаблон» (у меня она в нижнем ряду 3-я справа)

        • Пожалуйста, проверьте, вы точно не используете какие-нибудь плагины?

          Я смотрел полную версию редактора, размещенную на официальном сайте
          http://tinymce.moxiecode.com/tryit/full.php

        • tir

          на оф.сайте она в нижнем ряду 4-я справа и называется «Insert predefined template content»
          Как добавлять туда темплейты?

        • Нашел 🙂
          Эти шаблоны нужно создавать самостоятельно. По сути, это обычные html файлы с разметкой. При настройке редактора нужно указать их размещение.
          Есть пример такой настройки.

  • У меня проблема с этим плагином, после нажатия кнопки отправить коммент, выходит окно с текстом «Ошибка: пожалуйста, введите комментарий.», как будто пустое поле отправляется. Не знаете в чем может быть проблема?

    • Вы подключили TinyMCE к какой-то CMS?
      Если да, проверяйте firebug'ом имена полей в массиве $_POST при отправке комментария. Если при подключении редактора имя изменилось, вы сразу это увидите.

      • Я установил плагин на WordPress. firebug это надстройка для firefox? я им не пользуюсь, можно это другим путем отследить?

        • Можно, с помощью Google Chrome: Инструменты — Инструменты разработчика.
          Хотя, возможно, будет лучше сразу поискать другой плагин для WP.

        • Спасибо за совет, но хотелось бы именно этот, еще не нашел достойной альтернативы этому плагину.
          Кстати, проблема с комментированием происходит через браузеры Opera и Google Chrome, а в IE все работает.

  • Al-natasha

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

    • Вы не можете удалить запись из базы? Или не можете изменить текст в редакторе?

  • найс

  • Xkirkx

    Здравствуйте. Подскажите как его заставить оставлять html код в таком виде, каким я его ввел ?
    Мне необходимо именно в середине текста поставить несколько , а он их все переносит в конец.

    • Xkirkx

      Несколько закрывающих тегов имелось в виду )

      • Экранируйте спецсимволы. Т.е. заменяете < на <
        А вообще TinyMCE плохо приспособлен для вставки html кода. В админке WP я отказался от его использования.

  • Gogita71

    Здравствуйте. Вы не скажите как добавить новые фонты в tinymce? 
    В Google никакого ответа

    • Вы хотите именно новый шрифт? Не изменить атрибуты существующего?
      Решение существует, но обходится довольно дорого (в плане веса страницы), т.к. будет загружаться файл с изображениями всех букв.

      Посмотрите, например, тег @font-face.

  • Lna Off

    здрасте) весь сайт в кодировке win-1251, а как я понял файл русификации на офф сайте в utf-8, подскажите где можно взять русский язык в windows-1251 

  • Михаил

    Здравствуйте! Я не могу преобразовать текст в ссылку. После выделения текста нажимаю значок «Создать ссылку», появляются окошко с 2 полями. Я их заполняю. Выделенный текст приобретает вид ссылки, его можно скопировать, как ссылку, на при наведении курсора вид его не меняется на руку.
    Соответственно, нажатие ничего не дает, перехола по ссылке не происходит.
    Спасибо.

    • Это стандартное поведение tinymce, иначе вы не сможете поставить курсор в середину ссылки, чтобы изменить её текст.
      Попробуйте кликнуть по ссылке с зажатой клавишей Ctrl.

  • Lassy

    Здравствуйте! Я так и не понял, как решить возниающую у меня проблему с этим редактором: превращение слова или части текста в ссылку. Я не могу преобразовать текст в ссылку. После выделения текста нажимаю
    значок «Создать ссылку», появляются окошко с 2 полями. Я их заполняю.
    Выделенный текст приобретает вид ссылки, его можно скопировать, как
    ссылку, на при наведении курсора вид его не меняется на
    руку.Соответственно, нажатие ничего не дает, перехола по ссылке не
    происходит.Спасибо.

    • В редакторе ссылки не активные, то сделано специально, т.к. иначе будет сложно изменить текст ссылки. Посмотрите пример на оф. сайте http://www.tinymce.com/tryit/full.php
      С помощью редактора вы создаете нужный текст и разметку, после этого публикуете на странице и ссылки будут активными.

  • evgenia

    подскажите пожалуйста! а эту прогу можно использовать на wordpress?

    • TinyMCE уже используется в WP — редактор поста. Просто оформление изменено.

  • здравствуйте. не подскажете как настроить тинимце,что картинка допустим обтекалась текстом справа и тд?

    • По-моему, это можно сделать прямо из редактора. С помощью кнопок «Выравнивание влево/вправо».

  • Алина

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

    • Дело в том, что на сайте внешний вид таблицы определяется CSS стилями, которые задаются в установленной теме (обычно в файле style.css). В админке tinyMce использует свои стили, поэтому и возникает разница в оформлении.

      Т.е. для того, чтобы исправить вид таблицы на сайте, нужно поправить стили в style.css.

  • cheh

    Каким образом, прикрутить tinymce к конкретному ? Про это ничего не увидел.

    • tinyMCE.init({

      mode : «exact»,
      elements : «elm1,elm2»
      });

      <textarea id="elm1" …

  • Семен

    Здравствуйте!
    Где можно найти список id всех кнопок на панели инструментов редактора?

  • Евгений

    Может знает кто. Как сделать так, чтобы после копирования текста с сайта и последующей его вставки в редактор шрифты (размер и толщина) оставалась как в редакторе по умолчанию настроено, а не в таком же виде как копировано с сайта. Наверно можно как-то настроить чтобы внутри редактора размеры и тип шрифта всегда были неизменными?

    • Я сталкивался с этой проблемой и процентов на 95 её удалось решить. Настройкой эта проблема не решается, нужно парсить разметку, которая вы копируете. Алгоритм следующий:

      1) подключить файл с вашими стилями;

      2) установить обработчик события paste_preprocess.

      Этот обработчик получает текст который вы вставляете до того как он будет вставлен в редактор. Т.е. появляется возможность изменить текст перед вставкой. Нужно удалить все лишние теги (для которых у вас нет CSS правил) и inline стили.

      В результате у меня получился примерно такой код: https://gist.github.com/vladimir-s-snippets/6904995

    • tambov

      А можно просто копировать в блокнот, а потом из блокнота в редактор.
      Или сразу в редактор, а потом выделять текст и нажимать кнопку «Очистить формат»

  • Павел

    Здравствуйте, расположение кнопок, вернее тулбара с кнопками, в конфиге можно сделать чтобы он было либо вверху либо внизу, а как сделать например справа или слева? Заранее спасибо

    • По-моему, нет. Параметр theme_advanced_toolbar_location
      может принимать три значения: top, bottom или external.

      • Павел

        да, согласен, но это всёравно не то что мне нужно, этот вариант выводит вверху, и по клику.

        • Я, честно говоря, плохо представляю как будет выглядеть панель размещённая слева или справа. Ведь высота редактора может изменяться.

        • Павел

          ну вообще я хотел зафиксировать по отношению к полю

        • Попробуйте использовать значение external и с помощью CSS стилей передвинуть тулбар влево.

        • Павел

          криво выходит,в ксс я ведь не могу сделать чтобы он центровал по отношению к другому объекту, ну или я просто не знаю как это сделать, думаю джаваскрипт учить и жквери) Спасибо, что ответили!

  • А бей PHP, можно ли создавать с версией tinymce jquery текст налету?

    • Да, можно. Вообще tinymce не требует использования PHP. Но для сохранения данных на сервере нужно написать серверную часть приложения на PHP, Java, Ruby, Node.JS, Python или любом другом языке.

  • Сергей

    В редакторе TinyMCE, установленном в MODX, столкнулся с не очень приятной вещью. При попытке вставить допустим имидж или просто пустую строку, редактор автоматом добавляет к нему теги оформления параграфа и не хочет их удалять даже в режиме HTML! Как можно отключить это принудительное автоматическое форматирование? Как заменить на перенос строки я уже прочел, но хотелось бы убрать это совсем 🙂

    Как вместо параграфа ввести простой перенос строки ()
    Shift+Enter
    А чтобы это происходило постоянно?
    Указать:

    tinyMCE.init({

    force_br_newlines : true
    });
    Это в самом плагине редактируется, как я понял? В tinymce.plugin.php

    • tinyMCE предназначен для того, чтобы сгенерировать html разметку, которая соответствует тому, что Вы видите в окне редактора. Если у Вас есть перенос строки, то он вставит либо br, либо p. Иначе текст будет отображаться в одну строку.

      Вообще, появление таких проблем — первый признак того, что tinyMCE Вам не подходит.

      Тем не менее, решить проблему можно. Я с MODX не работал, но в этой CMS должна быть возможность перехватить обработку сохранения записи (аналог хука save_post в WP). В этом обработчике Вы можете внести любые изменения в текст поста.