Скрипт визуальный и простой предназначен для HTML редактирования кода или скрипта, с возможностью использования стиля в оформленном окне ajax. Обычно я для этого использую просто блокнот, но вот с этим удобством можно и без блокнота отлично создавать что либо и в секунду просмотреть это уже на открывающийся страницы без порчи дизайна или кода. Еще было бы удобно добавить подсветку кода, но это будет очень сильно нагружать и стоит обойтись уже что есть. Бывает нужно просто просмотреть как будет выглядеть дизайн со стилем того или иного модуля, блока, страницы, то для этого в самый раз использовать такое окно.
Подобные варианты скриптов уже не раз мелькали, с сложными функциями и за которых они тупо тормозили, и вот я нашел более упрощенный вариант и как следует его оформил под стиль "ВК" и удобства использования на сайте или форуме, который работает железно в браузерах Mozilla Firefox и Google Hrom.
Для источенного веб мастера это не заменимый инструмент, по тому и выкладываю то чем сам пользуюсь, на всеобщее пользование и для тех кто любит заимствовать или тырить что либо, быть может хоть такое удобства вас научит писать что то интересное и создавать уникальное и новое для своих проектов.
Как пользоваться редактором? все очень просто, берем любой скрипт или код.
Вставляем любой код и после нажатия клавиши смотрим его работу, вставлять можно как стили CSS, так и исполнительные скрипты (Условные операторы uCoz не рассматриваются!)
Установка скрипта:
копируем код и вставляем в любое удобное место, к примеру в меню, с учетом того что задан класс
searchSbmFl как у кнопки поиск, что бы стилизовать под один стандарт.
Code
<style>
.buttonZ {background: #6289B1; border: 1px solid transparent; border-radius: 3px; padding: 3px 12px; color: #fff !important; font: bold 16px arial; text-decoration: none !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 3px 6px -3px rgba(0,0,0,0.25);}
.buttonZ:hover {background: #4E759D;cursor: pointer;}
.titlesZ {width:100%; background: #6289B1; border: 1px solid transparent; border-radius: 3px; padding: 8px 12px; color: #fff !important; font: bold 16px arial; text-decoration: none !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 3px 6px -3px rgba(0,0,0,0.25);}
.titlesZB {color: #fff !important; font: 12px arial; text-decoration: none !important;}
.textareZ {width:100%; background: #fff; border: 1px solid #ccc; box-shadow: inset 0px 2px 5px #e5e5e5; box-sizing: border-box; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 6px; font: 14px arial; color:#777;}
</style>
<script type="text/javascript" src="http://ucozon.ru/_dr/62/6224_html_ucozon_gen.js"></script><a class="searchSbmFl" href="javascript:html_ucozon();" style="text-decoration: none;"> HTML редактор </a>
Меню сайта
Меню сайта
