Интернетчик » Вставить скрипт в новость DLE

Вставить скрипт в новость DLE

Вставить рабочий ява-скрипт или css-стиль прямо в новость CMS DLE невозможно. Код, заключённый в теги <script>, <onclick> или <style> удаляется редактором движка, вместе с тегами.

  1. Ява-скрипт и css-стиль в новости CMS DLE
  2. Движок DLE «рубает» ява-скрипты
  3. Добавление скриптов в новость DLE
  4. Запись скриптов непосредственно в Базу Данных
  5. Вставляем скрипт в дополнительное поле новости
    (встроенные сценарии и стили)
  6. Подключение к новости DLE сторонних скриптов и стилей
    (внешние сценарии и стили)
  7. Подключение внешнего (стороннего) скрипта в новость DLE

Ява-скрипт и css-стиль в новости CMS DLE

Ява-скрипты и css-стили расширяют функционал страницы с новостью сайта. Например, онлайн-калькуляторы, висящие на тематических технических страницах – мегакалории, теплотворность. Калькуляторы сделаны на ява-скрипт. Псевдоклассы css, :after и :before – используются для исключения из поисковой индексации «мусорных» фраз и стоп-слов. Скрипты калькуляторов и css-стили с мусорными фразами-словами не задействованы нигде. Возникает потребность – добавить в новость DLE jаvascript и css-стиль, уникальные в пределах сайта.

Движок DLE «рубает» ява-скрипты

Увы, такова политика безопасности скрипта. CMS DLE – многопользовательская новостная операционная сайтовая система. Журналисты DLE немедля напихают яваскриптов и css-стилей на сайт. Бесконтрольное добавление скриптов и стилей в тело новости чревато последствиями – от банального перекоса веб-страницы в браузере, до внедрения вражеских функций в структуру сайта. Система защиты движка DLE фильтрует скрипты и коды на вводе данных – от греха подальше. Сдаётся мне, разработчики CMS DLE никогда не реализуют добавление ява-скриптов в новость DLE, даже на уровне администратора сайта – слишком это опасно и вредно.

Добавление скриптов в новость DLE

Добавление скриптов в новость DLE, в обход защитной системы движка – нарушение его политики безопасности. Путь любителей экстрима – вырубить или обойти фильтрацию ввода данных, разрешая пользователям сайта DLE добавление скриптов в новость. Такое, исключительно сумасшедшее рукоприкладство – повод для сэпукки или харакири, в ожидании падения сайта.

Запись скриптов непосредственно в Базу Данных

Дописать «вручную» код скрипта в базу данных (БД) сайта – простой и действенный способ вставить скрипт в новость DLE. Скрипт дописывается в БД, в тело новости, после её публикации на сайте. Система безопасности движка бессильна. При просмотре в браузере модифицированных новостей – дописанные «от руки» коды скриптов и стилей отправляются посетителю на компьютер.

Пересохранение новости в текстовом редакторе сайта – полностью стирает дописанные «вручную» скрипты и стили. «Навсегда» закрепляет код скрипта в новости CMS DLE использование дополнительных полей

Вставляем скрипты в дополнительные поля новости
(встроенные сценарии и стили)

Встроенные сценарии и стили –
программные коды в html-документе,
обёрнутые в теги <script> или <style>

Установить (встроить) скрипт прямо на веб-страницу с новостью позволяет её дополнительное поле – [xfvalue_имя]. При просмотре страницы, содержание доп.поля выводится движком из новости – непосредственно в html-разметку шаблона сайта, где и оборачивается тегами <script> или <style>. Этот способ позволяет частично обойти фильтрацию ввода данных CMS DLE.

Недостатком использования доп.полей в CMS DLE является их общедоступность. Журналисты смогут добавлять скрипты и стили в новости сайта DLE. Запись и загрузка скриптов и стилей в доп.поля новости приемлема владельцам блогов да небольших сайтов, где нет орды журналистов.

Частично, общедоступность доп.полей в CMS DLE ограничивается оборачиванием тегами [group=1] строки {xfields} в шаблоне addnews.tpl и запретом входа журналистов в админпанель движка.

Встроить css в новость DLE

Запишем в новости CMS DLE,
в доп.поле для CSS – код стиля css
и добавим соответствующий класс в html-код новости:

