CKEditor内容（文本）在响应式站点上消失

时间：2014-03-01 20:03:39

标签： javascript php jquery responsive-design ckeditor

CKEditor加载精细，可编辑的内容区域可以工作5/10次。

其他时候，整个区域不能通过鼠标或Tab键选择。同样，如果从dbase加载字段文本，则缺少所有文本。

奇怪的是，调整窗口大小会立即纠正错误。但是窗口大小的一致性很小，导致它破裂。有时，Macbook上的最大窗口有效，有时则不然。

为简单起见，我录制了3分钟的截屏视频，说明了行为：

My screencast

我对CKEditor的调用很简单：

<script>
   CKEDITOR.replace( 'friendlyDesc<?php echo $row['jobId']; ?>' );
</script>

我将它加载到＆lt;头＆gt;像这样：

<script src="../js/ckeditor/ckeditor.js"></script>

这是加载时的页面：

<div class="form-group">
  <label for="friendlyDesc">Job Description</label>
  <textarea class="form-control" name="friendlyDesc28" id="friendlyDesc28" style="visibility: hidden; display: none;">&lt;p&gt;We are growing so quickly it's insane.&lt;/p&gt;</textarea>
  <div id="cke_friendlyDesc28" class="cke_2 cke cke_reset cke_chrome cke_editor_friendlyDesc28 cke_ltr cke_browser_webkit" dir="ltr" lang="en" role="application" aria-labelledby="cke_friendlyDesc28_arialbl"><span id="cke_friendlyDesc28_arialbl" class="cke_voice_label">Rich Text Editor, friendlyDesc28</span>
    <div class="cke_inner cke_reset" role="presentation"><span id="cke_2_top" class="cke_top cke_reset_all" role="presentation" style="height: auto; -webkit-user-select: none;"><span id="cke_46" class="cke_voice_label">Editor toolbars</span><span id="cke_2_toolbox" class="cke_toolbox" role="group" aria-labelledby="cke_46"
      onmousedown="return false;"><span id="cke_47" class="cke_toolbar" aria-labelledby="cke_47_label" role="toolbar"><span id="cke_47_label" class="cke_voice_label">Editing</span><span class="cke_toolbar_start"></span><span class="cke_toolgroup"
      role="presentation"><a id="cke_48" class="cke_button cke_button__scayt cke_button_off " href="javascript:void('Spell Check As You Type')" title="Spell Check As You Type" tabindex="-1" hidefocus="true" role="button" aria-labelledby="cke_48_label" aria-haspopup="true" onkeydown="return CKEDITOR.tools.callFunction(37,event);" onfocus="return CKEDITOR.tools.callFunction(38,event);" onmousedown="return CKEDITOR.tools.callFunction(39,event);" onclick="CKEDITOR.tools.callFunction(40,this);return false;"><span class="cke_button_icon cke_button__scayt_icon" style="background-image:url(http://employeeripple.com/app/js/ckeditor/plugins/icons.png?t=DBAA);background-position:0 -528px;background-size:auto;">&nbsp;</span>
        <span
        id="cke_48_label" class="cke_button_label cke_button__scayt_label" aria-hidden="false">Spell Check As You Type</span><span class="cke_button_arrow"></span>
      </a>
    </span><span class="cke_toolbar_end"></span></span><span id="cke_49" class="cke_toolbar" aria-labelledby="cke_49_label" role="toolbar"><span id="cke_49_label" class="cke_voice_label">Basic Styles</span><span class="cke_toolbar_start"></span>
    <span
    class="cke_toolgroup" role="presentation"><a id="cke_50" class="cke_button cke_button__bold  cke_button_off" href="javascript:void('Bold')" title="Bold" tabindex="-1" hidefocus="true" role="button" aria-labelledby="cke_50_label" aria-haspopup="false" onkeydown="return CKEDITOR.tools.callFunction(41,event);"
    onfocus="return CKEDITOR.tools.callFunction(42,event);" onmousedown="return CKEDITOR.tools.callFunction(43,event);" onclick="CKEDITOR.tools.callFunction(44,this);return false;"><span class="cke_button_icon cke_button__bold_icon" style="background-image:url(http://employeeripple.com/app/js/ckeditor/plugins/icons.png?t=DBAA);background-position:0 0px;background-size:auto;">&nbsp;</span><span id="cke_50_label" class="cke_button_label cke_button__bold_label" aria-hidden="false">Bold</span></a>
    <a
    id="cke_51" class="cke_button cke_button__italic  cke_button_off" href="javascript:void('Italic')" title="Italic" tabindex="-1" hidefocus="true" role="button" aria-labelledby="cke_51_label" aria-haspopup="false" onkeydown="return CKEDITOR.tools.callFunction(45,event);"
    onfocus="return CKEDITOR.tools.callFunction(46,event);" onmousedown="return CKEDITOR.tools.callFunction(47,event);" onclick="CKEDITOR.tools.callFunction(48,this);return false;"><span class="cke_button_icon cke_button__italic_icon" style="background-image:url(http://employeeripple.com/app/js/ckeditor/plugins/icons.png?t=DBAA);background-position:0 -24px;background-size:auto;">&nbsp;</span><span id="cke_51_label"
    class="cke_button_label cke_button__italic_label" aria-hidden="false">Italic</span>
  </a>
