Question

我已成功创建了一个道场。但是我需要将这个编辑器从div移到另一个。但是这会导致此错误： TypeError：frameElement._loadFunc不是函数

基本上这就是我所拥有的：

<script src="dojo/dojo.js" data-dojo-config="isDebug: true"></script>
<a href="javascript:move_dojo_editor();">Move Editor </a>       
<div id=container1 style="display:none;" >
    <div class="claro" style="margin:10px" >
        <div id=dojo_editor_1 data-dojo-type="dijit.Editor" style="width:800px;min-height:100px;" data-dojo-props="extraPlugins:['foreColor','hiliteColor','fontName', 'fontSize', 'formatBlock','|','createLink','insertImage','fullscreen','viewsource','newpage','print','toggleDir','smiley',{name: 'insertTable'},
            {name: 'modifyTable'},
            {name: 'insertTableRowBefore'},
            {name: 'insertTableRowAfter'},
            {name: 'insertTableColumnBefore'},
            {name: 'insertTableColumnAfter'},
            {name: 'deleteTableRow'},
            {name: 'deleteTableColumn'},
            {name: 'colorTableCell'},
            {name: 'tableContextMenu'}]">
            Example here..
        </div>
    </div>
</div>
<div id=container2></div>

On javascript I have this:


// Include the class
dojo.require("dijit.Editor");
// Require a few extra plugins
dojo.require("dijit._editor.plugins.TextColor");
dojo.require("dijit._editor.plugins.LinkDialog");
dojo.require("dijit._editor.plugins.FullScreen");
dojo.require("dijit._editor.plugins.ViewSource");
dojo.require("dijit._editor.plugins.NewPage");
dojo.require("dijit._editor.plugins.FontChoice");
dojo.require("dijit._editor.plugins.Print");
dojo.require("dijit._editor.plugins.ToggleDir");

//dojox
dojo.require("dojox.editor.plugins.PrettyPrint");
dojo.require("dojox.editor.plugins.PageBreak");
dojo.require("dojox.editor.plugins.ShowBlockNodes");
dojo.require("dojox.editor.plugins.Preview");
dojo.require("dojox.editor.plugins.Save");
dojo.require("dojox.editor.plugins.ToolbarLineBreak");
dojo.require("dojox.editor.plugins.NormalizeIndentOutdent");
dojo.require("dojox.editor.plugins.Breadcrumb");
dojo.require("dojox.editor.plugins.FindReplace");
dojo.require("dojox.editor.plugins.PasteFromWord");
dojo.require("dojox.editor.plugins.InsertAnchor");
dojo.require("dojox.editor.plugins.CollapsibleToolbar");
dojo.require("dojox.editor.plugins.Blockquote");
dojo.require("dojox.editor.plugins.Smiley");
dojo.require("dojox.editor.plugins.UploadImage");
require([
        "dojo/parser",
        "dojox/editor/plugins/TablePlugins",
        "dojo/domReady!"

], function(parser) {
        parser.parse();
});

function move_dojo_editor()
{
    var tmp = $("#container1").html();
    $("#container1").html("");
    $("#container2").html(tmp); // the editor is displaying, yet I can't click inside it or on any option it has.

}

Answer 1

您不能通过存储节点的innerHTML然后将其转储到另一个节点来“移动”DOM。这将有效地破坏旧的DOM，并创建缺少原始DOM所具有的任何事件连接或关联的新DOM，从而导致错误。

要正确移动DOM，您需要使用实际的DOM API，而不是innerHTML。这是一个粗略的例子（为简单起见，我将假设给class="claro" ID为claroContainer的div：

document.getElementById('container2').appendChild(
    document.getElementById('claroContainer')
);

无关，你应该考虑使用现代的Dojo实践，而不是1.7和AMD之前的弃用的全局和加载器API。有关升级的入门知识，请参阅http://dojotoolkit.org/documentation/tutorials/1.10/modern_dojo/。

Dojo编辑器在将它从div移动到另一个时效果不佳

1 个答案: