Question

我想在页面加载时在CKEditor中显示一些tet。如果我使用下面的代码将默认数据设置为CKEditor，它可以正常工作。

InnerLessonContent:<textarea name="editinnerlesson_content" id="editinnerlesson_innerlesson_content"></textarea>

<script src="{{ asset('js/ckeditor/ckeditor.js') }}" type="text/javascript"></script>
    <script>
                    // Replace the <textarea id="editor1"> with a CKEditor
                    // instance, using default configuration.
                    CKEDITOR.replace( 'editinnerlesson_innerlesson_content' );
                    CKEDITOR.instances['editinnerlesson_innerlesson_content'].setData( '<p>This is the editor data.</p>' );
    </script>
    <br><br>

但是当我使用下面的代码时，不再显示CKEditor。

<script>
                // Replace the <textarea id="editor1"> with a CKEditor
                // instance, using default configuration.
                CKEDITOR.replace( 'editinnerlesson_innerlesson_content' );
                CKEDITOR.instances['editinnerlesson_innerlesson_content'].setData( "{{ contents[0].content|raw }}" );
</script>

代码中的错误是什么？如何更正？

Answer 1

您可以直接在CKEDITOR.instances命令中转储textarea中的twig变量。所以尝试像

这样的东西

<textarea name="editinnerlesson_content" id="editinnerlesson_innerlesson_content">
   {{ contents[0].content|raw }}
</textarea>

Answer 2

再次查看截图后，错误很明显。

您的数据中有换行符。在JavaScript中，这些是不允许的。删除它们或用字符串“\ n”替换它们，例如。

// this is allowed
var foo = "foo bar";

// this is allowed:
var foo = "foo\nbar";

// this is not allowed:
var foo = "foo
bar";

我的原始答案如下：

三个想法：

1：您的数据或粘贴中有一些非打印中断字符。请参阅No visible cause for "Unexpected token ILLEGAL" - 请注意，这些字符可能不在数据中！特别是如果你使用copypaste任何东西（我在意外复制UTF BOM符号时遇到过这个问题）。要克服并测试此问题，请在十六进制编辑器中查看代码和数据和/或手动重写（从代码开始，它更容易）。如果你复制粘贴，他们可以很容易地在我放置管道的地方：

   CKEDITOR.replace( 'editinnerlesson_innerlesson_content' );|
|  CKEDITOR.instances['editinnerlesson_innerlesson_content'].setData(| |"|...|...|"| |);|

2：与评论中的Javad一样，我建议将数据直接转储到textarea，这可能会有所帮助，因为它不一定是有效的JS字符串。

3：我没错。CKEDITOR.replace()是一个异步函数，编辑器还没有准备好。我会尝试这样的事情：

<script>
    CKEDITOR.replace( 'editinnerlesson_innerlesson_content' );
    CKEDITOR.on('instanceReady', function(ev) {
        ev.editor.setData("<p>Confound these ponies!</p>"); // Replace with your data
    });
</script>

如果可行（未经测试的代码）但不像以前那样使用您的数据，则需要检查数据的格式。如果没有屏幕抓取，可以看到完整的渲染内容，但作为实际数据。

之前将值设置为CKEditor

2 个答案: