Custom Editor Stylesheet for YUI RTE
Custom Editor Stylesheet for YUI RTE
Ben Kittrell
-
06/07/2010 12:11:00
Comments: 0
One of the first things I wanted to get working with YUI's Rich Text Editor was to make the editor area styled appropriately. There is an example out there that basically waits for the editor to finish loading and then dynamically adds a link tag to the head of the iframe. It works, but there's a moment where you can see the un-styled content then it switches. Then I found that you can set the initial HTML that's loaded into the iframe, so I figured why not just load it there?
var html = "<html>\n<head>\n<title>{TITLE}</title>\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\n" +
"<base href=\"http://" + document.domain + "/\">\n" +
"<style>\n{CSS}\n</style>\n" +
"<style>\n{HIDDEN_CSS}\n</style>\n" +
"<style>\n {EXTRA_CSS}\n</style>\n" +
"<link rel=\"stylesheet\" type=\"text/css\" href=\"/assets/editor_css\">\n" +
"</head>\n" +
"<body onload=\"document.body._rteLoaded = true;\">\n{CONTENT}\n</body>\n</html>\n";
editor = new YAHOO.widget.Editor(container, {
animate: true,
collapse: false,
markup: 'xhtml',
css: '',
html: html,
toolbar: {
buttons: button_config
}
});
Working great so far.
Comments: 0
Co-Founder of 
Post a Comment