Question

我想在div中使用javascript获取CKeditor html源代码。然而，我尝试后看到当我试图获取源代码时，它会警告我想要的源代码，但在div中，它只显示我在编辑器中写的内容。我也希望div中的源代码......

function getdata(){
    var editor_data = CKEDITOR.instances.editor1.getData();
    var content = $("#datadiv").val();
    alert(editor_data); /*alerting the source code*/
    $("#datadiv").html(editor_data); /*showing just what I wrote on the editor..*/
    }

<textarea cols="80" id="editor1"  name="editor1" rows="10"></textarea>
<input type="button" onClick="getdata();" value="get" />

    <div id="datadiv"></div>

我理解为什么会发生这种情况..写<h2>Hello</h2>最终会在页面上显示一个h2粗体Hello。标签不会显示在浏览器上..但是如何显示源代码我写的浏览器是html ..如果它可能，那么它是怎么回事。？

Answer 1

在设置值之前，您需要对HTML进行编码。我从https://stackoverflow.com/a/7124052/694325获得了这个编码/转义函数 - 请试试这个！

function htmlEscape(str) {
    return String(str)
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
}

function getdata(){
    var editor_data = CKEDITOR.instances.editor1.getData();
    var content = $("#datadiv").val();
    alert(editor_data); /*alerting the source code*/
    $("#datadiv").html(htmlEscape(editor_data)); /*showing just what I wrote on the editor..*/
}

<textarea cols="80" id="editor1"  name="editor1" rows="10"></textarea>
<input type="button" onClick="getdata();" value="get" />
<div id="datadiv"></div>

CKeditor会警告源代码，但会在div中显示原始数据

1 个答案: