Question

项目： 我正在使用CKEditor v4.3创建一个原型插件。该插件加载我已经创建的页面的iframe（在同一个项目中）。 iframe中的内容是项目的必要部分，因此我必须使用它。插件加载后，我遍历iframe＆amp;获取iframe的Body内容。在OnOk之后，我执行getHtml()以获取最新内容，然后insertHtml进入编辑器。

问题： getHtml()（参见代码）的结果与dom中的结果不同。标记正在被更改和删除。我想要的只是具有dom中出现的相同标记。

代码：这是我的插件代码：

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

dom： 这是来自chrome开发人员工具的dom：

<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>&#x00D7;<!-- × --></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">

结果： 这是我在对话框窗口中单击“确定”后在ckEditor窗口中获得的内容。在源模式下查看：

<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" />

我做了什么： 考虑到我的iframe页面加载可能存在时间问题，我在addIframe函数（）的底部尝试了alert(iframeWindow.getHtml());。当它给我完全如dom中所示的数据时，我感到很惊讶。这正是我想要的。此外，作为进一步说明，（作为用户）一旦加载对话框，我没有对iframe数据进行任何更改。我等了几秒后才点击确定，看到页面已满载。我已经通过http://ckeditor.com/forums填写了我已经审核http://stackoverflow.com寻求帮助的提示。到目前为止，问题还没有到来。我没有找到任何东西 - 虽然它可能是面对我的那些东西之一。

如果你们有这方面的经验，我很想听听如何解决这个问题。非常感谢！

Answer 1

当你找到你一直在寻找的答案时，成功是如此甜蜜！我是CKEditor插件编程的新手 - 所以我只是不知道。这是一条艰难的道路。但我明白了。这是详细信息。

CKEditor在版本4.1中推出了名为ACF（高级内容过滤）的新层。因为我不知道这个额外的图层，当我的插件将HTML数据发送到editor.insertHtml上的ckEditor窗口时，我的HTML标记被剥离了。将allowedContent: true添加到插件代码（见下文）后，我的HTML不再被删除。不再过滤！
有关允许描述here的特定标签的详细信息最后，here提到添加config.allowedContent = true来禁用内容过滤 - 我认为这是在config.js文件中要做的事情，但是以这种方式更改config.js文件并没有对我有影响。

以下是新更改代码的副本：

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

CKEditor中的getHtml（）函数未按预期执行

1 个答案: