» » Вставить скрипт в новость 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 javascript и 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.

  • В админпанели движка – создать дополнительные поля с именами «css» (для CSS) и «java» (для javascript). Тип поля – несколько строк. «Использовать поле по желанию» – да. Текстовый редактор – не подключать.
  • В низ шаблона полной новости (fullstory.tpl) вставить конструкции
    <style type="text/css">.verno:after { content:". Это правильно и верно, безопасность сайта - прежде всего" } .znak:after { content:" значительно" } .edin:after { content:", как только на одной-единственной странице" } .real:after { content:" реальная" } .vestimo:after { content:" Оно и вестимо." } .razre:after { content:", только разреши" } .hyev:after { content:". Х*у*ё*в*ы*й результат не заставит себя долго ждать" } .nedo:after { content:" – она не участвует в такой записи" } .dlia:after { content:" Для этого:" } .budut:after { content:" (и будут!)" } .zaval:after { content:", и таки - завалят его. Никакая модерация не остановит этот дурдом" } .razve:after { content:", разве что -" } .vikrutas:after { content:" со своими выкрутасами" } .proba { color: #ff0000; font-weight: bold; } .proba:after { content:" Получилось !!! Эта запись сделана в css к этой новости. Поисковые роботы не видят эти слова. Теперь можно писать любую чепуху, не опасаясь её индексации !!!" } .k_4emy:after { content:". К чему мы, собственно и стремимся" } #vipad {margin-bottom:11px;background-color:#ccc;cursor:pointer;padding:10px 20px;} #vipad_list {display:none;} #vipad_list.open1 {display:block;} .avtor {font-weight: bold; } .avtor_da { border:2px solid #dfe3e6; padding:0 10px;} .avtor_da:after { content:" Пишите комменты, будем читать." }</style> (для CSS)
    <script type="text/javascript">$(function(){$('#vipad').click(function(){$('#vipad_list').toggleClass("open1");return false;});});</script> (для javascript)
  • При добавлении новости – в созданные доп.поля записываются требуемые коды скриптов и стилей

Недостатком использования доп.полей в 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 работают прекрасно. Недостаток – неоправданное увеличение веса страницы и неприязнь поисковых систем ко всем встроенным стилям. Внешние файлы стилей – решают эту проблему.

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

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

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

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

Код javascript
$(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_имя].

  • В админпанели движка – создать дополнительные поля с именами «css_download» (для CSS) и «java_download» (для javascript). Тип поля – одна строка. Установить чебокс (галочку) в положение «Использовать поле по желанию»
  • В низ шаблона полной новости (fullstory.tpl) вставить конструкции
    <link rel="stylesheet" type="text/css" href="[xfvalue_css_download]"> (для CSS)
    <script type="text/javascript" src="/uploads/tehnopost/81-vstavit-skript-v-novost-dle.js"></script> (для javascript)
  • При добавлении новости – в созданные доп.поля записываются полные url-адреса требуемых кодов скриптов и стилей, загруженных на сервер
  • Создать файлы скриптов с расширениями .css и .js и загрузить их «вручную» (по ftp) на сервер. После загрузки – выписать полный (абсолютный) путь к загруженному файлу и проверить доступ к нему. Путь должен иметь вид http://tehnopost.info/uploads/tehnopost/имя скрипта.js (или css)
  • Для проверки доступа к загруженному файлу – вставить полный путь в адресную строку браузера – текст файла должен высвечивать на экран. Для проверки правильности подключения файла – сохранить страницу с новостью сайта на домашний компьютер – подключённый файл должен сохраниться вместе с остальными файлами веб-страницы.

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

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

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

Код javascript
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 код яваскрипт:

Код javascript
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/javascript" src="[java_download]"></script> (для javascript)

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

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

Ключевые слова статьи: HTML интернет сайт

Поделиться ссылкой на статью в социальной сети, добавить в избранное или распечатать:
  1. <
    Гость

    30 декабря 2015 10:59

    Цитата: "проблемы с кодировкой текста"
    Я пишу кириллицу в ява-скрипт сразу в юникоде, всегда и на всех браузерах отображается правильно и нет никаких проблем с кодировкой текста. В скрипте получается, примерно такая запись - \u041A\u0420\u041E\u041B\u0418\u041A - это буквы кириллицы в Юникоде
    Самый простой способ узнать код Юникод для нужной буквы - открыть Ворд - Вставить - Символ - выбрать символ и смотреть его код. Без буквы u, конечно

Добавление комментария

Введите код: *
Кликните на изображение чтобы обновить код, если он неразборчив