<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как сделать визуальный редактор на JavaScript

Как сделать визуальный редактор на JavaScript

Наверняка, Вы много раз сталкивались с визуальными редакторами, позволяющими достаточно удобно формировать внешний вид страниц, либо каких-то сообщений, например, на форуме. Причём не с BB-кодами, а сразу получая конкретный результат. Этих редакторов достаточно много в Интернете. Один из самых популярных - это TinyMCE, однако, я сторонник собственных скриптов и считаю, что для каждой задачи должно быть своё решение, а не универсальное. Поэтому в этой статье я расскажу, как создать визуальный редактор на JavaScript.

Сразу привожу достаточно хорошо прокомментированный код:

<form name="myform" action="#" method="post" onsubmit="return save()">
  <p>
    <input type="hidden" id="content" name="content" value="" />
  </p>
  <script type="text/javascript">
    // Вывод кнопок редактирования
    document.write("<input type='button' value='B' onclick='setBold()' />");
    document.write("<input type='button' value='I' onclick='setItal()' />");
    document.write("<br />");
    document.write("<iframe scrolling='no' frameborder='no' src='#' id='frameId' name='frameId'></iframe>"); // Добавляем iframe
    /* В зависимости от браузера получаем доступ к созданному фрейму */
    var isGecko = navigator.userAgent.toLowerCase().indexOf("gecko") != -1;
    var iframe = (isGecko) ? document.getElementById("frameId") : frames["frameId"];
    var iWin = (isGecko) ? iframe.contentWindow : iframe.window;
    var iDoc = (isGecko) ? iframe.contentDocument : iframe.document;
    /* Создаём код пустой HTML-страницы */
    iHTML = "<html><head></head><body style='background-color: yellow;'></body></html>";
    iDoc.open(); // Открываем фрейм
    iDoc.write(iHTML); // Добавляем написанный код в фрейм
    iDoc.close(); // Закрываем фрейм
    iDoc.designMode = "on"; // Включаем режим редактирования фрейма
    /* Функции для задания внешнего вида выделенного текста
    Полный набор возможных команд: http://javascript.itsoft.ru/execcom/execCommands.html */
    function setBold() {
      iWin.focus();
      iWin.document.execCommand("bold", null, "");
    }
    function setItal() {
      iWin.focus();
      iWin.document.execCommand("italic", null, "");
    }
    function save() {
      /* Сохранение HTML-кода в поле hidden, чтобы потом можно было передать полученный HTML-код в скрипт-обработчик */
      document.getElementById("content").value = iDoc.body.innerHTML;
      return true;
    }
  </script>
  <p>
    <input type="submit" value="Отправить" />
  </p>
</form>

На первый взгляд, кажется, что код очень сложный. И так оно и есть, но если рассмотреть его по базовым элементам, то ничего сложного нет. Есть обычная форма и поле hidden, куда сохраняется получившийся в редакторе HTML-код. Сам редактор - это обычный фрейм, то есть обычная HTML-страница, в которой мы можем писать текст (designMode = "on"). А различные форматирования создаются с помощью метода execCommand(), который выполняет указанную в параметре команду. А уж создать новые кнопки и прикрепить к ним аналогичные обработчики, думаю, что не составит для Вас труда.

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (24):

lion337 lion337 11.07.2012 16:35:49

Спасибо Михаил, отличная штука, сам пользуюсь HTML Box. Но теперь, есть над чем поработать.

Ответить

alikhanov_k@mail.ru alikhanov_k@mail.ru 21.03.2013 10:41:58

Почему то у меня не получается получить данные в php. Я сделал следующее: 1. Создал файл data.php: <?php $strHeading = "<h1>Текст, " .$_POST["content"]. "</h1>"; ?> <html> <body> <? echo $strHeading; ?> </body> </html> 2. Потом в вашем html файле прописал следущее: <form name="myform" action="data.php" method="post"> Однако никаких записей в data.php не получил.

Ответить

Admin Admin 21.03.2013 11:08:47

Для того, чтобы отправлять, нужно написать в form onsubmit="return save()". В этой save() сделать сохранение (которое уже есть в статье) в hidden и вернуть true, тогда форма отправится с данными.

Ответить

alikhanov_k@mail.ru alikhanov_k@mail.ru 21.03.2013 11:24:52

Не получается с form onsubmit="return save()" Я поставил ее так <form name="myform" onsubmit="return save()" action="data.php" method="post"> Но все равно не работает!

Ответить

Admin Admin 21.03.2013 12:00:22

Вы функцию save() вообще написали?

Ответить

alikhanov_k@mail.ru alikhanov_k@mail.ru 21.03.2013 13:21:08

