PDA

View Full Version : HTMLEditor strips dtd, head and body tags



radtchenko
6 Sep 2011, 12:58 AM
Hi,

This appears to be the problem: whenever I insert html code into an HTMLEditor in Source Editing mode, then toggle it to normal and back to the SE mode again, the doctype, html, head and body tags are gone. The same happens if I save the code directly into the database, then fetch it into the editor and view the source. There appears to be no setting, property or even method to disable this behavior in the documentation, neither does Google have an answer.

Is this the proper way for it to behave and if not, does anyone have a solution?

Thanks in advance!

radtchenko
15 Sep 2011, 4:14 AM
As far as I see, this happens in all versions of ExtJS. I take it may be done on purpose, since such editors usually aren't meant for building entire HTML-pages, just pieces of markup code (correct me if I'm wrong in case of the ExtJS HTMLEditor). In my case it is used to build HTML mail templates, so for all mailclients to render the contents properly, I need complete, valid markup to come out.

I've managed to write a workaround for it, but since it's a quite dirty solution for a won't-fix, quite application-specific and I'm working on a cleaner solution, I don't think it's worth sharing.

dogomatic
13 Dec 2011, 5:58 AM
Did your dirty hack look like this? This approach of commenting and uncommenting the !DOCTYPE, html, head and body tags on the way in and out seems to work for me, although I haven't tested it on IE yet.



Ext.define('MyHTMLEditor', {
extend:'Ext.form.HtmlEditor',
alias: 'widget.myhtmleditor',
tagsToComment: ['!DOCTYPE', 'html', 'head', 'body'],
/**
* Pushing value to wysiwyg iframe loses dtd, html, head and body tags.
* Override hack to comment them out when pushing to iframe, and then uncomment
* them on the way back (see this.cleanHtml).
*/
pushValue: function() {
var me = this,
v;
if(me.initialized){
v = me.textareaEl.dom.value || '';
if (!me.activated && v.length < 1) {
v = me.defaultValue;
}
if (me.fireEvent('beforepush', me, v) !== false) {
///////////// change
for (var i=0;i<me.tagsToComment.length;i++) {
v = v.replace(RegExp('<(\s*\/?'+me.tagsToComment[i]+'.*?)>', 'ig'), '<!--$1-->');
}

/////////////
me.getEditorBody().innerHTML = v;
if (Ext.isGecko) {
// Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8
me.setDesignMode(false); //toggle off first
me.setDesignMode(true);
}
me.fireEvent('push', me, v);
}
}
},

/**
* Uncomment the tags mentioned in pushValue
*/
cleanHtml: function(html) {
var me = this, i,
result = me.callParent(arguments);

for (i=0;i<me.tagsToComment.length;i++) {
result = result.replace(RegExp('<!--(\s*\/?'+me.tagsToComment[i]+'.*?)-->', 'ig'), '<$1>');
}
return result;

},
});