asp.net - 为什么 CEKDITOR 显示实际的 html 代码而不是渲染它

Question

这是我的代码：

$("#About").ckeditor(function () { }, {
            htmlEncodeOutput: true,
            toolbar: [['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'FontSize', '-', 'Styles', 'Format']],
            height: 200
        });

我正在使用 CKEDITOR 3.6.4

这是 HTML 输出：

<textarea cols="20" id="About" name="About" rows="2" style="visibility: hidden; display: none;">&amp;lt;p&amp;gt;
    dasfdsa&amp;lt;/p&amp;gt;
</textarea>

<span id="cke_About" class="cke_skin_kama cke_2 cke_editor_About" dir="ltr" title="" lang="en" tabindex="0" role="application" aria-labelledby="cke_About_arialbl"><span id="cke_About_arialbl" class="cke_voice_label">Rich Text Editor</span><span class="cke_browser_webkit" role="presentation"><span class="cke_wrapper cke_ltr" role="presentation"><table class="cke_editor" border="0" cellspacing="0" cellpadding="0" role="presentation"><tbody><tr role="presentation"><td id="cke_top_About" class="cke_top" role="presentation"><div class="cke_toolbox" role="group" aria-labelledby="cke_33" onmousedown="return false;"><span id="cke_33" class="cke_voice_label">Editor toolbars</span><span id="cke_34" class="cke_toolbar" role="toolbar"><span class="cke_toolbar_start"></span><span class="cke_toolgroup" role="presentation"><span class="cke_button"><a id="cke_35" class="cke_off cke_button_bold" "="" href="javascript:void('Bold')" title="Bold" tabindex="-1" hidefocus="true" role="button" aria-labelledby="cke_35_label" onkeydown="return CKEDITOR.tools.callFunction(49, event);" onfocus="return CKEDITOR.tools.callFunction(50, event);" onclick="CKEDITOR.tools.callFunction(51, this); return false;"><span class="cke_icon">&nbsp;</span><span id="cke_35_label" class="cke_label">Bold</span></a></span><span class="cke_button"><a id="cke_36" class="cke_off cke_button_italic" "="" href="javascript:void('Italic')" title="Italic" tabindex="-1" hidefocus="true" role="button" aria-labelledby="cke_36_label" onkeydown="return CKEDITOR.tools.callFunction(52, event);" onfocus="return CKEDITOR.tools.callFunction(53, event);" onclick="CKEDITOR.tools.callFunction(54, this); return false;"><span class="cke_icon">&nbsp;</span><span id="cke_36_label" class="cke_label">Italic</span></a></span><span class="cke_separator" role="separator"></span><span class="cke_button"><a id="cke_37" class="cke_off cke_button_numberedlist" "="" href="javascript:void('Insert/Remove Numbered List')" title="Insert/Remove Numbered List" tabindex="-1" hidefocus="true" role="button" aria-labelledby="cke_37_label" onkeydown="return CKEDITOR.tools.callFunction(55, event);" onfocus="return CKEDITOR.tools.callFunction(56, event);" onclick="CKEDITOR.tools.callFunction(57, this); return false;"><span class="cke_icon">&nbsp;</span><span id="cke_37_label" class="cke_label">Insert/Remove Numbered List</span></a></span><span class="cke_button"><a id="cke_38" class="cke_off cke_button_bulletedlist" "="" href="javascript:void('Insert/Remove Bulleted List')" title="Insert/Remove Bulleted List" tabindex="-1" hidefocus="true" role="button" aria-labelledby="cke_38_label" onkeydown="return CKEDITOR.tools.callFunction(58, event);" onfocus="return CKEDITOR.tools.callFunction(59, event);" onclick="CKEDITOR.tools.callFunction(60, this); return false;"><span class="cke_icon">&nbsp;</span><span id="cke_38_label" class="cke_label">Insert/Remove Bulleted List</span></a></span><span class="cke_separator" role="separator"></span><span class="cke_button"><a id="cke_39" class="cke_button_outdent cke_disabled" "="" href="javascript:void('Decrease Indent')" title="Decrease Indent" tabindex="-1" hidefocus="true" role="button" aria-labelledby="cke_39_label" onkeydown="return CKEDITOR.tools.callFunction(61, event);" onfocus="return CKEDITOR.tools.callFunction(62, event);" onclick="CKEDITOR.tools.callFunction(63, this); return false;" aria-disabled="true"><span class="cke_icon">&nbsp;</span><span id="cke_39_label" class="cke_label">Decrease Indent</span></a></span><span class="cke_button"><a id="cke_40" class="cke_off cke_button_indent" "="" href="javascript:void('Increase Indent')" title="Increase Indent" tabindex="-1" hidefocus="true" role="button" aria-labelledby="cke_40_label" onkeydown="return CKEDITOR.tools.callFunction(64, event);" onfocus="return CKEDITOR.tools.callFunction(65, event);" onclick="CKEDITOR.tools.callFunction(66, this); return false;"><span class="cke_icon">&nbsp;</span><span id="cke_40_label" class="cke_label">Increase Indent</span></a></span><span class="cke_separator" role="separator"></span><span class="cke_button"><a id="cke_41" class="cke_button_justifyleft cke_on" "="" href="javascript:void('Align Left')" title="Align Left" tabindex="-1" hidefocus="true" role="button" aria-labelledby="cke_41_label" onkeydown="return CKEDITOR.tools.callFunction(67, event);" onfocus="return CKEDITOR.tools.callFunction(68, event);" onclick="CKEDITOR.tools.callFunction(69, this); return false;" aria-pressed="true"><span class="cke_icon">&nbsp;</span><span id="cke_41_label" class="cke_label">Align Left</span></a></span><span class="cke_button"><a id="cke_42" class="cke_off cke_button_justifycenter" "="" href="javascript:void('Center')" title="Center" tabindex="-1" hidefocus="true" role="button" aria-labelledby="cke_42_label" onkeydown="return CKEDITOR.tools.callFunction(70, event);" onfocus="return CKEDITOR.tools.callFunction(71, event);" onclick="CKEDITOR.tools.callFunction(72, this); return false;"><span class="cke_icon">&nbsp;</span><span id="cke_42_label" class="cke_label">Center</span></a></span><span class="cke_button"><a id="cke_43" class="cke_off cke_button_justifyright" "="" href="javascript:void('Align Right')" title="Align Right" tabindex="-1" hidefocus="true" role="button" aria-labelledby="cke_43_label" onkeydown="return CKEDITOR.tools.callFunction(73, event);" onfocus="return CKEDITOR.tools.callFunction(74, event);" onclick="CKEDITOR.tools.callFunction(75, this); return false;"><span class="cke_icon">&nbsp;</span><span id="cke_43_label" class="cke_label">Align Right</span></a></span><span class="cke_button"><a id="cke_44" class="cke_off cke_button_justifyblock" "="" href="javascript:void('Justify')" title="Justify" tabindex="-1" hidefocus="true" role="button" aria-labelledby="cke_44_label" onkeydown="return CKEDITOR.tools.callFunction(76, event);" onfocus="return CKEDITOR.tools.callFunction(77, event);" onclick="CKEDITOR.tools.callFunction(78, this); return false;"><span class="cke_icon">&nbsp;</span><span id="cke_44_label" class="cke_label">Justify</span></a></span><span class="cke_separator" role="separator"></span></span><span class="cke_rcombo" role="presentation"><span id="cke_45" class="cke_fontSize cke_off" role="presentation"><span id="cke_45_label" class="cke_label">Size</span><a hidefocus="true" title="Font Size" tabindex="-1" href="javascript:void('Size')" role="button" aria-labelledby="cke_45_label" aria-describedby="cke_45_text" aria-haspopup="true" onkeydown="CKEDITOR.tools.callFunction( 80, event, this );" onfocus="return CKEDITOR.tools.callFunction(81, event);" onclick="CKEDITOR.tools.callFunction(79, this); return false;"><span><span id="cke_45_text" class="cke_text cke_inline_label">Size</span></span><span class="cke_openbutton"><span class="cke_icon"></span></span></a></span></span><span class="cke_toolgroup" role="presentation"><span class="cke_separator" role="separator"></span></span><span class="cke_rcombo" role="presentation"><span id="cke_46" class="cke_styles cke_off" role="presentation"><span id="cke_46_label" class="cke_label">Styles</span><a hidefocus="true" title="Formatting Styles" tabindex="-1" href="javascript:void('Styles')" role="button" aria-labelledby="cke_46_label" aria-describedby="cke_46_text" aria-haspopup="true" onkeydown="CKEDITOR.tools.callFunction( 83, event, this );" onfocus="return CKEDITOR.tools.callFunction(84, event);" onclick="CKEDITOR.tools.callFunction(82, this); return false;"><span><span id="cke_46_text" class="cke_text cke_inline_label">Styles</span></span><span class="cke_openbutton"><span class="cke_icon"></span></span></a></span></span><span class="cke_rcombo" role="presentation"><span id="cke_47" class="cke_format cke_off" role="presentation"><span id="cke_47_label" class="cke_label">Format</span><a hidefocus="true" title="Paragraph Format" tabindex="-1" href="javascript:void('Format')" role="button" aria-labelledby="cke_47_label" aria-describedby="cke_47_text" aria-haspopup="true" onkeydown="CKEDITOR.tools.callFunction( 86, event, this );" onfocus="return CKEDITOR.tools.callFunction(87, event);" onclick="CKEDITOR.tools.callFunction(85, this); return false;"><span><span id="cke_47_text" class="cke_text">Normal</span></span><span class="cke_openbutton"><span class="cke_icon"></span></span></a></span></span><span class="cke_toolbar_end"></span></span></div><a title="Collapse Toolbar" id="cke_48" tabindex="-1" class="cke_toolbox_collapser" onclick="CKEDITOR.tools.callFunction(88)"><span>▲&lt;/span></a></td></tr><tr role="presentation"><td id="cke_contents_About" class="cke_contents" style="height: 200px;" role="presentation"><span id="cke_52" class="cke_voice_label">Press ALT 0 for help</span><iframe style="width: 576px; height: 100%;" frameborder="0" aria-describedby="cke_52" title="Rich text editor, About" src="" tabindex="-1" allowtransparency="true"></iframe></td></tr><tr role="presentation"><td id="cke_bottom_About" class="cke_bottom" role="presentation"><div class="cke_resizer cke_resizer_ltr" title="Drag to resize" onmousedown="CKEDITOR.tools.callFunction(48, event)"></div><span id="cke_path_About_label" class="cke_voice_label">Elements path</span><div id="cke_path_About" class="cke_path" role="group" aria-labelledby="cke_path_About_label"><a id="cke_elementspath_32_1" href="javascript:void('body')" tabindex="-1" title="body element" hidefocus="true" onkeydown="return CKEDITOR.tools.callFunction(46,1, event );" onclick="CKEDITOR.tools.callFunction(45,1); return false;" role="button" aria-labelledby="cke_elementspath_32_1_label">body<span id="cke_elementspath_32_1_label" class="cke_label">body element</span></a><a id="cke_elementspath_32_0" href="javascript:void('p')" tabindex="-1" title="p element" hidefocus="true" onkeydown="return CKEDITOR.tools.callFunction(46,0, event );" onclick="CKEDITOR.tools.callFunction(45,0); return false;" role="button" aria-labelledby="cke_elementspath_32_0_label">p<span id="cke_elementspath_32_0_label" class="cke_label">p element</span></a><span class="cke_empty">&nbsp;</span></div></td></tr></tbody></table></span></span></span>

Answer 1

您已经对您的 html 字符串进行了双重编码<，并且已经完成<，结果就是您所拥有的。这样做可能是因为您已经准备好文本 html 编码，并且您使用 htmlEncode 再次呈现在页面上。

这是您的代码，在同一文本上使用正确的编码

http://jsfiddle.net/PX5Mg/1/

<textarea cols="20" id="About" name="About" rows="2" > 
    // double encoding !
    &amp;lt;p&amp;gt;dasfdsa&amp;lt;/p&amp;gt;&lt;br>

    // single encoding. I have left the > out of encoding, but you can encode that too
    &lt;strong>plus&lt;/strong>
    &lt;br>&lt;b>test&lt;/b>
</textarea>