1. #1
    Sencha User
    Join Date
    Sep 2012
    Location
    Novosibirsk, Russia
    Posts
    2
    Vote Rating
    0
    migesok is on a distinguished road

      0  

    Default 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


    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 )

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

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    What you are seeing is an iframe unless you click to be in source edit
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Sep 2012
    Location
    Novosibirsk, Russia
    Posts
    2
    Vote Rating
    0
    migesok is on a distinguished road

      0  

    Default


    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);
        }

  5. #4
    Sencha User
    Join Date
    Mar 2013
    Posts
    1
    Vote Rating
    0
    rajKapoor is on a distinguished road

      0  

    Default This is a good tip but..

    This is a good tip but..


    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 Participants: 2

Tags for this Thread