Редактор HTML & jQuery & Bootstrap · aTmpl

Редактор предназначен для проверки и настройки HTML кода, оборудован фреймворком jQuery и плагином Bootstrap.

<style>
p,pre,blockquote {margin:0px 10px 0px 10px}
*:nth-child(11) {color:red}
</style>
<h1 class="text-center">Редактор HTML & jQuery & Bootstrap · aTmpl</h1>
<p class="lead">Добавьте свой HTML код, исключив наличие фреймворка jQuery и плагина Bootstrap.</p>
<p>Используйте элементы управления для формирования кода, теги &lt;img&gt; и &lt;a&gt; оснащены селекторами плагина Bootstrap.</p>
<h2 class="text-center">Установить редактор на свой сайт</h2>
<p class="lead">Для установки редактора на свой сайт добавьте в зону &lt;head&gt; код стилей и скрипт управления.</p>
<pre>
&lt;link href="/editor/bootstrap/bootstrap.editor.atmpl.css" rel="stylesheet" /&gt;
&lt;script src="/editor/bootstrap/bootstrap.editor.atmpl.js"&gt;&lt;/script&gt;
</pre>
<p class="lead">Добавьте файл на сервер своего сайта, для этого выполните действия по порядку.</p>
<ol>
<li><a href="/editor/bootstrap/preview.rar">Скачайте архив</a></li>
<li>Распакуйте архив</li>
<li>Создайте на сервере папку <strong>editor</strong></li>
<li>Создайте в папке <strong>editor</strong> папку <strong>bootstrap</strong></li>
<li>Загрузите в папку <strong>bootstrap</strong> распакованный файл</li>
<li>Убедитесь что открывается страница <strong>http://ваш сайт/editor/bootstrap/preview.html</strong></li>
</ol>
<p class="lead">Установите поле для добавления HTML кода, там где хотите его видеть.</p>
<blockquote>
HTML код, помещаемый в рабочее пространство поля, предварительно нужно конвертировать.
</blockquote>
<br>
<pre>
&lt;textarea class="form-control" id="editorAtmpl" cols="60" rows="15"&gt;
&lt;!- Здесь конвертированный код -&gt;
&lt;/textarea&gt;
</pre>
<p class="lead">Добавьте в тело документа, перед закрывающим тегом &lt;/body&gt; скрипт загрузки редактора.</p>
<pre>
&lt;script&gt;
$(function() {
$('#editorAtmpl').editorAtmpl(mySettings);
$('.add').click(function() {
$('#editorAtmpl').editorAtmpl('insert',
{ 
openWith:'&lt;opening tag&gt;'
});
return false;
});
});
&lt;/script&gt;
</pre>