HtmlEditor's word wrap when the word is longer than the line

**migesok** · 28 Nov 2012, 11:36 PM

Hi!
I'm using Ext.form.field.HtmlEditor as my handmade wiki's page editor. It works great except line wrap:
htmleditor.png

So I wonder if there is any way to make the editor break words as they get longer than the line size?
I looked through the source code of the component but don't get how that funky magic with hidden text area and iframe works. So I don't know how to intervene.
Configuration

Code:

style: {
    'word-wrap': 'break-word'
}

doesn't work either (fat chance

)

mitchellsimoens

What you are seeing is an iframe unless you click to be in source edit

**mitchellsimoens** · 30 Nov 2012, 2:22 PM

What you are seeing is an iframe unless you click to be in source edit

**migesok** · 2 Dec 2012, 10:59 PM

Thanks a lot! Now it makes sense.
I end up with this solution: override HtmlEditor's method getDocMarkup like this:

Code:

getDocMarkup: function() {
        var me = this,
            h = me.iframeEl.getHeight() - me.iframePad * 2,
            oldIE = (Ext.isIE6 || Ext.isIE7 || Ext.isIE8);
        
        return Ext.String.format(
            (oldIE?'':'<!DOCTYPE html>')
                + '<html><head><style type="text/css">'
                + (Ext.isOpera?'p{margin:0}':'')
                + 'body{border:0;margin:0;padding:{0}px;'
                + 'word-wrap: break-word;' // my line
                + (oldIE?'':'min-')
                + 'height:{1}px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:text;background-color:white;'
                + (Ext.isIE?'':'font-size:12px;font-family:{2}')
                + '}</style></head><body></body></html>'
            , me.iframePad, h, me.defaultFont);
    }

**rajKapoor** · 3 Mar 2013, 4:37 PM

I got the same thing done with hack code but I do not want the word to break, instead it should move to next line just like what this editor is doing, is that possible?

Thread: HtmlEditor's word wrap when the word is longer than the line

Thread Tools

Search Thread

Display

Answered: HtmlEditor's word wrap when the word is longer than the line

This is a good tip but..

Tags for this Thread

Posting Permissions