Код css
.proba { color: #ff0000; font-weight: bold; }
.proba:after { content:" Получилось !!! ..." }

Код html
<span class="proba">Пробуем –</span>

Результат в браузере:
Пробуем –
Текст, выведенный через псевдоклассы css, :after и :before – сгенерирован браузером прямо на экран из стиля css. Такой текст – не копируется, не выделяется курсором, не выводится на печать и не индексируется поисковыми системами – его вообще не существует в html-коде веб-документа. На html-странице висит только <span class="proba">, на который поисковые роботы не обращают никакого внимания.

Встроенные css-стили в доп.поле новости CMS DLE работают прекрасно. Недостаток – неоправданное увеличение веса страницы и неприязнь поисковых систем ко всем встроенным стилям. Внешние файлы стилей – решают эту проблему.

Встроить jаvascript в новость DLE

Встроим выпадающее меню на яваскрипт
в новость сайта на CMS DLE.

Запишем в новости CMS DLE,
в доп.поле для CSS – код стиля css,
в доп.поле для jаvascript – код jаvascript
и добавим соответствующие классы в html-код новости:

Код css
#vipad {background-color:#ccc;cursor:pointer;padding:10px 20px;}
#vipad_list {display:none;}
#vipad_list.open1 {display:block;}

Код jаvascript
$(function() {
 $('#vipad').click(function() {
  $('#vipad_list').toggleClass("open1");
  return false;
 });
});

Код html
<div id="vipad">Выпадающий список на ява-скрипт в новости CMS DLE</div>
<ol id="vipad_list">
 <li>Вставить</li>
 <li>ява-скрипт</li>
 <li>в новость</li>
 <li>CMS DLE</li>
</ol>

Результат в браузере:

Выпадающий список на ява-скрипт в новости CMS DLE
  1. Вставить
  2. ява-скрипт
  3. в новость
  4. CMS DLE

Встроенные ява-скрипты в доп.поле новости CMS DLE ограничены функционально – совершенно невозможно использовать события, вида «onclick», вырезаемые движком из текста новости во время её сохранения. Единственный выход – подключение к новости DLE скриптов и стилей из внешних файлов – работает всё.

Подключение к новости DLE сторонних скриптов и стилей
(внешние сценарии и стили)

Внешние скрипты и стили –
программные коды, записанные в отдельных файлах
и загружаемые в браузер отдельно от остальной информации

Наличие доп.полей в CMS DLE позволяет «подтянуть со стороны» скрипты и стили при просмотре полной новости на сайте. Для загрузки файлов внешних скриптов и стилей в новость DLE используется конструкция, вида <script type="тип" src="URL"></script> где, URL – дополнительное поле новости CMS DLE, вида [xfvalue_имя].

Краткая теория Создаётся доп.поле с именем «java_download». В шаблон fullstory.tpl вставляется конструкция <script type="text/jаvascript" src="[xfvalue_java_download]"></script>. Файл ява-скрипта грузится «вручную» на сервер, а ссылка на скачивание вставляется в доп.поле новости. Дальше, при просмотре полной новости на сайте – скрипт «подхватывается» и загружается браузером, как только он (браузер) увидит запись на странице, вида: <script type="text/jаvascript" src="uploads/имя скрипта.js"></script>. При необходимости, интерактивные элементы со свойствами «onclick» – динамически создаются самим ява-скриптом на странице новости CMS DLE. В результате описанных фантазий – к новости DLE подключится, и ява-скрипт, и его onclick-и.

Подключение внешнего (стороннего) скрипта в новость DLE

Возьмём сценарий, совершенно невстраиваемый в новость CMS DLE из-за присутствия в сценарии события «onclick». Описание сценария: нажатие интерактивной ссылки «Считать кролей!» (событие «onclick») – вызывает модальное окно с надписью «Из шляпы достали "N" кролика!». Где, N – изменяется от 1 до 3, после нажатия клавиши «Enter» или кнопки «OK».

Код jаvascript
function count_rabbits(){
 for( var i=1; i<=3; i++; ){ alert("Из шляпы достали "+i+" кролика!" )}}

Код html
<a href='# onclick="count_rabbits(); return false;" title="Считать кролей!">Считать кролей</a>

Вышеописанный ява-код в новости CMS DLE не будет работать никогда – из html-кода новости DLE событие onclick вырезается движком во время сохранения новости. Видоизменяем код, создавая интерактивность (onclick) силами ява-скрипта при его загрузке. Адаптированный к условиям CMS DLE код яваскрипт:

Код jаvascript
document.getElementById('my_proba').onclick=
function count_rabbits(){
 for(var i=1;i<=3;i++){alert("Из шляпы достали "+i+" кролика!")}
return false;}
Код html
<a href="#" id="my_proba">Считать кролей</a>
Результат в браузере:
Считать кролей

Несмотря на перенос onclick из html-кода в тело яваскрипта, встроить его в доп.поле новости всё равно не выйдет – само слово onclick вырезается и коверкается движком, хоть ты ему тресни. Такой яваскрипт можно вставить в новость DLE только в виде внешнего сценария – отдельно загружаемого файла.

– Пишем код яваскрипт в отдельный файл с расширением .js, заливаем его «вручную» на сервер и вставляем прямую ссылку на скачивание в доп.поле новости – [java_download]. Точно так – поступаем с файлом CSS. С той только разницей, что расширение файла будет .css, а ссылку на его скачивание – вставляем в доп.поле новости для css – [css_download]. Разница заметна во вставленных в шаблон полной новости (fullstory.tpl) конструкциях – <style type="text/css" src="[css_download]"></style> (для CSS) и <script type="text/jаvascript" src="[java_download]"></script> (для jаvascript)

К недостаткам использования внешних файлов в новостях CMS DLE относятся: ручная (ftp) загрузка файлов скриптов и стилей на сервер, и – проблемы с кодировкой текста. Последняя – самая труднорешаемая для сайтов с кодировкой windows 1251.

Напоминание. Использование скриптов и стилей в доп.полях новостей CMS DLE – небезопасное дело из-за общедоступности дополнительных полей. Скрипты на сайте – всегда источники проблем, хотя-бы из-за своей несовместимости.