Javascript. jwysiwyg. WYSIWYG редактор для Jquery

Новый WYSIWYG редактор для Jquery выполнен вкачестве плагина. Это альтернатива WYMeditor с гораздо меньшими возможностями. Основным достоинством является ебольшой размер файла менее 26Кб. Концепция редактора заключается в том, чтобы сохранить его простым. Есть возможность настраивать панель инструментов.


Для начала скачайте

Ниже приведен код, который цепляет WYSIWYG редактор на textarea. Для этого нам необходимо подключить библиотеку jquery, желательно последней версии, непосредственно, плагин и его таблицу стилей. При инициализации редактора можно настроить панель инструментов. Чтобы вызвать jwysiwyg с минимальными функциями, достаточно написать $("#textareaMin").wysiwyg();

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.wysiwyg.js"></script>
<link rel="stylesheet" href="jquery.wysiwyg.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function(){
$("#textareaMin").wysiwyg();
$("#textareaFull").css("width", "700px").wysiwyg({
controls : {
bold : { visible : true, tags : ["b", "strong"], css : { fontWeight : "bold" } },
italic : { visible : true, tags : ["i", "em"], css : { fontStyle : "italic" } },
strikeThrough : { visible : true },
underline : { visible : true },
separator00 : { visible : true },
justifyLeft : { visible : true },
justifyCenter : { visible : true },
justifyRight : { visible : true},
justifyFull : { visible : true },
separator01 : { visible : true},
indent : { visible : true },
outdent : { visible : true },
separator02 : { visible : true },
subscript : { visible : true },
superscript : { visible : true},
separator03 : { visible : true },
undo : { visible : true },
redo : { visible : true },
separator04 : { visible : true },
insertOrderedList : { visible : true },
insertUnorderedList : { visible : true },
insertHorizontalRule : { visible : true },
separator06 : { separator : true },
separator07 : { visible : true},
cut : { visible : false },
copy : { visible : false},
paste : { visible : false },
html : {visible : true}
}
});
});
</script>
<h1>Минимальный</h1>
<textarea cols="50" id="textareaMin"></textarea><h1>Максимальный</h1>
<textarea cols="50" id="textareaFull"></textarea>

 

Tweet

Интересное

Работаю на контрасте

Комментарии

  • Николай
    05.08.2010 в 23:07
    отличный плагин. Вопрос только в том, как передать данные в textarea?
    $('#wysiwyg').(что здесь должно быть?)setContent ('текст');
    я выложил на тойже странице данные из базы и по кнопке хочу передать одну из записей в wysiwyg… пожалуйста подскажите:)
    ответить
  • Александр
    06.08.2010 в 23:00

    Данные в textarea передаются обычным способом. точно так же, как если бы и не было никакого плагина. Поместите текст между открывающим и закрывающим тегами textarea

    ответить

Чтобы оставлять комментарии, авторизируйтесь

Войти через OpenID

Популярные
Полезные ссылки
Наверх