<MyRusakov.ru />

Создание сайтов на Django

Создание сайтов на Django

Данный курс научит Вас создавать сайты на очень мощном фреймворке – Django. Курс состоит из 9 разделов, в которых Вы с нуля освоите данный фреймворк на примере создания полноценного Интернет-магазина.

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

Помимо самого курса Вас ждёт ещё и бесплатный ценный Бонус: «Unit-тестирование сайта на Django». В этом Бонусе Вы узнаете, как можно написать автоматические тесты для проекта на Django. Это позволит находить оперативно ошибки, а также даст возможность в будущем добавлять новый функционал, не боясь что-то сломать в старом.

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

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

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

Подписавшись по 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-код ссылки для форумов (например, можете поставить её в подписи):

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

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 и запустил но он несработал в других местах нечего неменял.

Ответить

brainbox brainbox 08.10.2016 10:14:06

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

Ответить

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