Найти тему
bestprogramm.site

Как запретить HTML-сущностям превращаться в HTML тэги?

Оглавление

Здравствуйте!

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

Ситуация

Итак, Вы спроектировали Базы Данных и все казалось бы, можно остановиться на этом; в Интернете есть WYSIWYG редакторы, можно написать статью скопировать код HTML и вставить в Базу Данных (далее БД), а с помощью суперглобального массива $_GET вывести статью (вместе с HTML кодом). Да, так конечно можно делать, но на все эти процедуры тратиться достаточно много времени, а в случае грамматической ошибки еще больше времени. Какой же выход? Все звучит просто- установить на свой сайт WYSIWYG редактор и настроить его под свои нужды. Дату и время можно узнать средствами PHP, а текст отправлять в БД с помощью AJAX, используя методы WYSIWYG редактора.

Хорошо, можно даже настроить редактирование материалов и вот тут-то все и начинается. Допустим, Вы создаете справочник HTML тэгов, может быть для себя, а может быть и для общественности. В любом случае, Вы заметите, что символы </> превращаются в HTML сущности. О них было сказано тут. И все бы ладно было, но при редактирование получается много неприятных моментов, о них и поговорим в этой статье!

Лирическое отступление

Как правило, WYSIWYG редактор, превращает текстовое поле (<textarea>) в свое собственное поле редактирование. При выводе из БД всех данных, включая HTML-сущности, сами сущности превращаются обратно в символы </>. Казалось бы, что еще нужно? Но вот не задача WYSIWYG редактор даже не задумывается, что это нужно обрабатывать, как текст, более того он считает, что перед ним HTML тэг, такой же, как и <font> и поэтому обработает его по всем правилам: определит цвет и размер, семейство шрифтов. Допустим, что вашей первой статьей будет информация про самый первый тэг- <html>. По идеи, в текстовом поле из HTML сущностей мы получим HTML-тэг, но при обработке визуальным редактором HTML возникает проблема… <html>- на месте тэга остается пустое пространство или пустая строка. Поскольку WYSIWYG редактор визуальный, то он просто отрабатывает весь код, как обычную страницу HTML. Для наглядности, приведем пару снимков.

1)Вывод в обычное поле textarea 2)Результат работы WYSIWYG редактора 3)Хранение в БД HTML сущностей
1)Вывод в обычное поле textarea 2)Результат работы WYSIWYG редактора 3)Хранение в БД HTML сущностей

Возвращаемся к теме

Итак, как мы видим на примере одного и того же фрагмента кода в визуальном редакторе вообще не отображается код HTML (на его месте пустота), а в текстовом поле вместо HTML-сущностей HTML-тэги. Ничего не приходит на ум, кроме запрета на превращение. Буду сейчас весьма откровенен, используя Яндекс и Google я потратил 1,5 часа, что бы найти нужную функцию и перепробовал где-то 2-3 метода. И остановился только на одном из них, который реально работает! Это функция htmlentities.

Предлагаю посмотреть, как она работает и чем может нам помочь:

1)Добавление функции htmlentities; $n2-текст из БД 2)Результат работы функции для визуального редактора 3)Результат работы для <textarea>
1)Добавление функции htmlentities; $n2-текст из БД 2)Результат работы функции для визуального редактора 3)Результат работы для <textarea>

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

Пожалуйста, ставим лайки и репосты, если эта статья была немножечко полезной или интересной. Для нас очень важно Ваше мнение! Если у Вас есть, что сказать по этому поводу, то прошу: комментарии и Личные Сообщения (группы) всегда на связи и мы постараемся ответить Вам, если это будет возможно.

Бонус

Вы подумали, что я заканчиваю или даже закончил статью? Нет, это не так :). На самом деле, я буквально на минуточку хочу задержать Ваше внимание. Возможно многие не знают, как и какой WYSIWYG редактор устанавливать? Поэтому, так сказать, послесловие. На само деле я обнаружил возможность установки визуального редактора на сайт случайно, благодаря ошибке другого сайта, который дал мне в руки название этого редактора. Кроме, того обнаружить название, тоже было нелегко. Ладно не буду томить наших читателей- это CKEEDITOR. Бдительные, наверняка, обнаружили конструкцию:

CKEDITOR.replace( 'ckeonline' );

Это и был ключ к разгадке! Да и конечно стоит сказать, что он полностью бесплатный(за исключением пару функций, которые расширили бы его возможности), а нужные функции подключаются достаточно быстро и легко. Навигация по сайту без знаний английского языка затруднена, но мы даем Вам прямую ссылку на скачивание. Вы можете:

  • Скачать Lite версию, которая не будет загромождена
  • Скачать Basic версию, она включает все самое необходимое для работы с текстом
  • Скачать Full версию, идеально для всех, кто знает HTML более года
  • Собрать свой редактор, с нужными Вам функциями

В бесплатной версии отключен «Файловый менеджер». О том, как включить его мы поговорим в одной из следующей статей! Установка данного WYSIWYG редактора предельно проста и понятна. Главное, читать документацию и смотреть консоль браузера; и конечно проверять работоспособность всех функций. Если возникнут проблемы с установкой не стесняйтесь спросить, я попробую помочь Вам!

Эпилог

Следующая статья выйдет приблизительно через 8-17 дней. Тему оставляю в секрете, поскольку она такая же необычная и её трудно найти в Интернете, точнее решение проблем!

До новых встреч!