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?

Have you tried calling `.setData( '{{ contents[0].content|raw }}' );`. Probably your quotation marks brake your javascript. Can you show us the rendered output, please? — kekub, Apr 15 '14 at 09:13
@kekub The CKEditor is still not displayed. Error "Uncaught SyntaxError: Unexpected token ILLEGAL " — Lumiere, Apr 15 '14 at 09:34
@kekub The rendered output is : ![Rendered Output](http://i.imgur.com/jjstFR3.jpg). — Lumiere, Apr 15 '14 at 10:33
I thought your code would produce an javascript error. (It does). But the rendered code you posted is valid javascript. I do not know what the problem then is. — kekub, Apr 15 '14 at 10:44
How about if you dump the twig variable in the textarea directly not in the `CKEDITOR.instances` command? — Javad, Apr 15 '14 at 16:16
@Javad You can mark the above reply as the answer...It worked.. — Lumiere, May 12 '14 at 08:12

score 1 · Accepted Answer · answered May 12 '14 at 15:10

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>

answered May 12 '14 at 15:10

Javad

4,339
3
21
36

score 0 · Answer 2 · edited May 23 '17 at 12:17

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.

Set value to CKEditor before-hand

2 Answers2