Hello all, I've been playing with CKEditor 3 in order to create a button plugin that adds microdata attributes (itemprop, itemtype etc, see HTML5 specs) to the html selection of the editor, I'm currently using iframes for the dialog (which I thought would be faster since I have a deadline in a couple of weeks) but I keep getting errors. I followed guides and examples provided on this forum and all around the web, but I still can't seem to find a fix. As of now I would just like to output the value of the input boxes I placed in my dialog (as debug), so I was using this code:
but I get different errors on the getElementById() calls depending on what I use to define iframeWindow. With this code I get "Uncaught TypeError: Cannot call method 'getElementById' of undefined", if I use:
I get: "Uncaught TypeError: Object [object DOMWindow] has no method 'getElementById'"
I also tried to output other hand-made divs from the iframe to see if the problem lied within input-type tags but I still get the same error, any help would be appreciated.
My dialog code is as follows:
( function() {
var iframeWindow = null;
var selHTML = '';
var ranges = '';
var microout = '';
CKEDITOR.plugins.add( 'Microdata',
{
requires: [ 'iframedialog' ],
init: function( editor )
{
var me = this;
CKEDITOR.dialog.add( 'MicrodataDialog', function ()
{
return {
title : 'Microdata Dialog',
minWidth : 550,
minHeight : 200,
contents :
[
{
id : 'iframe',
label : 'Add Microdata Elements to the text Selection',
expand : true,
elements :
[
{
type : 'iframe',
src : me.path + 'dialogs/Microdata.html',
width : '100%',
height : '100%',
onContentLoad : function() {
var iframe = document.getElementById( this._.frameId );
iframeWindow = iframe.contentDocument || iframe.contentWindow.document;
selHTML = editor.getSelection().getStartElement().getOuterHtml();
ranges = selHTML.getRanges();
// Iframe is loaded...
}
}
]
}
],
onOk : function()
{
microout += iframeWindow.getElementById('iscope').checked;
microout += iframeWindow.getElementById('itype').value;
microout += iframeWindow.getElementById('iid').value;
microout += iframeWindow.getElementById('iprop').value;
microout += iframeWindow.getElementById('iref').value;
this._.editor.insertHtml(microout);
}
};
} );
editor.addCommand( 'Microdata', new CKEDITOR.dialogCommand( 'MicrodataDialog' ) );
editor.ui.addButton( 'Microdata',
{
label: 'Add Microdata',
command: 'Microdata',
icon: this.path + 'images/icon.png'
} );
}
} );
} )();
but I get different errors on the getElementById() calls depending on what I use to define iframeWindow. With this code I get "Uncaught TypeError: Cannot call method 'getElementById' of undefined", if I use:
iframeWindow = iframe.contentwindow
I get: "Uncaught TypeError: Object [object DOMWindow] has no method 'getElementById'"
I also tried to output other hand-made divs from the iframe to see if the problem lied within input-type tags but I still get the same error, any help would be appreciated.
My dialog code is as follows:
<!DOCTYPE html> <html> <head> <title>Add Microdata</title> </head> <body> <div id=form> <input name="iscope" type="checkbox" value="1">Itemscope</input> <p>Itemtype: <input name="itype" id="itype" type="text" size="20" maxlength="255" /></p> <p>Itemid: <input name="iid" id ="iid" type="text" size="20" maxlength="255" /></p> <p>Itemprop: <input name="iprop" id="iprop" type="text" size="20" maxlength="255" /></p> <p>Itemref: <input name="iref" id="iref" type="text" size="20" maxlength="255" /></p> </div> </body> </html>