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 Скрипт написан не мною, поэтому ни чего сказать пока не могу. Я попробую вам помочь в ближайшее время, а пока попробуйте посмотреть по ссылке выше, там автор скрипта отвечает вопросы и решает некоторые проблемы. Возможно, у кого-то была подобная проблема.
Подскажите пожалуйста как добавить свою кнопку в данный редактор ?
Чтобы добавить свою кнопку надо редактировать скрипт, а поскольку скрипт написан не мною, то я не могу вам в этом помочь. Могу только сказать, что это будет не легко, ведь надо будет как минимум определить кнопку и описать её действие.
это не проблема, дело в том, что скрипт как я понял работает с командой xecCommand. Эта команда позволяет каждому браузеру по валидности прописывать свой код. Например в опере и в фаерфоксе. Команда достаточно интересная, ее атрибуты можно посмотреть http://javascript.itsoft.ru/execcom/execCommands.html …
вопрос к примеру как в после iframe и textarea всунуть результат функции. И вообще как ее вызвать? К примеру моя функция будет создавать какой то блок с текстом.
function test() // ее как то нужно вызвать онкликом
{
var text = confirm(‘Введите ваш текст’);
var a= ”+text+”;
и тут как то результат а закинуть в поле редактора
}
Еще с этим серьезно не игрался, но когда руки дойдут сяду =0