Мне понадобилось добавить кнопку «Цитата» в NicEdit, по этому обновил редактор, а за одно раcскажу как я это делал.
И так, пусть кнопка называется ’blockquote’. Сначала нам нужен значок 18х18 px.
Теперь пишем код плагина:
var nicBlockquoteOptions = {
buttons : {
'blockquote' : {name : __('Додати цитату'), type : 'nicEditorBlockquoteButton', tags: ['BLOCKQUOTE']}
},iconFiles : {'blockquote' : '../nicedit_blockquote.gif'}
};
var nicEditorBlockquoteButton = nicEditorButton.extend({
mouseClick : function() {
this.ne.selectedInstance.setContent(this.ne.selectedInstance.elm.innerHTML + "<blockquote><br></blockquote><br><br>");
}
});
nicEditors.registerPlugin(nicPlugin,nicBlockquoteOptions);
Как видите мы сначала создаем кнопку. Потом добавляем действие по её нажатию и в конце регистрируем плагин. Тут функция this.ne.selectedInstance.setContent() присваивает новое значение редактируемой области, а this.ne.selectedInstance.elm.innerHTML возвращает значение до нажатия на кнопку. Не смотря на то. что для последнего действия есть getContent() — оно не работает для пустой редактируемой области.
Теперь немного оптимизации. Во-первых, можно не грузить 2 изображения со значками, а соединить в одно:
А за одно сделаем так, что бы кнопка отображалась, когда мы вызываем все кнопки. Т.е. nicEditors.allTextAreas().
iconsPath : 'nicEditorIcons.gif',
buttonList : ['save','bold','italic','underline','left','center','right','justify','ol','ul','fontSize','fontFamily','fontFormat','indent','outdent','image','upload','link','unlink','forecolor','bgcolor','blockquote'],
iconList : {"xhtml":1,"bgcolor":2,"forecolor":3,"bold":4,"center":5,"hr":6,"indent":7,"italic":8,"justify":9,"left":10,"ol":11,"outdent":12,"removeformat":13,"right":14,"save":25,"strikethrough":16,"subscript":17,"superscript":18,"ul":19,"underline":20,"image":21,"link":22,"unlink":23,"close":24,"arrow":26,"upload":27,"blockquote":28}
И уберем загрузку одной иконки «Цитата».
var nicBlockquoteOptions = {
buttons : {
'blockquote' : {name : __('Добавить цитату'), type : 'nicEditorBlockquoteButton', tags: ['BLOCKQUOTE']}
}
};
var nicEditorBlockquoteButton = nicEditorButton.extend({
mouseClick : function() {
this.ne.selectedInstance.setContent(this.ne.selectedInstance.elm.innerHTML + "<blockquote><br></blockquote><br><br>");
}
});
nicEditors.registerPlugin(nicPlugin,nicBlockquoteOptions);
Результат как обычно тут. Есть вопросы? тогда оставляйте комментарии, или пишите.
