?

Log in

No account? Create an account

Previous Entry | Next Entry

Yahoo's new HTML Editor...

Pretty spiff. Spent about four six hours adding a "raw html" mode to it. Wish I could turn on syntax highlighting in this thing, but first the code, and then discussion:


var fancy_editor = new YAHOO.widget.Editor(el.id, {
animate: true,
toolbar: {
buttons: [
{group: 'stuff2', label: 'TEXT', buttons: [ ]},
{ type: 'separator' },
{group: 'stuff', label: 'Simple HTML Menu:', buttons: [
{ type: 'push', label: 'Bold CTRL + SHIFT + B', value: 'bold' },
{ type: 'push', label: 'Italic CTRL + SHIFT + I', value: 'italic' },
{ type: 'push', label: 'Underline CTRL + SHIFT + U', value: 'underline' },
{ type: 'separator' },
{ type: 'push', label: 'Subscript', value: 'subscript', disabled: true },
{ type: 'push', label: 'Superscript', value: 'superscript', disabled: true },
{ type: 'separator' },
{ type: 'push', label: 'Create an Unordered List', value: 'insertunorderedlist' },
{ type: 'push', label: 'Create an Ordered List', value: 'insertorderedlist' },
{ type: 'separator' },
{ type: 'push', label: 'HTML Link CTRL + SHIFT + L', value: 'createlink', disabled: true },
{ type: 'push', label: 'Remove Formatting', value: 'removeformat', disabled: true },
]},

]
}
});

//Use the toolbarLoaded Custom Event; when that event fires,
//we will execute a function that adds or custom button:
fancy_editor.on('toolbarLoaded', function() {
//Simple button config
var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event;
var button = {
type: 'push',
label: 'HTML',
value: 'togglehtml',
disabled: false
};

var state='on';
var htmlgroup = Dom.getElementsByClassName("yui-toolbar-group-stuff","div",this.toolbar);
var htmllabel = Dom.getElementsByClassName("yui-toolbar-group-stuff2","div",this.toolbar)[0];
htmllabel = Dom.getFirstChild(htmllabel);

//Add the button to the toolbar; "this"
//refers to fancy_editor, our RTE instance:
this.toolbar.addButtonToGroup(button,"stuff2");

//Now listen for the new buttons click and do something with it.
//Note that "togglehtml" is an event synthesized for us
//automatically because that's the value we gave our button
//above:
var toggleFunction = function(o) {
if (state == 'on') {
state = 'off';
Dom.setStyle(htmlgroup,'display','none');
htmllabel.innerHTML='HTML';
this.saveHTML();
this.setEditorHTML(this.get('textarea').value.replace(/<br>/gi, '\n').replace(/\&/gi,"&amp;").replace(/</gi,"&lt;").replace(/>/gi,"&gt;").replace(/\n/gi,"<br>"));
} else {
state = 'on';
Dom.setStyle(htmlgroup,'display','block');
htmllabel.innerHTML='TEXT';
this.saveHTML();
var stripHTML = /<\S[^><]*>/g;
this.setEditorHTML(this.get('textarea').value.replace(/<br>/gi, '\n').replace(stripHTML,'').replace(/&lt;/gi,"<").replace(/&gt;/gi,">").replace(/\&amp;/gi,"&").replace(/\n/gi,"<br>"));
}
};

this.toolbar.on('togglehtmlClick', toggleFunction, this, true);

var form = document.getElementById(el.id).form;

YAHOO.util.Event.on(form,'submit',function(ev) {
if (state == 'on') {
//all happy
} else if (state == 'off') {
//need to fire a togglehtmlClick event to the toolbar
toggleFunction("HAPPY");
} else {
alert("ERROR: UNKNOWN STATE for editor '"+el.id+"': '"+state+"'");
}
fancy_editor.saveHTML(); // Save the HTML -- BAD if state is on! EEP!
Dom.get('message').submit();
});

}, fancy_editor, true);

fancy_editor.render();



This was taken heavily from two examples they gave (though not as heavily as I would have liked ;) ):

  • http://developer.yahoo.com/yui/examples/editor/switch_editor.html

  • http://developer.yahoo.com/yui/editor/



I've set up two groups of buttons, stuff and stuff2, so that I can hide one of the groups... the first group (stuff2) I dynamically add my "toggle HTML" button to. In the second group, stuff, I put some basic and relatively sane html controls.

I hide those controls when showing the "raw" markup so that confused users don't mark up the "raw" markup ((though the code can handle that, too, just to be safe))

I automatically link the onsubmit events for the form the textareas happen to be in, and they clean themselves up (according to state) so that the data doesn't get submitted in the pseudo-raw form. :)

If you're curious, I'm doing all of this in behaviour just based on a class "fancy" being set on a textarea.  That is happiness, I tell you!

Tags:

Comments

( 6 comments — Leave a comment )
(Deleted comment)
kaolinfire
Aug. 4th, 2007 10:37 am (UTC)
bah, humbug! :)

yeh, okay.
zotsf
Aug. 5th, 2007 05:15 am (UTC)
Pretty damn nifty.

Question though. What is the benefit of js based gui from a package like fckediter? I'm not dissing what you did here. It's pretty fucking cool, I'm just curious ;)

...or have I got it all wrong and fckeditor is really just the same thing?

:)
kaolinfire
Aug. 5th, 2007 07:08 am (UTC)
fckeditor is the same thing. :)
zotsf
Aug. 5th, 2007 04:19 pm (UTC)
hehehehe
kaolinfire
Aug. 5th, 2007 09:36 pm (UTC)
I just really, really want a solid alternative to fck... something cleaner, faster, more easily configurable, ...

What I did [whoah. besides spacing my reply to this post...] is probably not quite enough to make it happy as a fckeditor replacement, but maybe it's a start.
zotsf
Aug. 6th, 2007 05:33 am (UTC)
fck is quite bloated. Development for the masses causes lots of feature creep.

I'm sure what you are doing is more than a good start ;)
( 6 comments — Leave a comment )

Latest Month

February 2016
S M T W T F S
 123456
78910111213
14151617181920
21222324252627
2829     

Tags

Powered by LiveJournal.com
Designed by chasethestars