Wednesday, September 12, 2007

Yahoo! UI Library: Rich Text Editor

YUI Editor is a powerful editor. I've try it on some projects, The conclusion is it's definitely good enough to customize and control to display and use on my projects. This is my favorite menu:

toolbar: {
titlebar: 'Editor', collapse:true,
buttons: [
{ group: 'textstyle',
buttons: [
{ type: 'push', label: 'Bold', value: 'bold' },
{ type: 'push', label: 'Italic', value: 'italic' },
{ type: 'push', label: 'Underline', value: 'underline' },
{ type: 'color', label: 'Font Color', value: 'forecolor', disabled: true },
{ type: 'color', label: 'Background Color', value: 'backcolor', disabled: true },
{ type: "push", label: 'Align Left', value: 'justifyleft' },
{ type: "push", label: 'Align Center', value: 'justifycenter' },
{ type: "push", label: 'Align Right', value: 'justifyright' },
{ type: 'push', label: 'Justify', value: 'justifyfull' },
{ type: 'push', label: 'Remove Formatting', value: 'removeformat', disabled: true },
{ type: 'push', label: 'Indent', value: 'indent', disabled: true },
{ type: 'push', label: 'Outdent', value: 'outdent', disabled: true },
{ type: 'push', label: 'Create an Unordered List', value: 'insertunorderedlist' },
{ type: 'push', label: 'Create an Ordered List', value: 'insertorderedlist' },
{ type: 'push', label: 'HTML Link CTRL + SHIFT + L', value: 'createlink', disabled: true },
{ type: 'push', label: 'Insert Image', value: 'insertimage' },


And I found a little problem when use this HTML editor: the sign of collapse menu is always minus when click to collapse the menu. This is my solution:

add two setStyle to change the CSS background style of collapse in editor-beta-min.js on 24 line:

//alert(Dom.getStyle(collapse,'background'));
if(Dom.getStyle(this.get('cont'),'display')=='none'){
Dom.setStyle(collapse,'background','url(/editor/assets/skins/sam/sprite.png) no-repeat 0 -400px;');
Dom.setStyle(this.get('cont'),'display','block');
Dom.removeClass(collapse,'collapsed');
this.fireEvent('toolbarExpanded',{type:'toolbarExpanded',target:this});
}else{
Dom.setStyle(collapse,'background','url(/editor/assets/skins/sam/sprite.png) no-repeat 0 -350px;');
Dom.setStyle(this.get('cont'),'display','none');
Dom.addClass(collapse,'collapsed');
this.fireEvent('toolbarCollapsed',{type:'toolbarCollapsed',target:this});}},this,true);
}

No comments: