Question

我被这个bug搞了几个小时，但仍然没有抓住任何修复它的线索：

我试图在单击按钮后动态创建对话框，然后将ckeditor附加到它。当我只处理一个实例时它工作得很好，但是在我启用CKeditor的多个实例后（绑定到不同的基于div的对话框元素，这些基本编辑功能丢失了......这是我覆盖/拖动其他之前的对应HTML周围的元素（抱歉由于stackoverflow上缺少信誉而无法上传图片）：

 <iframe src="" frameborder="0" class="cke_wysiwyg_frame cke_reset" title="Rich Text Editor, wb_editor_7" aria-describedby="cke_467" tabindex="0" allowtransparency="true" style="width: 100%; height: 100%;"></iframe>
    <html dir="ltr" lang="en"><head><title data-cke-title="Rich Text Editor, wb_editor_7">Rich Text Editor, wb_editor_7</title><style data-cke-temp="1">html{cursor:text;*cursor:auto}
img,input,textarea{cursor:default}</style><link type="text/css" rel="stylesheet" href="http://127.0.0.1:8001/static/dashboard/lib/ckeditor-4.4.1/contents.css?t=E4KA"><style data-cke-temp="1">.cke_editable{cursor:text}.cke_editable img,.cke_editable input,.cke_editable textarea{cursor:default} .cke_contents_ltr a.cke_anchor,.cke_contents_ltr a.cke_anchor_empty,.cke_editable.cke_contents_ltr a[name],.cke_editable.cke_contents_ltr a[data-cke-saved-name]{background:url(http://127.0.0.1:8001/static/dashboard/lib/ckeditor-4.4.1/plugins/link/images/anchor.png?t=E4KA) no-repeat left center;border:1px dotted #00f;background-size:16px;padding-left:18px;cursor:auto;}.cke_contents_ltr img.cke_anchor{background:url(http://127.0.0.1:8001/static/dashboard/lib/ckeditor-4.4.1/plugins/link/images/anchor.png?t=E4KA) no-repeat left center;border:1px dotted #00f;background-size:16px;width:16px;min-height:15px;height:1.15em;vertical-align:text-bottom;}.cke_contents_rtl a.cke_anchor,.cke_contents_rtl a.cke_anchor_empty,.cke_editable.cke_contents_rtl a[name],.cke_editable.cke_contents_rtl a[data-cke-saved-name]{background:url(http://127.0.0.1:8001/static/dashboard/lib/ckeditor-4.4.1/plugins/link/images/anchor.png?t=E4KA) no-repeat right center;border:1px dotted #00f;background-size:16px;padding-right:18px;cursor:auto;}.cke_contents_rtl img.cke_anchor{background:url(http://127.0.0.1:8001/static/dashboard/lib/ckeditor-4.4.1/plugins/link/images/anchor.png?t=E4KA) no-repeat right center;border:1px dotted #00f;background-size:16px;width:16px;min-height:15px;height:1.15em;vertical-align:text-bottom;}
.cke_show_borders  table.cke_show_border,.cke_show_borders  table.cke_show_border > tr > td, .cke_show_borders  table.cke_show_border > tr > th,.cke_show_borders  table.cke_show_border > tbody > tr > td, .cke_show_borders  table.cke_show_border > tbody > tr > th,.cke_show_borders  table.cke_show_border > thead > tr > td, .cke_show_borders  table.cke_show_border > thead > tr > th,.cke_show_borders  table.cke_show_border > tfoot > tr > td, .cke_show_borders  table.cke_show_border > tfoot > tr > th{border : #d3d3d3 1px dotted}</style></head><body contenteditable="true" class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" spellcheck="false">Hello world! Thank you for your help!</body></html>

在生成另一个ckeditor支持的对话框之后，它确实无法让用户在开头输入和编辑，但是一旦我拖动新创建的那个，它就不可编辑：

<iframe src="" frameborder="0" class="cke_wysiwyg_frame cke_reset" title="Rich Text Editor, wb_editor_4" aria-describedby="cke_389" tabindex="0" allowtransparency="true" style="width: 100%; height: 100%;"></iframe><html><head></head><body></body></html>

请注意，差异非常惊人，因为“contenteditable = true”的属性在CKEDITOR中的HTML中消失了。

我试图让textarea用来取代CKEDITOR本身满足，但仍然行不通。提前致谢！

Answer 1

我找到了答案：这是因为jquery ui的版本，需要1.9版本才能允许z-index控制，以便iframe可以放在前面。

ckeditor在被其他外部div元素覆盖后无法编辑

1 个答案: