Question

我已经以这种方式在我的Create.html（VS 2017的MVC文件之一）中加载了ckeditor。

//用于测试，我使用了内联脚本

                @Html.TextAreaFor(model => model.DetailDescription, new {@id = "_DetailDescription", @rows="20",@cols="10"})
                <script> // destroy ckeditor instaces
                    if (CKEDITOR.instances['_DetailDescription']) {
                        CKEDITOR.remove(CKEDITOR.instances['_DetailDescription']);
                    };
                    //initialize CKEditor by givin id of textarea
                    CKEDITOR.replace('_DetailDescription');
                    CKEDITOR.editorConfig = function (config) {
                        ignoreEmptyParagraph = true;
                    };
                </script>
                @*<textarea rows="10" id="DetailDescription"></textarea>*@   
                @Html.ValidationMessageFor(model => model.DetailDescription, "", new { @class = "text-danger" })                   
            </div>

当我运行项目时，我可以看到ckeditor实例同时加载到浏览器firefox和chrome中，可以在检查模式下看到，如下所示

                <textarea cols="10" data-val="true" data-val-required="The Description field is required." id="_DetailDescription" name="DetailDescription" rows="20" style="visibility: hidden; display: none;"></textarea><span id="cke__DetailDescription" class="cke_skin_kama cke_1 cke_editor__DetailDescription" dir="ltr" title=" " role="application" aria-labelledby="cke__DetailDescription_arialbl" lang="en"><span id="cke__DetailDescription_arialbl" class="cke_voice_label">Rich Text Editor</span><span class="cke_browser_gecko" role="presentation"><span class="cke_wrapper cke_ltr" role="presentation"><table class="cke_editor" role="presentation" cellspacing="0" cellpadding="0" border="0"><tbody><tr role="presentation" style="-moz-user-select: none;"><td id="cke_top__DetailDescription" class="cke_top" role="presentation"><div class="cke_toolbox" role="group" aria-labelledby="cke_6" onmousedown="return false;"><span id="cke_6" class="cke_voice_label">Editor toolbars</span><span id="cke_7" class="cke_toolbar" aria-labelledby="cke_7_label" role="toolbar"><span id="cke_7_label" class="cke_voice_label">Document</span><span class="cke_toolbar_start"></span><span class="cke_toolgroup" role="presentation"><span class="cke_button"><a id="cke_8" class="cke_off cke_button_source" title="Source" tabindex="-1" hidefocus="true" role="button" aria-labelledby="cke_8_label" onblur="this.style.cssText = this.style.cssText;" onkeydown="return CKEDITOR.tools.callFunction(4, event);" onfocus="return CKEDITOR.tools.callFunction(5, event);" onclick="CKEDITOR.tools.callFunction(6, this); return false;">

......................

但是ckeditor是白色的空白，完全看不到工具栏或边框。

有人有想法或者我对CSS做错了吗？？？

谢谢。

为什么ckeditor在浏览器上不可见？

0 个答案: