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

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

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

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

    1. Не совсем так. Необходимо подключить СиЭсЭс файл, а также скрипты, которые идут вместе с плагином, чтобы скрипт заработал.
      В вордпресс подключить его будет трудно т.к. не просто текстовое поле.

      Тут лучше посмотреть скрипты самого вордпресса, права на файлы и т.д. У меня на одном из блогов тоже была подобная проблема. Решил её полной заменой скрипта вордпресс.

    1. А вы форму добавляли? Просто если вы использовали скрипт из архива, то там текстовое поле находить не в форме т.е. форма вообще отсутствует, поэтому данные могут не отправляться.

      И кроме того, в примере, который есть в архиве, текстовая область назвыается «input», поэтому смотрите $_POST[‘input’]

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

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

  4. Сергей. Я проверил скрипт — всё работает, но только при наборе текста в режиме исходного кода. Сейчас посмотрю ява скрипт — в визуальном режиме передаёт пустую переменную. Странно.

  5. Я решил проблему. Пришлось присвоить форме name, такой же как и id. Добавить кнопку отправки формы, а также саму форму —


    Кроме того.
    И строку new TINY.editor.edit(‘editor’,{ заменить на var inst = new TINY.editor.edit(‘editor’,{

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

    1. Sergey Скрипт написан не мною, поэтому ни чего сказать пока не могу. Я попробую вам помочь в ближайшее время, а пока попробуйте посмотреть по ссылке выше, там автор скрипта отвечает вопросы и решает некоторые проблемы. Возможно, у кого-то была подобная проблема.

    1. Чтобы добавить свою кнопку надо редактировать скрипт, а поскольку скрипт написан не мною, то я не могу вам в этом помочь. Могу только сказать, что это будет не легко, ведь надо будет как минимум определить кнопку и описать её действие.

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

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

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

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *