Results 1 to 8 of 8

Thread: Styled HtmlEditor

  1. #1
    Sencha Premium Member bpjohnson's Avatar
    Join Date
    Jun 2007
    Location
    Atlanta, GA
    Posts
    50

    Default Styled HtmlEditor

    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:
    PHP Code:
    Ext.namespace('Ext.ux.StyledHtmlEditor');

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

    Ext.extend(Ext.ux.StyledHtmlEditorExt.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:

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

  2. #2
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,675

    Default

    very good !

    many thx.

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Posts
    464

    Default

    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.

  4. #4

    Default

    Hi all,

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

    HTML Code:
    <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 ?
    French guy.
    Blog: www.defaite.fr
    Pro website: www.xavierboubert.fr

  5. #5

    Default

    Hi!
    Does you code
    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:
    Code:
    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?

  6. #6
    Sencha Premium Member bpjohnson's Avatar
    Join Date
    Jun 2007
    Location
    Atlanta, GA
    Posts
    50

    Default

    Quote Originally Posted by ola-la View Post
    Hi!
    Does you code
    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.

    Quote Originally Posted by ola-la View Post
    by the way... I am changing style in this way:
    Code:
    snip
    and again: in FF works, IE - nothing
    any ideas?
    No idea. Sorry.

  7. #7

    Default

    for IE I've wrote simply in that way:

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

  8. #8
    Ext User
    Join Date
    Jan 2008
    Location
    Warsaw
    Posts
    3

    Default

    This is good stuff!
    I took the liberty of modifying it a bit, to automatically use all the stylesheets of the parent document:
    Code:
    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •