Фильтр → Все записи с тегом wysiwyg

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

12.12.2009

Новый 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>

Категория: программирование , javascript ,
Теги: jquery , javascript , wysiwyg ,
Просмотров: 1016
Комментарии: 2

TinyMCE. Плагин подсветки синтаксиса syntaxhighlighter.

07.12.2009

Для подсветки синтаксиса будем использовать JS библиотеку syntaxhighlighter.
При подключении всех файлов библиотеки, чтобы засветить необходимый код необходимо заключить его в тег <pre>

Например

<pre name="code" class="php">
... some code here ...
</pre>

Чтобы не писать постоянно это обрамление во время редактирование поста или страницы, написан плагин для wysiwyg TinyMCE, который будет делать это за нас.
Качаем плагин и размещаем его в папке tiny_mce/plugins/
Для подключения плагина добавляем изменения в код инициализации редактора

plugins : "......,syntaxhl,......
theme_advanced_buttons1 : ".....,syntaxhl,....

Необходимо заточить плагин под наши нужды. Для этого открываем файл tiny_mce/plugins/syntaxhl/js/dialog.js, ищем строчки:

textarea_output = '<pre class="' + options + ';' + f.syntaxhl_language.value += ';
textarea_output brush:">';
textarea_output += tinyMCEPopup.editor.dom.encode(f.syntaxhl_code.value);
textarea_output += '</pre> '; /* note space at the end, had a bug it was inserting twice? */
tinyMCEPopup.editor.execCommand('mceInsertContent', false, textarea_output);
tinyMCEPopup.close();

и заменяем их на:

f.syntaxhl_code.value = f.syntaxhl_code.value.replace(/</g,'<');  
f.syntaxhl_code.value = f.syntaxhl_code.value.replace(/>/g,'>');  
textarea_output = '<pre name="code" ';  
textarea_output += 'class="' + f.syntaxhl_language.value + '" cols="50" rows="15">';  
textarea_output +=  f.syntaxhl_code.value;  
textarea_output += '</pre> '; /* note space at the end, had a bug it was inserting twice? */  
tinyMCEPopup.editor.execCommand('mceInsertContent', false, textarea_output);  
tinyMCEPopup.close();

Если вы все сделали правильно, то в панели редактора должна появится оранжевая иконка.
При нажатии на нее выскочит диалоговое окно, в которое необходимо ввсести код, который необходимо подсветить.

 
Необходимо учесть, в самом TinyMCE код не светится. Чтобы убедится в работоспособности, достаточно посмотреть исходный HTML код.
Если то, что вы вставили содержится в теге <pre name="code" class="php">.....</pre>, значит все работает.
Теперь необходимо настроить подсветку синтаксиса во фронтенде, следуя инстукциям syntaxhighlighter.

Категория: javascript , программирование ,
Теги: html , javascript , wysiwyg ,
Просмотров: 1629
Комментарии: 3

Популярные

10 причин, чтобы отказаться от алкоголя и одна – чтобы употреблять алкоголь

Комментариев: 53 | просмотров: 8256
01.09.2009

О вреде микроволновой печи

Комментариев: 9 | просмотров: 3538
13.12.2009

Весело, весело встретим Новый GOD

Комментариев: 9 | просмотров: 2007
17.12.2009

Масонская символика на долларе

Комментариев: 4 | просмотров: 3949
03.03.2009

PHP. strtolower(strtoupper) и UTF-8

Комментариев: 4 | просмотров: 1774
14.05.2009

Библия. Книга Судей. Глава 19

Комментариев: 4 | просмотров: 1388
30.08.2009

Дискотека Авария. Заколебал ты

Комментариев: 4 | просмотров: 328
01.08.2010

Категории

Календарь

ПнВтСрЧтПнСбВс
12
3456789
10111213141516
17181920212223
24252627282930
31

Цитаты

и будешь давать взаймы многим народам, а сам не будешь брать взаймы [И БУДЕШЬ ГОСПОДСТВОВАТЬ НАД МНОГИМИ НАРОДАМИ, а они над тобою не будут господствовать]

Библия. Второзаконие