TinyEditor — визуальный редактор на JavaScript

TinyEditor — это простой и очень лёгкий (около 8 кб) визуальный редактор на JavaScript. Он очень легко настраивается и внедряется в любой сайт посредством CSS и множеством других параметров. TinyEditor способен выполнять основные задачи по форматированию текста, но при этом, сохранять форматированный текст как можно более чистым (со стороны html-разметки). Значки форматирования объединены в один графический файл, что сокращает количество http-запросов к серверу до минимума.

Для инициализации скрипта (подготовке к работе) пропишите следующий код:

new TINY.editor.edit('editor',{
	id:'input', // (обязательно) ID текстового поля
	width:584, // (не обязательно) ширина редактора
	height:175, // (не обязательно) высота редактора
	cssclass:'te', // (не обязательно) CSS класс редактора
	controlclass:'tecontrol', // (не обязательно) CSS класс для иконок
	rowclass:'teheader', // (не обязательно) CSS класс для рядов иконок
	dividerclass:'tedivider', // (не обязательно) CSS класс для разделителей иконок
	controls:['bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|', 'orderedlist', 'unorderedlist', '|' ,'outdent' ,'indent', '|', 'leftalign', 'centeralign', 'rightalign', 'blockjustify', '|', 'unformat', '|', 'undo', 'redo', 'n', 'font', 'size', 'style', '|', 'image', 'hr', 'link', 'unlink', '|', 'cut', 'copy', 'paste', 'print'], // (обязательно) Опции форматирования на выбор (здесь вы можете убрать не нужные вам элементы форматирования). Символ '|' является разделителем, а 'n' переносом строки
	footer:true, // (не обязательно) показывать ли нижнюю часть редактора?
	fonts:['Verdana','Arial','Georgia','Trebuchet MS'],  // (не обязательно) Доступные шрифты для форматирования
	xhtml:true, // (не обязательно) Форматирование происходит используя XHTML или HTML?
	cssfile:'style.css', // (не обязательно) attach an external CSS file to the editor
	content:'starting content', // (не обязательно) set the starting content else it will default to the textarea content
	css:'body{background-color:#ccc}', // (не обязательно) Применить стиль к редактору
	bodyid:'editor', // (не обязательно) Применить ID к "телу" редактора
	footerclass:'tefooter', // (не обязательно) CSS класс нижней части редактора
	toggle:{text:'source',activetext:'wysiwyg',cssclass:'toggle'}, // (не обязательно) Переключение вариантов просмотра
	resize:{cssclass:'resize'} // (не обязательно) Отображать настройки изменения размера редактора
});

Этот сценарий был испытан во всех браузерах и является бесплатным для личных и коммерческих проектов в рамках лицензии Creative Commonds license.

Демо версия: http://sandbox.leigeber.com/tinyeditor/
Скачать скрипт можно по ссылке — http://forum.leigeber.com/index.php?app=downloads&showfile=10

16 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
11 лет назад

Илья, у меня на одном из блогов не работает нормально визуальный редактор. Все бы ничего, но у меня как раз там есть приглашенные авторы, которым лучше иметь простой наглядный способ редактирования. Если я хочу поставить этот редактор в WordPress, то, как я поняла, предложенный код надо вставить в файл CSS, а файл скрипта загрузить на сервер. В какую папку? С плагинами?

11 лет назад

У меня через этот редактор не работает форма.
После post запроса переменная $_POST[‘text’] пуста

11 лет назад

в архиве текстовая область никак не называется.. ей присвоен id — input, а определяют область по имени, допустим name=text

Сергей
11 лет назад

Илья, вы сами писали этот редактор? Если да то объясните как передать текст пхп скрипту??? Редактируемы текст передается только после того когд нажмешь на просмотр исходного кода! А так он не передается…

10 лет назад

to Илья
можете как решить проблему с добавлением картинок??? данный скрипт не закачивает картинку, а просто прописывает ссылку на нее, что считаю некоректным. можете подсказать как переписать скрипт, что бы он закачивал файл изображения на сервер??? заранее благодарен за ответ

nepster
10 лет назад

Подскажите пожалуйста как добавить свою кнопку в данный редактор ?

nepster
10 лет назад

это не проблема, дело в том, что скрипт как я понял работает с командой xecCommand. Эта команда позволяет каждому браузеру по валидности прописывать свой код. Например в опере и в фаерфоксе. Команда достаточно интересная, ее атрибуты можно посмотреть http://javascript.itsoft.ru/execcom/execCommands.html

вопрос к примеру как в после iframe и textarea всунуть результат функции. И вообще как ее вызвать? К примеру моя функция будет создавать какой то блок с текстом.

function test() // ее как то нужно вызвать онкликом
{
var text = confirm(‘Введите ваш текст’);
var a= »+text+»;

и тут как то результат а закинуть в поле редактора
}

Еще с этим серьезно не игрался, но когда руки дойдут сяду =0