我正在创建一个带对话框的ckeditor插件。在对话框中我有一个ckeditor。
当我使用CKEDITOR.appendTo(div_id)
时,它不会直接推送到html。这样我就无法设置innerHTML
。
onLoad : function(){
// textareas == the textareas in the dialog
var textareas = $('.cke_dialog_ui_input_textarea');
// features_id == the id of the first div in the td
var features_id = textareas[1].parentNode.parentNode.parentNode.getAttribute('id');
// features == first div in td
var features = textareas[1];
// features_innerhtml == html from the textarea
var features_innerhtml = textareas[1].innerHtml;
// create ckeditor for features inside features_id div
CKEDITOR.appendTo(features_id);//here it should have created the iframe etc.
// change textarea style to 'display:none;'
features.setAttribute('style','display:none;');
//because the ckeditor iframe does not yet exists i can not insert my html later on
//select iframe
var iframe = $('#' + features_id).children().children().children().children()[3];
//set inner html of iframe
iframe.contentWindow.document.childNodes[1].childNodes[1].innerHTML(features_innerhtml);
}
当脚本完成并且ckeditor对话框已完全加载时,ckeditor会显示,但它是空的。我做错了什么?
修改
html按要求:
<div class="cke cke_reset_all cke_1 cke_editor_ckeditor_dialog" dir="ltr" lang="nl" role="application">
<table class="cke_dialog cke_browser_webkit cke_ltr" aria-labelledby="cke_dialog_title_138" style="position: fixed; top: 337px; left: 751.5px; z-index: 10010;" role="dialog">
<tbody>
<tr>
<td role="presentation">
<div class="cke_dialog_body" role="presentation">
<div id="cke_dialog_title_138" class="cke_dialog_title" role="presentation" style="-webkit-user-select: none;">Blok aanmaken</div>
<a id="cke_dialog_close_button_138" class="cke_dialog_close_button" href="javascript:void(0)" title="Sluiten" role="button" style="-webkit-user-select: none;"><span class="cke_label">X</span>
</a>
<div id="cke_dialog_tabs_138" class="cke_dialog_tabs" role="tablist">
<a class="cke_dialog_tab cke_dialog_tab_selected" cke_first="" title="Tekst" id="cke_tab1_155" href="javascript:void(0)" tabindex="-1" hidefocus="true" role="tab" style="-webkit-user-select: none;">Tekst</a>
<a class="cke_dialog_tab" cke_last="" title="Style" id="cke_tab2_160" href="javascript:void(0)" tabindex="-1" hidefocus="true" role="tab" style="-webkit-user-select: none;">Style</a>
</div>
<table class="cke_dialog_contents" role="presentation">
<tbody>
<tr>
<td id="cke_dialog_contents_138" class="cke_dialog_contents_body" role="presentation" style="width: 400px; height: 200px;">
<div role="tabpanel" id="cke_154_uiElement" class="cke_dialog_ui_vbox cke_dialog_page_contents" style="width: 100%;" aria-labelledby="cke_tab1_155" name="tab1" aria-hidden="false">
<table role="presentation" cellspacing="0" border="0" style="width:100%;" align="left">
<tbody>
<tr>
<td role="presentation" class="cke_dialog_ui_vbox_child">
<div role="presentation" id="cke_144_uiElement" class="cke_dialog_ui_text">
<label class="cke_dialog_ui_labeled_label" id="cke_143_label" for="cke_142_textInput">Titel</label>
<div class="cke_dialog_ui_labeled_content" role="presentation">
<div class="cke_dialog_ui_input_text" role="presentation">
<input class="cke_dialog_ui_input_text" id="cke_142_textInput" type="text" aria-labelledby="cke_143_label">
</div>
</div>
</div>
</td>
</tr>
<tr>
<td role="presentation" class="cke_dialog_ui_vbox_child">
<div role="presentation" id="cke_147_uiElement" class="cke_dialog_ui_textarea ckeditor_features">
<label class="cke_dialog_ui_labeled_label" id="cke_146_label" for="cke_145_textarea">Kenmerken</label>
<div class="cke_dialog_ui_labeled_content" role="presentation">
<div class="cke_dialog_ui_input_textarea" role="presentation">
<textarea class="cke_dialog_ui_input_textarea" id="cke_145_textarea" rows="5" cols="20" aria-labelledby="cke_146_label" style="display:none;"></textarea>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td role="presentation" class="cke_dialog_ui_vbox_child">
<div role="presentation" id="cke_150_uiElement" class="cke_dialog_ui_textarea ckeditor_introduction">
<label class="cke_dialog_ui_labeled_label" id="cke_149_label" for="cke_148_textarea">Introductie</label>
<div class="cke_dialog_ui_labeled_content" role="presentation">
<div class="cke_dialog_ui_input_textarea" role="presentation">
<textarea class="cke_dialog_ui_input_textarea" id="cke_148_textarea" rows="5" cols="20" aria-labelledby="cke_149_label"></textarea>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td role="presentation" class="cke_dialog_ui_vbox_child">
<div role="presentation" id="cke_153_uiElement" class="cke_dialog_ui_text">
<label class="cke_dialog_ui_labeled_label" id="cke_152_label" for="cke_151_textInput">Meerinfo Link</label>
<div class="cke_dialog_ui_labeled_content" role="presentation">
<div class="cke_dialog_ui_input_text" role="presentation">
<input class="cke_dialog_ui_input_text" id="cke_151_textInput" type="text" aria-labelledby="cke_152_label">
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div role="tabpanel" id="cke_159_uiElement" class="cke_dialog_ui_vbox cke_dialog_page_contents" style="width: 100%; display: none;" aria-labelledby="cke_tab2_160" name="tab2" aria-hidden="true">
<table role="presentation" cellspacing="0" border="0" style="width:100%;" align="left">
<tbody>
<tr>
<td role="presentation" class="cke_dialog_ui_vbox_child">
<div role="presentation" id="cke_158_uiElement" class="cke_dialog_ui_text color {hash:true}">
<label class="cke_dialog_ui_labeled_label" id="cke_157_label" for="cke_156_textInput">Achtergrond Kleur</label>
<div class="cke_dialog_ui_labeled_content" role="presentation">
<div class="cke_dialog_ui_input_text" role="presentation">
<input class="cke_dialog_ui_input_text" id="cke_156_textInput" type="text" aria-labelledby="cke_157_label">
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td id="cke_dialog_footer_138" class="cke_dialog_footer" role="presentation">
<table role="presentation" id="cke_166_uiElement" class="cke_dialog_ui_hbox cke_dialog_footer_buttons">
<tbody>
<tr class="cke_dialog_ui_hbox">
<td class="cke_dialog_ui_hbox_first" role="presentation">
<a style="undefined" href="javascript:void(0)" title="OK" hidefocus="true" class="cke_dialog_ui_button cke_dialog_ui_button_ok" role="button" aria-labelledby="cke_162_label" id="cke_163_uiElement"><span id="cke_162_label" class="cke_dialog_ui_button">OK</span>
</a>
</td>
<td class="cke_dialog_ui_hbox_last" role="presentation">
<a style="undefined" href="javascript:void(0)" title="Annuleren" hidefocus="true" class="cke_dialog_ui_button cke_dialog_ui_button_cancel" role="button" aria-labelledby="cke_164_label" id="cke_165_uiElement"><span id="cke_164_label" class="cke_dialog_ui_button">Annuleren</span>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
答案 0 :(得分:0)
我将appendTo更改为以下内容:
CKEDITOR.appendTo(features_id, null, features_innerhtml);
起初我只指定了应该创建ckeditor的div。在the documentation中它说了以下内容:
CKEDITOR.appendTo(elementOrId, config, data)
我没有配置项,所以我使用null
来查找我使用features_innerhtml
的数据
所以我在appendTo中指定了数据,而不是稍后设置innerHTML:)