getHtml() function in CKEditor not performing as expected - ckeditor

Question

The Project:
I am creating a prototype plugin using CKEditor v4.3.
The plugin loads an iframe of a page I have already created (in the same project). The contents inside the iframe is a necessary part of the project, thus I must use it. Once the plugin loads, I traverse the iframe & get the Body contents of the iframe. After OnOk, I perform getHtml() to get the latest contents and then insertHtml into the editor.
The problem:
The results from getHtml() (see code) is not the same as what is in the dom. The markup is getting changed and removed. All I want is to have the same markup that appears in the dom.
The Code: Here is my plugin code:
var iframeWindow = null;
var theElement = null;
CKEDITOR.plugins.add('airmath',
{
requires: 'iframedialog',
icons: 'airmath',
init: function (editor) {
var height = 480;
var width = 750;
var url = CKEDITOR.basePath + 'plugins/airmath/integration/airmath.html';
CKEDITOR.dialog.addIframe(
'myiframedialogDialog',
'Math Editor',
url, width, height,
function () {
theElement = this.getElement();
iframeWindow = theElement.getFrameDocument().getBody();
},
{
onOk: function () {
editor.insertHtml(iframeWindow.getHtml());
}
}
);
editor.addCommand('myiframedialog', new CKEDITOR.dialogCommand('myiframedialogDialog'));
editor.ui.addButton('AirMath',
{
label: 'Math Editor',
command: 'myiframedialog',
toolbar: 'insert'
});
}
});
The dom:
This is the dom from chrome developer tools:
<span class="MathJax" id="Eq-Editor-Eq-Container-1-1-Frame" role="textbox" aria-readonly="true" style="">
<nobr>
<span class="math" id="MathJax-Span-1" style="width: 15.642em; display: inline-block;">
<span style="display: inline-block; position: relative; width: 7.933em; height: 0px; font-size: 197%;">
<span style="position: absolute; clip: rect(1.461em 1000.002em 2.667em -0.22em); top: -2.314em; left: 0.002em;">
<span class="mrow" id="MathJax-Span-2">
<span class="mstyle" id="MathJax-Span-3">
<span class="mrow" id="MathJax-Span-4">
<span class="texatom" id="MathJax-Span-5">
<span class="mrow" id="MathJax-Span-6">
<span class="mi" id="MathJax-Span-7" style="font-family: MathJax_Math; font-style: italic;">f
<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.065em;">
</span>
</span>
<span class="mfenced" id="MathJax-Span-8">
<span class="mo" id="MathJax-Span-10" style="">
<span style="font-family: MathJax_Main;">(</span>
</span>
<span class="texatom" id="MathJax-Span-11">
<span class="mrow" id="MathJax-Span-12">
<span class="mi" id="MathJax-Span-13" style="font-family: MathJax_Math; font-style: italic;">x</span>
</span>
</span>
<span class="mo" id="MathJax-Span-14" style="">
<span style="font-family: MathJax_Main;">)</span>
</span>
</span>
<span class="mo" id="MathJax-Span-15" style="font-family: MathJax_Main; padding-left: 0.287em;">=</span>
<span class="mn" id="MathJax-Span-16" style="font-family: MathJax_Main; padding-left: 0.287em;">5</span>
<span class="mn" id="MathJax-Span-17" style="font-family: MathJax_Main;">0</span>
<span class="mn" id="MathJax-Span-18" style="font-family: MathJax_Main;">0</span>
<span class="mo" id="MathJax-Span-19" style="font-family: MathJax_Main; padding-left: 0.224em;">×</span>
<span class="mn" id="MathJax-Span-20" style="font-family: MathJax_Main; padding-left: 0.224em;">1</span>
<span class="mo" id="MathJax-Span-21" style="font-family: MathJax_Main;">.</span>
<span class="msup" id="MathJax-Span-22" style="padding-left: 0.16em;">
<span style="display: inline-block; position: relative; width: 0.985em; height: 0px;">
<span style="position: absolute; clip: rect(1.429em 1000.002em 2.286em -0.22em); top: -2.188em; left: 0.002em;">
<span class="mn" id="MathJax-Span-23" style="font-family: MathJax_Main;">2</span>
<span style="display: inline-block; width: 0px; height: 2.191em;">
</span>
</span>
<span style="position: absolute; top: -2.156em; left: 0.509em;">
<span class="mi" id="MathJax-Span-24" style="font-size: 70.7%; font-family: MathJax_Math; font-style: italic;">x</span><span style="display: inline-block; width: 0px; height: 1.747em;">
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
<span style="display: inline-block; width: 0px; height: 2.318em;">
</span>
</span>
</span>
<span style="border-left-width: 0.003em; border-left-style: solid; display: inline-block; overflow: hidden; width: 0px; height: 2.128em; vertical-align: -0.559em;">
</span>
</span>
</nobr>
</span>
<script id="Eq-Editor-Eq-Container-1-1" type="math/mml"><math xmlns="http://www.w3.org/1998/Math/MathML">
<mstyle displaystyle="true">
<mrow class="MJX-TeXAtom-ORD">
<mi>f</mi>
<mfenced open="(" close=")">
<mrow class="MJX-TeXAtom-ORD">
<mi>x</mi>
</mrow>
</mfenced><mo>=</mo>
<mn>5</mn>
<mn>0</mn><mn>0</mn>
<mo>×<!-- × --></mo>
<mn>1</mn>
<mo>.</mo>
<msup>
<mn>2</mn>
<mi>x</mi>
</msup>
</mrow></mstyle>
</math>
</script>
<input type="text" class="hidden" id="Eq-Container-1_input_Eq-Editor-Eq-Container-1-1" name="Eq-Container-1_input_Eq-Editor-Eq-Container-1-1">
The Results:
And this is what I get in the ckEditor window after clicking "Ok" from the dialog window. Viewing in Source mode:
<div class="mje_editor_row" id="Eq-Editor-Eq-Container-1-1-Row">
<span style="font-size:197%">
<em>f</em>
<span style="font-family:mathjax_main">(</span>
<em>x</em>
<span style="font-family:mathjax_main">)</span>
<span style="font-family:mathjax_main">=</span>
<span style="font-family:mathjax_main">5</span>
<span style="font-family:mathjax_main">0</span>
<span style="font-family:mathjax_main">0</span>
<span style="font-family:mathjax_main">×</span>
<span style="font-family:mathjax_main">1</span>
<span style="font-family:mathjax_main">.</span>
<span style="font-family:mathjax_main">2</span>
<em>x</em>
</span>
<input name="Eq-Container-1_input_Eq-Editor-Eq-Container-1-1" type="text" />
What I've done:
Thinking that there could be a timing issue with my iframe page loading, I tried an alert(iframeWindow.getHtml()); at the bottom of the addIframe function(). I was surprised when it gave me exactly the data as shown in the dom. It was just what I wanted. Also, as a further note, (as a user) I did not make any changes to the iframe data once the dialog loaded. I just clicked Ok after waiting for a couple seconds to see that the page is fully loaded. I have poured through http://ckeditor.com/forums for hints I have reviewed http://stackoverflow.com for help. So far the problem eludes me. I haven't found anything-- although it is probably one of those things staring right at me in the face.
If any of you have experience with this issue, I would love to hear how to solve it. Many thanks!

