Курилка.co.ua
Orphus RSS kurilka.co.ua

Category

Archives

Подключение TinyMCE или заметки для начинающих

Author wmas wmas | Category Category Вебмастеру

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

Первое, что Вам понадобиться это скачать TinyMCE Main package, я рекомендую брать stable версии, но смотрите сами. В моем случае это TinyMCE 2.1.3 stable. Закидываем директорию tinymce/, с ее содержанием, в корень нашего сервера. Создаем, для примера, файл add.php. В файл мы пропишем вот такой код:

<form method="post" action="doadd.php">
<textarea id="elm_content" name="content" rows="15" cols="50">
<? echo htmlspecialchars($content);?>
</textarea>
<br />
<input type="submit" name="save" value="Submit" />
</form>

Возьмем на заметку, что атрибут id в форме textarea имеет значение elm_content, а сам html-код уже существующих данных $content обрабатываем функцией htmlspecialchars. Ну а теперь подключим нашу библиотеку. Для этого в приделах <head>…&lt/heade> (рекомендую) или по крайней мере выше ранее упомянутого кода разместим следующее:

<script language="javascript" type="text/javascript"
src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
  mode : "exact",
  elements : "elm_content"
});
</script>

Путь к timy_mcr.js указан для нашего примера, так что следите за правильностью этого значения. Далее идет инициализация tinyMCE. Здесь мы остановимся на двух опциях:

  • mode — указывает каким образом определяется объект, который будет конвертироваться в TinyMCE WYSIWYG. В нашем случае это exact, что позволяет выбрать объекты формы по значению атрибута id или name.
  • elementsid или name объектов формы прописанные через запятую, в нашем случае это elm_content или content.

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

Подключение TinyMCE или заметки для начинающих

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

<? echo $_POST['content']; ?>

Остальное зависит от того, что вы хотите сделать с этими данными. Спасибо за внимание.

Publish: Четверг Дек 27, 2007

24 Responses for "Подключение TinyMCE или заметки для начинающих"

