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
doesn't work either (fat chanceCode:style: { 'word-wrap': 'break-word' })
What you are seeing is an iframe unless you click to be in source edit
What you are seeing is an iframe unless you click to be in source edit
Mitchell Simoens @LikelyMitch
Modus Create, Senior Frontend Engineer
________________
Need any sort of Ext JS help? Modus Create is here to help!
Check out my GitHub:
https://github.com/mitchellsimoens
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); }
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?
Reply With Quote
