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?

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

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

This is a good tip but..

This is a good tip but..

Tags for this Thread