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

Posted 2023-03-14

【中文标题】在 ckeditor 中插入 html 会导致语法错误（laravel）

【英文标题】：Inserting html in ckeditor causes syntaxerror ( 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 我得到 <ul> <li>site one</li> <li>site two</li> <li>site 3</li> </ul>

editor.setData("$proposal->reference_sites");

好吧，3小时后我终于找到了问题所在。在数据库中，您也有“输入”实体，它们弄乱了 javascript，因为它会乱七八糟地在其中输入一个输入。

【参考方案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

检查这个参考***.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");