在 ckeditor 中插入 html 会导致语法错误（laravel）答案

【问题标题】：Inserting html in ckeditor causes syntaxerror ( laravel )在 ckeditor 中插入 html 会导致语法错误（laravel）
【发布时间】：2019-08-23 16:17:55
【问题描述】：

我正在 laravel 中试用 CKeditor，但在将 html 插入编辑器时遇到了问题。附加编辑器后，我想设置值，以便您可以编辑已经存在的值。

HTML：

@if (!empty($proposal->reference_sites))
    <div class="form-group row mb-4">
        <label for="reference_sites" class="col-sm-3 col-form-label form-control-lg">Reference sites:</label>
        <div class="col-sm-10" id="reference_sites"></div>
    </div>
@endif

JS：

if($('#reference_sites').length){
    $output = "<textarea id='ckeditor-rs' name='ckeditor-rs' rows='10' cols='80'></textarea>";
    $('#reference_sites').append($output);
    CKEDITOR.replace('ckeditor-rs');

    var editor = CKEDITOR.instances['ckeditor-rs'];
    editor.setData("{!!html_entity_decode($proposal->reference_sites)!!}");

    }else{
        console.log("couldn't append ckeditor in rs");
    }

如您所见，我正在尝试解码 HTML 并将其设置为 CKeditor 的 HTML。

$proposal->reference_sites 包含此 HTML：

<ul>
    <li>site one</li>
    <li>site two</li>
    <li>site 3</li>
</ul>

错误：Uncaught SyntaxError: Invalid or unexpected token <

我不完全确定是什么导致了这个错误，因为当我只解码一个包含<p>some text</p> 的变量时，它会将some text 插入到编辑器中。

非常感谢任何帮助！

【问题讨论】：

尝试在没有 html_entity_decode 的情况下进行
返回相同的错误，但不是 html 我得到 &lt;ul&gt; &lt;li&gt;site one&lt;/li&gt; &lt;li&gt;site two&lt;/li&gt; &lt;li&gt;site 3&lt;/li&gt; &lt;/ul&gt;
editor.setData("{$proposal->reference_sites}");
好吧，3小时后我终于找到了问题所在。在数据库中，您也有“输入”实体，它们弄乱了 javascript，因为它会乱七八糟地在其中输入一个输入。

标签： javascript html laravel ckeditor laravel-blade

【解决方案1】：

试试下面的，

if($('#reference_sites').length){
$output = "<textarea id='ckeditor-rs' name='ckeditor-rs' rows='10' cols='80'></textarea>";
$('#reference_sites').append($output);
CKEDITOR.replace('ckeditor-rs');

var editor = CKEDITOR.instances['ckeditor-rs'];
editor.setData("{{$proposal->reference_sites}}");

}else{
    console.log("couldn't append ckeditor in rs");
}

【讨论】：

这会将{$proposal->reference_sites} 插入为html。哪个是变量名而不是变量的值。
我假设 $proposal->reference_sites 包含 html，你可以尝试回显为 html 字符串 editor.setData("reference_sites ?>");如果不是，那么你会犯一些语法错误
就像我在原始问题中所说的那样，错误是：Uncaught SyntaxError: Invalid or unexpected token
检查这个参考stackoverflow.com/questions/3143698/…
让我们continue this discussion in chat.

【解决方案2】：

你可以试试这个代码：

if($('#reference_sites').length){
    $output = "<textarea id='ckeditor-rs' name='ckeditor-rs' rows='10' cols='80'></textarea>";
    $('#reference_sites').append($output);
    CKEDITOR.replace('ckeditor-rs');

    for (var i in CKEDITOR.instances) {
        CKEDITOR.instances[i].on('change', function() { 
            CKEDITOR.instances[i].updateElement() 
        });
    }
}else{
    console.log("couldn't append ckeditor in rs");
}

【讨论】：