</span><span class="cke_toolbar_end"></span></span><span id="cke_52" class="cke_toolbar" aria-labelledby="cke_52_label" role="toolbar"><span id="cke_52_label" class="cke_voice_label">Paragraph</span><span class="cke_toolbar_start"></span>
<span
class="cke_toolgroup" role="presentation">
<a id="cke_53" class="cke_button cke_button__numberedlist  cke_button_off" href="javascript:void('Insert/Remove Numbered List')" title="Insert/Remove Numbered List" tabindex="-1" hidefocus="true" role="button" aria-labelledby="cke_53_label"
aria-haspopup="false" onkeydown="return CKEDITOR.tools.callFunction(49,event);" onfocus="return CKEDITOR.tools.callFunction(50,event);" onmousedown="return CKEDITOR.tools.callFunction(51,event);" onclick="CKEDITOR.tools.callFunction(52,this);return false;"><span class="cke_button_icon cke_button__numberedlist_icon" style="background-image:url(http://employeeripple.com/app/js/ckeditor/plugins/icons.png?t=DBAA);background-position:0 -408px;background-size:auto;">&nbsp;</span>
<span
id="cke_53_label" class="cke_button_label cke_button__numberedlist_label" aria-hidden="false">Insert/Remove Numbered List</span>
</a>
<a id="cke_54" class="cke_button cke_button__bulletedlist  cke_button_off" href="javascript:void('Insert/Remove Bulleted List')" title="Insert/Remove Bulleted List" tabindex="-1" hidefocus="true" role="button" aria-labelledby="cke_54_label"
aria-haspopup="false" onkeydown="return CKEDITOR.tools.callFunction(53,event);" onfocus="return CKEDITOR.tools.callFunction(54,event);" onmousedown="return CKEDITOR.tools.callFunction(55,event);" onclick="CKEDITOR.tools.callFunction(56,this);return false;"><span class="cke_button_icon cke_button__bulletedlist_icon" style="background-image:url(http://employeeripple.com/app/js/ckeditor/plugins/icons.png?t=DBAA);background-position:0 -360px;background-size:auto;">&nbsp;</span>
<span
id="cke_54_label" class="cke_button_label cke_button__bulletedlist_label" aria-hidden="false">Insert/Remove Bulleted List</span>
</a><span class="cke_toolbar_separator" role="separator"></span><a id="cke_55" class="cke_button cke_button__outdent cke_button_disabled " href="javascript:void('Decrease Indent')" title="Decrease Indent" tabindex="-1" hidefocus="true"
role="button" aria-labelledby="cke_55_label" aria-haspopup="false" aria-disabled="true" onkeydown="return CKEDITOR.tools.callFunction(57,event);" onfocus="return CKEDITOR.tools.callFunction(58,event);" onmousedown="return CKEDITOR.tools.callFunction(59,event);"
onclick="CKEDITOR.tools.callFunction(60,this);return false;"><span class="cke_button_icon cke_button__outdent_icon" style="background-image:url(http://employeeripple.com/app/js/ckeditor/plugins/icons.png?t=DBAA);background-position:0 -216px;background-size:auto;">&nbsp;</span><span id="cke_55_label" class="cke_button_label cke_button__outdent_label" aria-hidden="false">Decrease Indent</span></a>
<a
id="cke_56" class="cke_button cke_button__indent cke_button_disabled" href="javascript:void('Increase Indent')" title="Increase Indent" tabindex="-1" hidefocus="true" role="button" aria-labelledby="cke_56_label" aria-haspopup="false"
onkeydown="return CKEDITOR.tools.callFunction(61,event);" onfocus="return CKEDITOR.tools.callFunction(62,event);" onmousedown="return CKEDITOR.tools.callFunction(63,event);" onclick="CKEDITOR.tools.callFunction(64,this);return false;"
aria-disabled="true"><span class="cke_button_icon cke_button__indent_icon" style="background-image:url(http://employeeripple.com/app/js/ckeditor/plugins/icons.png?t=DBAA);background-position:0 -168px;background-size:auto;">&nbsp;</span><span id="cke_56_label"
class="cke_button_label cke_button__indent_label" aria-hidden="false">Increase Indent</span>
</a>
</span><span class="cke_toolbar_end"></span></span><span id="cke_57" class="cke_toolbar" aria-labelledby="cke_57_label" role="toolbar"><span id="cke_57_label" class="cke_voice_label">Links</span><span class="cke_toolbar_start"></span>
<span
class="cke_toolgroup" role="presentation"><a id="cke_58" class="cke_button cke_button__link  cke_button_off" href="javascript:void('Link')" title="Link" tabindex="-1" hidefocus="true" role="button" aria-labelledby="cke_58_label" aria-haspopup="false" onkeydown="return CKEDITOR.tools.callFunction(65,event);"
onfocus="return CKEDITOR.tools.callFunction(66,event);" onmousedown="return CKEDITOR.tools.callFunction(67,event);" onclick="CKEDITOR.tools.callFunction(68,this);return false;"><span class="cke_button_icon cke_button__link_icon" style="background-image:url(http://employeeripple.com/app/js/ckeditor/plugins/icons.png?t=DBAA);background-position:0 -288px;background-size:auto;">&nbsp;</span><span id="cke_58_label" class="cke_button_label cke_button__link_label" aria-hidden="false">Link</span></a>
<a
id="cke_59" class="cke_button cke_button__unlink cke_button_disabled " href="javascript:void('Unlink')" title="Unlink" tabindex="-1" hidefocus="true" role="button" aria-labelledby="cke_59_label" aria-haspopup="false"
aria-disabled="true" onkeydown="return CKEDITOR.tools.callFunction(69,event);" onfocus="return CKEDITOR.tools.callFunction(70,event);" onmousedown="return CKEDITOR.tools.callFunction(71,event);" onclick="CKEDITOR.tools.callFunction(72,this);return false;"><span class="cke_button_icon cke_button__unlink_icon" style="background-image:url(http://employeeripple.com/app/js/ckeditor/plugins/icons.png?t=DBAA);background-position:0 -312px;background-size:auto;">&nbsp;</span>
<span
id="cke_59_label" class="cke_button_label cke_button__unlink_label" aria-hidden="false">Unlink</span>
</a>
</span><span class="cke_toolbar_end"></span></span>
</span>
</span>
<div id="cke_2_contents" class="cke_contents cke_reset" role="presentation" style="height: 200px;"><span id="cke_63" class="cke_voice_label">Press ALT 0 for help</span>
<iframe src="" frameborder="0" class="cke_wysiwyg_frame cke_reset" title="Rich Text Editor, friendlyDesc28" aria-describedby="cke_63" tabindex="0"
allowtransparency="true" style="width: 536px; height: 100%;"></iframe>
</div>
</div>
</div>

</div>

我很欣赏有关如何追捕原因的建议，因为这是一个令人沮丧的错误，我无法找到原因。我想知道我的CSS中是否有某些东西，或者是影响它的Javascript调用。

我还会注意到这与其他关于消失CKEditor实例的问题有点不同，因为那些涉及整个WYSIWIG界面消失了。就我而言，它只是编辑器中的内容而不是消失。

0 个答案:

没有答案
相关问题
最新问题