Bredacture - самый лучший визуальный html редактор на javascript build 4 (editor) & build 21 (lite)
Версии
Существуют две версии редактора:Bredacture (7.96Кб .gz.js) - обычная версия, которая подходит для редактирование топиков на своем сайте;
Bredacture Lite (4.79Кб .gz.js) - урезанная версия, предназначенная для написания комментариев.
Bredacture
Как пользоваться
1. подключаем стили для редактора
<link rel='stylesheet' type='text/css' href='/Bredacture/editor.css'>
<link rel='stylesheet' type='text/css' href='/Bredacture/tapes.css'>
2. подключаем сам редактор
<script type="text/javascript" src="/Bredacture/editor_4_mini_.js"></script>
3. чтобы запустить редактор
<script>
Bredacture_('1','содержимое') // <div id="div_editor_1" style="height:200px; width:500px;" > </div>
</script>
Настройка
Редактор поддерживает следующие панели:- h2
- жирный текст
- курсивый текст
- зачеркнутый текст
- вставка изображении
- вставка видео (однако через объект-заглушку)
- вставка ссылки
- вставка ссылки-2
- удаление ссылки
- специальный тег для ката
- поддерживает тег для цитат
- нумерованный список
- ненумерованный список
Функция Bredacture_(id,value, components, visual) имеет 4 аргумента: id - (str) ид div элемента "div_editor_*"; value - (str) содержимое редактора; components - (array) какие панели будут работать в редакторе; visual - (str) or (bool) вкл/выкл автоопределения поддерживает ли браузер визуальный режим;
Польный список второго аргумента components
<script>
Bredacture('test', 'содержимое', // div id=div_editor_test
{
h2:true, //false по умолчанию; тег <h2>
b:true, //true по умолчанию; жирный
i:true, //true по умолчанию; курсив
s:true, //true по умолчанию; зачеркнутый
ul:true, //false по умолчаниюe; ненумерованный список
ol:true, //false по умолчанию; нумерованный список
blockquote:true, //false по умолчанию; цитата
createlink:true, //true по умолчанию; ссылка
link:true, //true по умолчанию; ссылка-2
unlink:true, //true по умолчанию; удалить ссылку
image:true, //false по умолчанию; вставить картинку
video:true, //false по умолчанию; вставить видео
cut:true, //false по умолчанию; кат
}, 'auto' //принимет либо (str) auto, либо ничего - (bool) false
);
</script>
Загрузка изображения
Чтобы работало, надо настроить файл upload_image_Bredacture.php
Решение проблем
Редактор не поддерживает инициализацию на тегах textarea и input. Инициализируется только на теге divЧтобы отправить содержимое редактора через форму, надо воспользоваться следующй схемой
<!-- форма -->
<form onsubmit="return subSave();" method="post">
<div id="div_editor_1" style="height: 500px;width:100%"></div> <!-- тут редактор -->
<button type=submit>Отправить</button> <!-- кнопка для отправки -->
</form>
<script>
function subSave(){
//получаем содержимое редактора
//и сохраняем в невидемом (этот инпут создаеться автоматически)
e_['1'].fix_value();
return true;
}
</script>
и остается получать данные из переменной $_POST['content']
или
<script>
function subSave(){
//получаем содержимое редактора
//и сохраняем в невидемом (этот инпут создаеться автоматически)
e_['1'].fix_value();
//или просто делайте всё, что хотите с содержимом
var Text = e_['1'].value_get();
alert(Text);
return true;
}
</script>
Bredacture Lite
Как пользоваться (Lite)
1. подключаем стиль для редактора
<link rel='stylesheet' type='text/css' href='/Bredacture/tr-editor.css'>
2. подключаем сам редактор
<script type="text/javascript" src="/Bredacture/editor-lite_21_mini_.js"></script>
3. чтобы запустить редактор
<script>
Bredacture__lite('2','содержимое'); // <div id="lite_2" style="height:200px; width:500px;" > </div>
</script>
Настройка (Lite)
Редактор поддерживает следующие панели:- жирный текст
- курсивый текст
- зачеркнутый текст
- вставка ссылки-2
- удаление ссылки
- поддерживает тег для цитат
- нумерованный список
- ненумерованный список
Функция Bredacture(id, value, components, visual) имеет 3 аргумента: id - (str) ид div элемента "lite_*"; value - (str) содержимое; components - (array) какие панели будут работать в редакторе; visual - (str) or (bool) вкл/выкл автоопределения поддерживает ли браузер визуальный режим;
Польный список второго аргумента components
<script>
Bredacture__lite('test2', 'текст в редакторе', // div id=lite_test2
{
b:true, //true по умолчанию; жирный
i:true, //true по умолчанию; курсив
s:true, //true по умолчанию; зачеркнутый
ul:true, //false по умолчаниюe; ненумерованный список
ol:true, //false по умолчанию; нумерованный список
blockquote:true, //false по умолчанию; цитата
link:true, //true по умолчанию; ссылка-2
unlink:true, //true по умолчанию; удалить ссылку
}, 'auto' //принимет либо (str) auto, либо ничего - (bool) false
);
</script>
Решение проблем (Lite)
Редактор не поддерживает инициализацию на тегах textarea и input. Инициализируется только на теге divЧтобы отправить содержимое редактора через форму, надо воспользоваться следующй схемой
<!-- форма -->
<form onsubmit="return subSave();" method="post">
<div id="lite_2" style="height: 500px;width:100%"></div> <!-- тут редактор -->
<button type=submit>Отправить</button> <!-- кнопка для отправки -->
</form>
<script>
function subSave(){
//получаем содержимое редактора
//и сохраняем в невидемом (этот инпут создаеться автоматически)
e_lite['2'].fix_value();
return true;
}
</script>
и остается получать данные из переменной $_POST['content']
или
<script>
function subSave(){
//получаем содержимое редактора
//и сохраняем в невидемом (этот инпут создаеться автоматически)
e_lite['2'].fix_value();
//или просто делайте всё, что хотите с содержимом
var Text = e_lite['2'].value_get();
alert(Text);
return true;
}
</script>
Кстати, php код
<?php
function js($str, $isInline=false)
{
if ($isInline)
$str = htmlspecialchars($str);
return preg_replace('/\r?\n/m', '\\n',str_replace('/', '\/', addslashes($str)));
} //function js()
?>
<?php
echo "<script>";
echo "Bredacture('5',' ".js('текст из бд')." '); ";
echo "</scritp>";
?>
Авторы
Сам редактор принадлежит Александру Бобылёву, а подготовил на всеобщее пользование Я при согласии автора.Скачать Демо Демо Lite