<MyRusakov.ru />

Создание игр на Unreal Engine 5

Создание игр на Unreal Engine 5

Данный курс научит Вас созданию игр на Unreal Engine 5. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

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

Помимо самого курса Вас ждёт ещё 8 бесплатных ценных Бонусов: «Chaos Destruction», «Разработка 2D-игры», «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства», «Создание прототипа RPG с открытым миром» и и весь курс «Создание игр на Unreal Engine 4» (актуальный и в 5-й версии), включающий в себя ещё десятки часов видеоуроков.

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

Подпишитесь на мой канал на 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 [email protected] 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 [email protected] 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 [email protected] 21.03.2013 13:21:08

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

Ответить

Admin Admin 21.03.2013 13:35:36

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

Ответить

alikhanov_k@mail.ru [email protected] 21.03.2013 13:42:25

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

Ответить

alikhanov_k@mail.ru [email protected] 04.04.2013 18:00:29

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

Ответить

Admin Admin 04.04.2013 20:55:43

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

Ответить

alikhanov_k@mail.ru [email protected] 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 [email protected] 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 [email protected] 05.04.2013 21:37:09

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

Ответить

alikhanov_k@mail.ru [email protected] 28.04.2013 21:04:25

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

Ответить

alikhanov_k@mail.ru [email protected] 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? Спасибо!

Ответить

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