Answer 1

Success is so sweet when you find the answer you have been looking for! I am new to CKEditor plugin programming - so I just didn't know. It has been a rough road. But I got it. Here is the details.
CKEditor came out with this new layer called ACF (Advanced Content Filtering) in version 4.1. Because I wasn't aren't aware of this extra layer, my HTML tags got stripped out when my plugin sent HTML data to the ckEditor window on editor.insertHtml. After I added allowedContent: true to the plugin code (see below), my HTML is no longer stripped out. No more filtering!
Details about allowing specific tags described here.
And finally, here it mentions about adding config.allowedContent = true to disable content filtering -- which I assumed was something to do in the config.js file, but changing the config.js file in this manner didn't have an effect for me.
Here is a copy of the new changed code:
var iframeWindow = null;
var theElement = null;
var height = 480;
var width = 750;
var url = CKEDITOR.basePath + 'plugins/airmath/integration/airmath.html';
CKEDITOR.plugins.add('airmath',
{
requires: 'iframedialog',
icons: 'airmath',
init: function (editor) {
allowedContent: true,
CKEDITOR.dialog.addIframe(
'myiframedialogDialog',
'Math Editor',
url, width, height,
function () {
theElement = this.getElement();
iframeWindow = theElement.getFrameDocument().getBody();
},
{
onOk: function () {
editor.insertHtml(iframeWindow.getHtml());
}
}
);
editor.addCommand('myiframedialog', new CKEDITOR.dialogCommand('myiframedialogDialog'));
editor.ui.addButton('AirMath',
{
label: 'Math Editor',
command: 'myiframedialog',
toolbar: 'insert'
});
}
});