EMacho.ru

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

eMacho.ru
на Trashbox.ru