PDA

View Full Version : Styled HtmlEditor



bpjohnson
19 Jul 2007, 10:09 AM
I thought it'd be nice if the HtmlEditor showed its contents using my site's stylesheets, so that the user would see things the way they will actually be displayed. It turned out to be much easier than I thought:


Ext.namespace('Ext.ux.StyledHtmlEditor');

Ext.ux.StyledHtmlEditor = function(config){
this.styles = config.styles;
Ext.ux.StyledHtmlEditor.superclass.constructor.call(this, config);
};

Ext.extend(Ext.ux.StyledHtmlEditor, Ext.form.HtmlEditor, {
getDocMarkup : function(){
var markup = '<html><head><style type="text/css">body{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style>';
if(this.styles) {
for (var i=0;i<this.styles.length;i++) {
markup = markup + '<link rel="stylesheet" type="text/css" href="'+this.styles[i]+' />';
}
}
markup = markup + '</head><body></body></html>';
return markup;
}
});Now when you create an HtmlEditor for a form, you can add the 'styles' attribute to the config, which should contain an array of stylesheets to include:


form.add(new Ext.form.HtmlEditor({
id:'myFieldName',
fieldLabel:'Label Me!',
styles: ['/styles/stylesheet1.css', 'http://foo.bar/style1.css'],
width:550,
height:200
}));

steffenk
19 Jul 2007, 1:31 PM
very good !

many thx.

JorisA
20 Jul 2007, 12:07 PM
I think this would be a good addition to the official html editor, 3 lines of extra code add a general used feature.
Maybe also change <body> to <body id="htmleditorbody"> or so so you can use this selector in your stylesheet.

Defaite
8 Sep 2007, 11:00 AM
Hi all,

I use the Styledhtmleditor extension but the markup code change when the iframe is created. The "<body>" balise get these attributes :


<body style="font-size: 12px; font-family: tahoma,arial,helvetica,sans-serif; background-image: url(http://.../text-bg.gif); background-repeat: repeat-x; background-attachment: fixed;">

Can I change or delete these attributes ?

ola-la
15 Apr 2008, 4:51 AM
Hi!
Does you code

getDocMarkup : function(){
var markup = '<html><head><style type="text/css">body{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style>';
if(this.styles) {
for (var i=0;i<this.styles.length;i++) {
markup = markup + '<link rel="stylesheet" type="text/css" href="'+this.styles[i]+' />';
}
}
markup = markup + '</head><body></body></html>';
return markup;
}

works in IE? (IE7)

in FF all is ok...

by the way... I am changing style in this way:


var ss = document.createElement("link");
ss.type = "text/css";
ss.rel = "stylesheet";
ss.href = styleSheetPath;


var head;

if (Ext.isIE)
{
head = editor.iframe.document.getElementsByTagName("head")[0];
}
else
{
head = editor.iframe.contentDocument.getElementsByTagName("head")[0];
}

if (head.childNodes.length <= 1)
{
head.appendChild(ss);
}
else
{
head.replaceChild(ss, head.childNodes[head.childNodes.length - 1]);
}


and again: in FF works, IE - nothing :-?

any ideas? :-/

bpjohnson
15 Apr 2008, 12:48 PM
Hi!
Does you code

getDocMarkup : function(){
var markup = '<html><head><style type="text/css">body{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style>';
if(this.styles) {
for (var i=0;i<this.styles.length;i++) {
markup = markup + '<link rel="stylesheet" type="text/css" href="'+this.styles[i]+' />';
}
}
markup = markup + '</head><body></body></html>';
return markup;
}works in IE? (IE7)

in FF all is ok...


IE7 did work for me last time I checked, but I haven't used this code in a while. I also haven't tried this with the 2.0 code, but it should be okay there, too.



by the way... I am changing style in this way:

snip
and again: in FF works, IE - nothing :-?
any ideas? :-/

No idea. Sorry.

ola-la
16 Apr 2008, 10:36 PM
for IE I've wrote simply in that way:



if (Ext.isIE)
{
var contentDocument = editor.iframe.contentWindow.document;
head = contentDocument.getElementsByTagName("head")[0];
head.getElementsByTagName("link")[0].href = styleSheetPath;
}


and it finally works I-|

its
14 May 2008, 6:08 PM
This is good stuff!
I took the liberty of modifying it a bit, to automatically use all the stylesheets of the parent document:


Ext.namespace('Ext.ux.StyledHtmlEditor');

Ext.ux.StyledHtmlEditor = function(config){
Ext.ux.StyledHtmlEditor.superclass.constructor.call(this, config);
};


Ext.extend(Ext.ux.StyledHtmlEditor, Ext.form.HtmlEditor, {
getDocMarkup : function(){
var markup = '<html><head><style type="text/css">body{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style>';
for (var i=0;i<document.styleSheets.length;i++) {
markup = markup + '<link rel="stylesheet" type="text/css" href="'+(document.styleSheets[i].href)+'" />';
}
markup = markup + '</head><body></body></html>';
return markup;
}
});



This way, there's no need for the "styles" config param.