feed for comments on this post

  • Комментарий #1268 author: Dune Reply
    publish: Четверг Фев 14, 2008 at 2:55 пп

    В параметре elements: «elm_content»

    «elm_content» — может быть и именем поля формы (типа name="elm_content"). Без указания id.

  • Комментарий #1269 author: wmas Reply
    publish: Четверг Фев 14, 2008 at 4:38 пп

    2Dune: Здравствуйте!
    Спасибо за комментарий. Действительно можно использовать и атрибут name без указания id. Так что дописал. Надеюсь поправка пригодится и другим. Еще раз спасибо ;-)

  • Комментарий #1340 author: sasha Reply
    publish: Вторник Фев 26, 2008 at 4:32 дп

    Как ни старался не работает

  • Комментарий #1341 author: wmas Reply
    publish: Вторник Фев 26, 2008 at 11:31 дп

    2sasha: hi! Ну, если не работает то явно должны выводиться ошибки. Возможно, что в браузере отключен Javascript, либо неправильно прописан путь к tiny_mce.js

  • Комментарий #1352 author: Roslik Reply
    publish: Вторник Фев 26, 2008 at 5:42 пп

    Подскажите а почему TinyMCE режет скрипты?

  • Комментарий #1360 author: wmas Reply
    publish: Среда Фев 27, 2008 at 11:59 дп

    2Roslik: hi! Честно говоря здесь имхо могут быть разные варианты. Например могут быть пересечения в коде одного скрипта и другого… Я лично если и использую несколько библиотек то пытаюсь подобрать их таким образом чтобы не возникало подобных конфликтов. А свои дописываю с тем же учетом. Каждый случай надо разбирать отдельно :roll:

  • Комментарий #1853 author: Алексей Reply (subscribed to comments)
    publish: Пятница Сен 12, 2008 at 2:58 пп

    А что находится в обработчике doadd.php [action="doadd.php"]? Подскажите пожалуйста как указать tinyMCE какой документ обрабатывать. Сам не разберусь! :cry: Пожалуйста!!!

  • Комментарий #1854 author: wmas Reply
    publish: Пятница Сен 12, 2008 at 4:58 пп

    2Алексей: hi! Содержание входящего документа содержит переменная $content. Мы просто вписываем его (входящий документ) в textarea. Сам же скрипт doadd.php (можно назвать как угодно) является обработчиком полученных от формы данных. В моем примере, это переменная $_POST['content']. Надеюсь мой комментарий прояснил ситуацию ;-)

  • Комментарий #1864 author: Алексей Reply (subscribed to comments)
    publish: Понедельник Сен 15, 2008 at 8:38 дп

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

  • Комментарий #1866 author: wmas Reply
    publish: Понедельник Сен 15, 2008 at 11:39 дп

    2Алексей: hi! Да исходников сколько угодно, это обычная обработка данных формы. К примеру почитайте тут: stepbystep.htmlbook.ru/?id=31

  • Комментарий #1868 author: Алексей Reply (subscribed to comments)
    publish: Понедельник Сен 15, 2008 at 3:06 пп

    Ничего не получается!!! :-| Если не трудно, скиньте пожалуйста Ваш исходник обработчика для TinyMCE на impulse.spb(эт)inbox.ru. Уже неделю бессмысленно «бъюсь головой» об монитор без какого либо результата. Или помогите за деньги. Для человека, хорошо разбирающегося в PHP это ведь пятиминутное дело. Пожалуйста! Очень нужно!

  • Комментарий #1869 author: wmas Reply
    publish: Понедельник Сен 15, 2008 at 3:59 пп

    2Алексей: честно говоря я в полном непонимании вопроса — что именно непонятно?
    Но на всякий случай дописал в заметку содержание doadd.php. Обработчик выводит содержание переменной $_POST['content'], остальное зависит от того что ты хочешь сделать с этими данными… 8-O

  • Комментарий #2031 author: Lagеnd Reply
    publish: Вторник Ноя 25, 2008 at 3:19 пп

    А каким образом можно передать текст в TinyMCE для редактирования? :roll:

  • Комментарий #2040 author: wmas Reply
    publish: Пятница Ноя 28, 2008 at 12:03 пп

    2Lagеnd: hi! Просто в textarea прописываешь. В моём примере через переменную $content.

  • Комментарий #2267 author: Илья Reply (subscribed to comments)
    publish: Понедельник Апр 27, 2009 at 2:22 пп

    Ведите описание статьи — это у меня в админке на new_post.php в этот же файл вставляю скрипт.
    файл add_post.php (обработчик):
    сначала-

    if (isset($_POST['content'])) {$content = $_POST['content']; if ($content == '') {unset($content);}}

    потом-

    <?php
    if (isset($content) {
      /* Здесь пишем что можно заносить информацию в базу */
      $result = mysql_query ("INSERT INTO post (description) VALUES ($content')");
      if ($result == 'true') {echo "Ваша заметка успешно добавлена!";}
      else {echo "Ваша заметка не добавлена!";}
    } else {
      echo "Вы ввели не всю информацию, поэтому заметка в базу не может быть добалена.";
    }
    ?>

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

  • Комментарий #2268 author: wmas Reply
    publish: Понедельник Апр 27, 2009 at 3:39 пп

    2Илья: hi! Надо смотреть, что за ошибку выводит :roll:

  • Комментарий #2269 author: Илья Reply (subscribed to comments)
    publish: Понедельник Апр 27, 2009 at 3:47 пп

    если вводить то что надо вводить в add_post.php?? выводит

    Notice: Undefined variable: content in z:\home\localhost\www\rkspace\admin\new_post.php on line 57

  • Комментарий #2270 author: wmas Reply
    publish: Понедельник Апр 27, 2009 at 5:25 пп

    2Илья: ну, это не ошибка а предупреждение, что на строке 57 имеется неопределенная переменная. Т.е. надо смотреть код находящийся на этой строке :roll:

  • Комментарий #2271 author: Илья Reply (subscribed to comments)
    publish: Понедельник Апр 27, 2009 at 5:50 пп

    НАХОДИТЬСЯ вот это:

    [HTML][/HTML]

  • Комментарий #2272 author: wmas Reply
    publish: Понедельник Апр 27, 2009 at 10:21 пп

    2Илья: э-э-э, возможно ты смотрел файл add_post.php? Предупреждение же касается new_post.php 8-O

  • Комментарий #2310 author: Fast bot Reply
    publish: Среда Июн 10, 2009 at 9:18 дп

    Круто тока установка уже давно имеет упрощенный вид, зайдите на сайт официальный и посмотрите

  • Комментарий #2312 author: wmas Reply
    publish: Среда Июн 10, 2009 at 1:53 пп

    2Fast bot: hi! По моему ничего не изменилось, в плане установки. Или я просто не до конца понял ваш комментарий. И так всё достаточно просто 8-)

  • Комментарий #2427 author: Sab Reply (subscribed to comments)
    publish: Среда Сен 23, 2009 at 4:25 пп

    Написали бы как из редактора передать написанное на страницу сайта или в другую деректорию…

  • Комментарий #2428 author: wmas Reply
    publish: Среда Сен 23, 2009 at 6:15 пп

    2Sab: hi! На мой взгляд это очевидно же 8-O
    TinyMCE всего лишь визуальная надстройка, не меняющая сути вещей.
    Мы работаем с обычной формой — не больше не меньше.
    Если человек не знает как обрабатывать данные из формы, думаю не стоит браться за TinyMCE (имхо) ;-)


Popular links

Copyright © since 2006 Курилка.co.ua,
powered by WordPress