Извиняюсь не писал. Дело в том что я не разбираюсь в js. Мне просто очень понравилась ваша идея использовать вместо громоздких редакторов, простой код. Могли бы вы сюда скинуть полный код который позволял бы отправлять текст из формы этого урока, в базу данных или в другую страницу php. Сам я чайник в js.

Ответить

Admin Admin 21.03.2013 13:35:36

Дописал код в статье.

Ответить

alikhanov_k@mail.ru alikhanov_k@mail.ru 21.03.2013 13:42:25

Ура заработало! Респект вам.

Ответить

alikhanov_k@mail.ru alikhanov_k@mail.ru 04.04.2013 18:00:29

Скрипт хорошо работает! Спасибо вам за это. У меня только один вопрос. Если закачивать напрямую данные из этого редактора в Базу Данных, то не возникнут проблемы с безопасностью?

Ответить

Admin Admin 04.04.2013 20:55:43

Возникнут, особенно, если их потом ещё и выводить куда-нибудь на страницу. Поэтому надо пропускать через htmlspecialchars(), либо допускать только некоторые теги для использования.

Ответить

alikhanov_k@mail.ru alikhanov_k@mail.ru 05.04.2013 09:08:27

Здравствуйте! Сделал так: echo "<h1>" . $_POST[htmlspecialchars("content")] . "</h1>"; Правильно? И еще при выводе текста код выходит такой: <div>Строка1</div><div>Строка2</div> можно ли заменить <div> на <p>? То есть чтобы выходило так: <p>Строка1</p><p>Строка2</p> Заранее благодарю.

Ответить

Admin Admin 05.04.2013 11:26:14

Первая часть неправильная, надо $_POST пропускать через эту функцию, а не какую-то бессмысленную строку. Заменить можно, для этого есть str_replace().

Ответить

alikhanov_k@mail.ru alikhanov_k@mail.ru 05.04.2013 17:06:38

Спасибо за str_replace(). Можно ли вместо htmlspecialchars использовать strip_tags($mytext, '<p><i><b>')? И этим обезопасить сайт.

Ответить

Admin Admin 05.04.2013 21:16:36

Можно.

Ответить

alikhanov_k@mail.ru alikhanov_k@mail.ru 05.04.2013 21:37:09

Спасибо вам большое! Я поставил ссылку на ваш сайт здесь - tendey.kz/ru/.

Ответить

alikhanov_k@mail.ru alikhanov_k@mail.ru 28.04.2013 21:04:25

Редактор работает хорошо. Только не знаю, как сделать скрипт для изменении данных. То есть чтобы можно было изменять набранный текст, который сохранен в Базе Данных.

Ответить

alikhanov_k@mail.ru alikhanov_k@mail.ru 28.04.2013 21:09:29

Для обычных полей <input> я сделал через value='$peremennaya'. Но для визуального редактора это не подошло.

Ответить

Admin Admin 29.04.2013 04:17:37

iHTML = "<html><head></head><body style='background-color: yellow;'></body></html>"; - внутрь body добавляйте контент, который необходимо будет отправить.

Ответить

innovator innovator 23.08.2013 16:13:56

Здравствуйте Михаил! Пожалуйста помоги мне я уже весь нэт перевернул но все равно не получается. Я создал админ панель для моего html сайта управление меню и другое все сделал и работает но проблема заключается в добавлении новых страниц и редакции существующих. Как внедрить редактор для свободного редактирования и добавления страниц желательно TinyMCE потому что она в joomla работает супер но мне joomla не нужна. Если ты сделаешь по этому поводу видео курс то я буду тебе благодарен и обязательно поставлю твои материалы на мой сайт с сcылкой на автора.

Ответить

innovator innovator 23.08.2013 16:15:03

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

Ответить

alexandrdante alexandrdante 25.10.2014 16:36:03

в ближайшее время такой курс не планируется. Но,если вы знаете php и js,внедрить визуальный редактор,используя документацию на офф.сайте редактора - труда не составит

Ответить

1111g 1111g 25.10.2014 14:26:43

Спасибо, штука крутая, но можно сделать рядом с кнопками В и І галочки поставить нужно же пользователю знать включен или выключен параметр кусива или полужирного?

Ответить

sheroz-06 sheroz-06 10.04.2016 08:30:36

Здраствуйте, я создал два html файла один пустой(art.htm) и другой с скриптом(edit.htm) так как я незнаю js я скопировал скрипт сайта и вставил в edit.htm и в action="art.htm" прописал art.htm и запустил но он несработал в других местах нечего неменял.

Ответить

sheroz-06 sheroz-06 10.04.2016 08:30:37

Здраствуйте, я создал два html файла один пустой(art.htm) и другой с скриптом(edit.htm) так как я незнаю js я скопировал скрипт сайта и вставил в edit.htm и в action="art.htm" прописал art.htm и запустил но он несработал в других местах нечего неменял.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.