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

12 апреля, 2009
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

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

Понравилась статья? Подписывайтесь на продолжение rss link !

Или на мой твиттер twitter link

]]>

Добавьте эту страницу в google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

]]>

Опубликовано в CSS, JavaScript, Web разработка Комментарии (422) »

]]>

Вы можете оставить комментарий. Трекбеки закрыты.

  • GG

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

    • http://www.simplecoding.org/ Владимир

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

  • GG

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

    • http://www.simplecoding.org/ Владимир

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

  • http://php-velosiped.org.ua/ Валерий

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

    • http://www.simplecoding.org/ Владимир

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

  • http://php-velosiped.org.ua Валерий

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

    • http://www.simplecoding.org/ Владимир

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

  • http://kinoklon.ucoz.ru/ Ветерок

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

  • http://kinoklon.ucoz.ru Ветерок

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

  • http://php-velosiped.org.ua/ Валерий

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

    • http://www.simplecoding.org/ Владимир

      Спасибо, я так и подумал ;)

      • http://php-velosiped.org.ua/ Валерий

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

        • http://www.simplecoding.org/ Владимир

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

  • http://php-velosiped.org.ua Валерий

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

    • http://www.simplecoding.org/ Владимир

      Спасибо, я так и подумал ;)

      • http://php-velosiped.org.ua Валерий

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

        • http://www.simplecoding.org/ Владимир

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

  • Никита

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

    • http://www.simplecoding.org/ Владимир

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

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

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

        • http://www.simplecoding.org Владимир

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

  • Никита

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

    • http://www.simplecoding.org/ Владимир

      Проще всего при создании 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;

  • http://www.webteh.zx6.ru/ dima

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

    • http://www.simplecoding.org/ Владимир

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

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

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

  • http://www.webteh.zx6.ru dima

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

    • http://www.simplecoding.org/ Владимир

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

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

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

  • Alex

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

    • http://www.simplecoding.org/ Владимир

      Я никогда не работал с 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.

    • http://www.simplecoding.org/ Владимир

      Я никогда не работал с 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

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

    • http://www.simplecoding.org/ Владимир

      С 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

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

    • http://www.simplecoding.org/ Владимир

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

  • hasbah

    я так и делал

    • http://www.simplecoding.org/ Владимир

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

  • hasbah

    я так и делал

    • http://www.simplecoding.org/ Владимир

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

  • Елена

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

    • http://www.simplecoding.org/ Владимир

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

      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');});
      });
      }
      });

    • http://www.simplecoding.org/ Владимир

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

  • Елена

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

    • http://www.simplecoding.org/ Владимир

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

      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');});
      });
      }
      });

    • http://www.simplecoding.org/ Владимир

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

  • Елена

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

  • Елена

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

  • Елена

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

    • http://www.simplecoding.org/ Владимир

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

  • Елена

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

    • http://www.simplecoding.org/ Владимир

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

  • hasbah

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

    • http://www.simplecoding.org/ Владимир

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

  • hasbah

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

    • http://www.simplecoding.org/ Владимир

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

  • http://neton.org.ua/ Argo

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

    • http://www.simplecoding.org/ Владимир

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

  • http://neton.org.ua Argo

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

    • http://www.simplecoding.org/ Владимир

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

  • http://zprealty.ru/ Александр

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

  • http://zprealty.ru/ Александр

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

  • http://zprealty.ru/ Александр

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

    • http://www.ooo-bark.ru/ Альберт

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

  • http://zprealty.ru/ Александр

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

    • http://www.ooo-bark.ru Альберт

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

  • Денис

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

  • Денис

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

  • Денис

    не влезли –

  • Денис

    не влезли –

  • Денис

    Normal 0 MicrosoftInternetExplorer4

  • Денис

    Normal 0 MicrosoftInternetExplorer4

  • http://www.simplecoding.org/ Владимир

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

    • Денис

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

      • http://www.simplecoding.org/ Владимир

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

  • http://www.simplecoding.org/ Владимир

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

    • Денис

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

      • http://www.simplecoding.org/ Владимир

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

  • Kamilla

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

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

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

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

    • http://www.simplecoding.org/ Владимир

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

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

  • Kamilla

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

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

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

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

    • http://www.simplecoding.org/ Владимир

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

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

  • Евгений

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

    • http://www.simplecoding.org/ Владимир

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

  • Евгений

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

    • http://www.simplecoding.org/ Владимир

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

  • Dachiko

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

  • Dachiko

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

  • Dachiko

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

  • Dachiko

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

  • http://www.simplecoding.org/ Владимир

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

  • http://www.simplecoding.org/ Владимир

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

  • Dachiko

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

  • Dachiko

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

  • http://pavelk.ru/ ПавелК

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

  • http://pavelk.ru ПавелК

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

  • http://pavelk.ru/ ПавелК

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

    • http://www.simplecoding.org/ Владимир

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

  • http://pavelk.ru ПавелК

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

    • http://www.simplecoding.org/ Владимир

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

  • http://www.webaliser.org/ Ярослав

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

    • http://www.simplecoding.org/ Владимир

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

      • http://www.webaliser.org/ Ярослав

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

        • http://www.simplecoding.org/ Владимир

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

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

  • http://www.webaliser.org Ярослав

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

    • http://www.simplecoding.org/ Владимир

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

      • http://www.webaliser.org Ярослав

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

        • http://www.simplecoding.org/ Владимир

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

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

  • http://www.webaliser.org/ Ярослав

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

  • http://www.webaliser.org Ярослав

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

  • gogi

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

    • http://www.simplecoding.org/ Владимир

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

  • gogi

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

    • http://www.simplecoding.org/ Владимир

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

  • http://www.thecoder.ru/ theCoder

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

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

    • http://www.simplecoding.org/ Владимир

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

  • http://www.thecoder.ru theCoder

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

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

    • http://www.simplecoding.org/ Владимир

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

  • Элла

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

    • http://www.simplecoding.org/ Владимир

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

      • Dhuck

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

        • http://www.simplecoding.org/ Владимир

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

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

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

  • Элла

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

    • http://www.simplecoding.org/ Владимир

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

      • Dhuck

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

        • http://www.simplecoding.org/ Владимир

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

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

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

  • http://khvweb.com/ Сергей

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

    • http://www.simplecoding.org/ Владимир

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

  • http://khvweb.com Сергей

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

    • http://www.simplecoding.org/ Владимир

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

  • http://barma.su/ Стас

    Здравствуйте. Меня интересует следующий вопрос:
    Возможно ли указать по умолчанию, чтобы все формы на странице отображались с темой 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"
    });

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

    • http://www.simplecoding.org/ Владимир

      Чтобы работал 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, чтобы вообще без кнопок – никакой класс не указываем и все.

  • http://barma.su Стас

    Здравствуйте. Меня интересует следующий вопрос:
    Возможно ли указать по умолчанию, чтобы все формы на странице отображались с темой 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"
    });

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

    • http://www.simplecoding.org/ Владимир

      Чтобы работал 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, чтобы вообще без кнопок – никакой класс не указываем и все.

  • http://www.yaflorist.com/ Kamilla

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

    • http://www.simplecoding.org/ Владимир

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

      • http://www.yaflorist.com/ Kamilla

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

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

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

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

        • http://www.simplecoding.org/ Владимир

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

      • http://www.yaflorist.com/ Kamilla

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

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

        но

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

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

        • http://www.simplecoding.org/ Владимир

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

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

  • http://www.yaflorist.com Kamilla

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

    • http://www.simplecoding.org/ Владимир

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

      • http://www.yaflorist.com Kamilla

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

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

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

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

        • http://www.simplecoding.org/ Владимир

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

      • http://www.yaflorist.com Kamilla

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

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

        но

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

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

        • http://www.simplecoding.org/ Владимир

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

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

  • http://www.yaflorist.com/ Kamilla

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

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

    • http://www.simplecoding.org/ Владимир

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

  • http://www.yaflorist.com Kamilla

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

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

    • http://www.simplecoding.org/ Владимир

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

  • http://www.yaflorist.com/ Kamilla

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

    • http://www.simplecoding.org/ Владимир

      Не уверен, нужно пробовать ;)

  • http://www.yaflorist.com Kamilla

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

    • http://www.simplecoding.org/ Владимир

      Не уверен, нужно пробовать ;)

  • http://exay.info/ exay

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

    • http://www.simplecoding.org/ Владимир

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

  • http://exay.info exay

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

    • http://www.simplecoding.org/ Владимир

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

  • Олег

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

    • http://www.simplecoding.org/ Владимир

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

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

  • Олег

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

    • http://www.simplecoding.org/ Владимир

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

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

  • Александр

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

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

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

    • http://www.simplecoding.org/ Владимир

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

  • Александр

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

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

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

    • http://www.simplecoding.org/ Владимир

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

  • http://wedding75.ru/ Сергей

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

  • http://wedding75.ru/ Сергей

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

  • campusboy

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

    • campusboy

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

      • http://www.simplecoding.org/ Владимир

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

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

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

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

        • campusboy

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

        • http://www.simplecoding.org/ Владимир

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

  • campusboy

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

    • campusboy

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

      • http://www.simplecoding.org/ Владимир

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

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

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

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

        • campusboy

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

        • http://www.simplecoding.org/ Владимир

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

  • Элла

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

  • Элла

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

  • Элла

    прописала
    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, в мозиле и опере работает. Что же теперь для ИЕ сделать? А есть возможность вообще снести эту функцию? Мало ли где она сработает еще!

    • http://www.simplecoding.org/ Владимир

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

      • Элла

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

      • Элла

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

      • Элла

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

      • Элла

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

        • http://www.simplecoding.org/ Владимир

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

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

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

  • Элла

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

    • http://www.simplecoding.org/ Владимир

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

      • Элла

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

      • Элла

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

      • Элла

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

      • Элла

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

        • http://www.simplecoding.org/ Владимир

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

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

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

  • Элла

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

  • Элла

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

  • Элла

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

    • http://www.simplecoding.org/ Владимир

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

      • Элла

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

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

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

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

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

  • Элла

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

    • http://www.simplecoding.org/ Владимир

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

      • Элла

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

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

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

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

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

  • Элла

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

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

    • http://www.simplecoding.org/ Владимир

      Я немного поспешил.
      Вы может получить отдельно текст, который находится в круглых скобках, т.е. текст ссылки.
      А во втором параметре 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 = '(.*?)';

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

    • http://www.simplecoding.org/ Владимир

      Я немного поспешил.
      Вы может получить отдельно текст, который находится в круглых скобках, т.е. текст ссылки.
      А во втором параметре 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, даблицу вставленную мной исковеркал

    • http://www.simplecoding.org/ Владимир

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

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

  • JIPuBET

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

    • http://www.simplecoding.org/ Владимир

      Попробуйте использовать опцию
      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 ? тисто теги кстати он ещо и добавляет слеши /> в конце а у меня доктейп такое не признает

    • http://www.simplecoding.org/ Владимир

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

  • JIPuBET

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

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

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

    • http://www.simplecoding.org/ Владимир

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

  • tray1991

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

  • tray1991

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

  • tray1991

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

  • tray1991

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

  • http://www.load-portal.ru/ sva1987

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

    • http://www.simplecoding.org/ Владимир

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

      tinyMCE.init({

      mode : "exact",
      elements : "elm1,elm2"
      });

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

      • http://www.woman-live.ru/ sva1987

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

  • http://www.load-portal.ru sva1987

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

    • http://www.simplecoding.org/ Владимир

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

      tinyMCE.init({

      mode : "exact",
      elements : "elm1,elm2"
      });

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

      • http://www.woman-live.ru sva1987

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

  • JIPuBET

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

  • JIPuBET

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

  • JIPuBET

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

    • http://www.simplecoding.org/ Владимир

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

  • JIPuBET

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

    • http://www.simplecoding.org/ Владимир

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

  • http://womanforma.ru/ kartinka

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

  • http://womanforma.ru kartinka

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

  • Андрей

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

    • http://www.simplecoding.org/ Владимир

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

      • Андрей
        • http://www.simplecoding.org/ Владимир

          Сам плагин нужно копировать в папку tinymcejscriptstiny_mceplugins, но вставить кнопку на страницу у меня не получилось. Нормальной инструкции я не нашел, а ковырять исходники нет никакого настроения ;)

  • Андрей

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

    • http://www.simplecoding.org/ Владимир

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

      • Андрей
        • http://www.simplecoding.org/ Владимир

          Сам плагин нужно копировать в папку tinymce\jscripts\tiny_mce\plugins\, но вставить кнопку на страницу у меня не получилось. Нормальной инструкции я не нашел, а ковырять исходники нет никакого настроения ;)

  • Тимофей

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

    • http://www.simplecoding.org/ Владимир

      Я не понял до конца, что вы хотите сделать. Но дам ссылку на статью в которой есть пример управления редактором.

      Кроме того, возможно, вам нужен объект tinymce.Editor.

  • Тимофей

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

    • http://www.simplecoding.org/ Владимир

      Я не понял до конца, что вы хотите сделать. Но дам ссылку на статью в которой есть пример управления редактором.

      Кроме того, возможно, вам нужен объект tinymce.Editor.

  • Генри

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

    • http://www.simplecoding.org/ Владимир

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

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

      editor_deselector : "mceNoEditor"
      });

  • Генри

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

    • http://www.simplecoding.org/ Владимир

      Устанавливаете класс для 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

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

    • http://www.simplecoding.org/ Владимир

      Я видел готовое решение на форуме 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

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

    • http://www.simplecoding.org/ Владимир

      Я видел готовое решение на форуме 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

  • http://blog.arseo.ru/ Arseo

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

    • http://www.simplecoding.org/ Владимир

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

  • http://blog.arseo.ru Arseo

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

    • http://www.simplecoding.org/ Владимир

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

  • Виктор

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

    • http://www.simplecoding.org/ Владимир

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

  • Виктор

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

    • http://www.simplecoding.org/ Владимир

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

  • новичек

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

    • http://www.simplecoding.org/ Владимир

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

  • новичек

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

    • http://www.simplecoding.org/ Владимир

      Установите 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);
    Опечатка ))

    • http://www.simplecoding.org/ Владимир

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

      • Вячеслав

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

  • Вячеслав

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

    • http://www.simplecoding.org/ Владимир

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

      • Вячеслав

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

  • Наталья

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

    • http://www.simplecoding.org/ Владимир

      Я сам с этой проблемой не сталкивался, но видел решение

  • Наталья

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

    • http://www.simplecoding.org/ Владимир

      Я сам с этой проблемой не сталкивался, но видел решение

  • андрей

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

  • андрей

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

  • Владимир

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

    • http://www.simplecoding.org/ Владимир

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

  • Владимир

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

    • http://www.simplecoding.org/ Владимир

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

  • Андрей

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

    • http://www.simplecoding.org/ Владимир

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

  • Андрей

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

    • http://www.simplecoding.org/ Владимир

      Скорее всего, не подключился скрипт с самим редактором (строка 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();
    }

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

    • http://www.simplecoding.org/ Владимир

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

      В первую очередь я бы изменил
      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();
    }

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

    • http://www.simplecoding.org/ Владимир

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

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

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

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

  • http://www.cbr250.ru/ CBR 250

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

  • http://www.cbr250.ru CBR 250

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

  • ApatityMax

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

    • http://www.simplecoding.org/ Владимир

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

      .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 для ввода текста???

        • http://www.simplecoding.org/ Владимир

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

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

  • ApatityMax

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

    • http://www.simplecoding.org/ Владимир

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

      .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 для ввода текста???

        • http://www.simplecoding.org/ Владимир

          Прошу прощения, я ошибся.
          Нужно создать 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,
    });
    });

    • http://www.simplecoding.org/ Владимир

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

  • 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,
    });
    });

    • http://www.simplecoding.org/ Владимир

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

  • Пасст

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

    • http://www.simplecoding.org/ Владимир

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

      • Пасст

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

        • http://www.simplecoding.org/ Владимир

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

  • Пасст

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

    • http://www.simplecoding.org/ Владимир

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

      • Пасст

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

        • http://www.simplecoding.org/ Владимир

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

  • http://best-symba.ru/ Денис

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

    • http://www.simplecoding.org/ Владимир

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

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

      • http://best-symba.ru/ Денис

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

      • http://best-symba.ru/ Денис

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

        • http://www.simplecoding.org/ Владимир

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

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

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

  • http://best-symba.ru Денис

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

    • http://www.simplecoding.org/ Владимир

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

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

      • http://best-symba.ru Денис

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

      • http://best-symba.ru Денис

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

        • http://www.simplecoding.org/ Владимир

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

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

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

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

  • http://best-symba.ru Денис

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

  • http://best-symba.ru/ Денис

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

  • http://www.web-tambov.ru/ kravru

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

    • http://www.simplecoding.org/ Владимир

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

  • http://www.web-tambov.ru kravru

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

    • http://www.simplecoding.org/ Владимир

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

  • http://best-symba.ru/ Денис

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

  • http://best-symba.ru Денис

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

  • http://www.krav.ru/ kravru

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

    • http://www.krav.ru/web.html kravru

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

  • http://www.krav.ru kravru

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

    • http://www.krav.ru/web.html kravru

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

  • http://www.krav.ru/web.html kravru

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

    • http://www.krav.ru/web.html kravru

      "Админка" у меня находится в папке сайт.ру/adminka/

      • http://www.simplecoding.org/ Владимир

        Опция называется relative urls.

  • http://www.krav.ru/web.html kravru

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

    • http://www.krav.ru/web.html kravru

      "Админка" у меня находится в папке сайт.ру/adminka/

      • http://www.simplecoding.org/ Владимир

        Опция называется relative urls.

  • http://img192.imageshack.us/img192/6682/pfw.jpg Egoritch

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

  • http://www.simplecoding.org Владимир

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

  • Dreamer

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

  • Dreamer

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

  • http://www.simplecoding.org Владимир

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

  • Dreamer

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

  • Dreamer

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

  • http://www.simplecoding.org Владимир

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

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

  • Dreamer

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

  • Dreamer

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

  • Dreamer

    Нашёл решение для http://otvety.google.ru/otvety/thread?tid=5cf29d2729f17837&table=%2Fotvety%2F&#39; rel="nofollow">продвинутых и http://tinymce.ru/faq/&#39; rel="nofollow">не очень

  • http://www.krav.ru kravru

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

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

    Агент пользователя: 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/

  • http://www.simplecoding.org Владимир

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

  • http://www.krav.ru kravru

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

  • http://webmaster9.ru Lerneree

    Владимир, здравствуйте!
    Пожалуйста , помогите. Ситуация
    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
    работает. Но многого нужного нет (выбор цветов, размера шрифта)
    Наверное надо потихоньку добавлять, чтоб не сломать Но как?

  • http://www.simplecoding.org Владимир

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

  • http://webmaster9.ru Lerneree

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

  • http://webmaster9.ru Lerneree

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

  • http://www.simplecoding.org Владимир

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

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

  • http://webmaster9.ru Lerneree

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

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

  • http://webmaster9.ru Lerneree

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

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

  • http://www.simplecoding.org Владимир

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

  • http://www.simplecoding.org Владимир

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

  • http://webmaster9.ru Lerneree

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

  • http://www.simplecoding.org Владимир

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

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

  • Егор

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

    • http://www.simplecoding.org Владимир

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

  • Телевизор

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

    • http://www.simplecoding.org Владимир

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

  • Alexander

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

  • xand

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

    • http://www.simplecoding.org Владимир

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

      mode : "specific_textareas",
      editor_selector : "area1"
      });

  • Office

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

  • Dog21

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

    • http://www.simplecoding.org Владимир

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

  • Almas3000

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

    • http://www.simplecoding.org Владимир

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

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

  • tir

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

    • http://www.simplecoding.org Владимир

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

      • tir

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

        • http://www.simplecoding.org Владимир

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

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

        • http://www.krav.ru tir

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

        • http://www.simplecoding.org Владимир

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

  • http://internet4runet.ru Виктор Лавренко

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

    • http://www.simplecoding.org Владимир

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

      • http://internet4runet.ru Виктор Лавренко

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

        • http://www.simplecoding.org Владимир

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

        • http://internet4runet.ru Виктор Лавренко

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

  • Al-natasha

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

    • http://www.simplecoding.org Владимир

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

  • http://seogang.ru/ Seohhh

    найс

  • Xkirkx

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

    • Xkirkx

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

      • http://www.simplecoding.org Владимир

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

  • Gogita71

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

    • http://www.simplecoding.org Владимир

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

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

  • Lna Off

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

    • http://www.simplecoding.org Владимир

      Здесь есть инструкция. Но я бы советовал переходить на UTF-8.

  • Михаил

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

    • http://www.simplecoding.org Владимир

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

]]>
Tweet