Set value to CKEditor before-hand

Question

I want to display some tet in the CKEditor when the page loads. If I use the below code to set default data to the CKEditor, it works fine.

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>

But when I use the below code, the CKEditor is no longer displayed.

<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>

What is the error in the code and how do I correct it?

Answer 1

You can dump the twig variable in the textarea directly not in the CKEDITOR.instances command. So try something like

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

Answer 2

After having another look at your screenshot, the error is obvious.

You have newline characters in your data. In JavaScript those are not allowed. Remove them or replace them with the string "\n" for example.

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

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

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

My original answer below:

---

Three ideas:

1: There are some non-printing breaking chars in your data or paste. See No visible cause for "Unexpected token ILLEGAL" - Note that these characters might not be in the data! Especially if you copypaste anything (I have had this issue when accidentally copypasting UTF BOM symbols). To overcome and test this issue, see the code and data in a hex editor and/or rewrite it by hand (start with the code, it's easier). If you do copy pasting they could easily in the places where I have put a pipe:

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

2: Like Javad in the comments I would recommend dumping the data directly to the textarea, it might help in that it doesn't have to be a valid JS string.

3: I am not wrong CKEDITOR.replace() is an asynchronous function and the Editor simply is not ready yet. I would try something like this:

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

If that works (untested code) but not with your data like before, you need to check how your data is formatted character by character. It would help to see the full rendered content without a screengrab but as actual data.