JavaScript и jQuery

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

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

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

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

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

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

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

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

  • ну тогда присвойте ей name, который совпадал бы с id

  • Сергей

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

    • Скрипт не мой, но я завтра же посмотрю и отвечу вам как решить вашу проблему.

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

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


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

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

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

  • nepster

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

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

  • nepster

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

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

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

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

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

  • nepster

    оп, тут комментарий поддерживает html )