0

ckeditor 5, v1.11.1

I have initialised an editor as follows:

<textarea name="content" id="editor"></textarea>

<script>
ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        console.log( editor );
    } )
    .catch( error => {
        console.error( error );
    } );
</script>

I am making an ajax call (via jquery) and attempting to populate the editor with the response:

<script>
    $(function() { 
        $.ajax({
            url: '/get-editor-data',
            method: 'get'
        }).done(function (response) {
            $('#editor').html(response.comment);
        });
    });
</script>

The ajax request is running successfully and returning valid JSON:

{"comment":"foo"}

So the content "foo" should appear in the editor.

But I'm getting an editor without any content in it.

If I disable ckeditor - by commenting out the first block of js (ClassicEditor...) - so it's just a vanilla textarea the content is populated correctly.

So how do I get the content in the editor in this way?

Andy
  • 5,142
  • 11
  • 58
  • 131
  • 1
    https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/basic-api.html#setting-the-editor-data –  Nov 29 '18 at 11:11
  • I've read that. Which is great, but where does `editor.setData( );` go?? – Andy Nov 29 '18 at 11:13
  • Not sure why people are downvoting this. `Uncaught TypeError: editor.setData is not a function`. According to the docs `editor` should work from the initialisation code. But it isn't. – Andy Nov 29 '18 at 11:20
  • Exactly where you have `$('#editor').html(response.comment);` right now. –  Nov 29 '18 at 11:20
  • Right, except that doesn't work at all. See the previous comment. It's giving an error in the console saying `editor.setData is not a function`. I've done my initialisation code exactly as per the documentation which says "The `editor` variable from the examples above should enable that." – Andy Nov 29 '18 at 11:22
  • 2
    You need to grab the variable and store it in your own so you can access it later: https://jsfiddle.net/khrismuc/9pqL485a/ –  Nov 29 '18 at 11:24
  • how and where did you define `editor` in your code, though? Please update the question with your full attempt to use the CKEditor code, including the error message, then it's 100% clear precisely what you have and haven't done. At the moment, `editor` is only defined within one callback. It won't exist outside that scope. – ADyson Nov 29 '18 at 11:24
  • @ChrisG — **No**, that's a dangerous race condition. [Don't try to make globals inside async code](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call). – Quentin Nov 29 '18 at 11:27
  • Note that `html()` is incorrect for setting value of a ` – charlietfl Nov 29 '18 at 11:29
  • @Quentin that example is nothing I would actually use and it shouldn't be regarded as such. That's why I posted it as comment; to show the basic idea. However in the case of implementing "Load document" functionality, how would it work otherwise? –  Nov 29 '18 at 11:32

1 Answers1

4

Look at the documentation.

You have to call editor.setData(…);.

You have editor defined here:

.then( editor => {

… so to keep that variable in scope you need to either:

  • Move the entire editor initialisation section into your Ajax callback (replacing $('#editor').html(response.comment))
  • Move the entire Ajax call code into that then callback
  • Wrap both promises in Promise.all and get the editor and data out in the resulting array.

Note, this is not a live demo because Stackoverflow's sandboxing is incompatible with CKEditor's attempt to use cookies resulting in an exception.

function init_editor() {
  console.log(1);
  return ClassicEditor
    .create(document.querySelector("#editor"));
}

function get_data() {
  console.log(2);
  return $.ajax({
    url: "https://cors-anywhere.herokuapp.com/https://stackoverflow.com/humans.txt",
    method: "get"
  });
}

$(function() {
  var promises = [init_editor(), get_data()];
  Promise.all(promises).then(function(results) {
    results[0].setData(results[1]);
  });
});
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Thanks, this is correct and a helpful response. However, the documentation doesn't make that clear at all. Therefore why the question was asked. People have downvoted it like it's a stupid question. Why would someone necessarily just know/assume this if the docs say "The editor variable from the examples above should enable that."? Thanks though. – Andy Nov 29 '18 at 11:28
  • 2
    @Andy ... you were trying to set the contents using `html()`. You weren't even *trying* to use `editor.setData()`, which means you didn't even look at the docs for how to do this. Why would you now try and twist this into a fault of the documentation (which is perfectly clear in my book)...? It's not like you asked `I'm trying to do "editor.setData()" but I'm getting error x` –  Nov 29 '18 at 11:37
  • @Andy — It is reasonable to assume that the example using a variable called `editor` is using the *same* variable called `editor` from the previous example. There's nothing else it could reasonably be. – Quentin Nov 29 '18 at 11:38
  • 1
    I've got a response to the problem now, so no point in arguing about it. If you read the comment I've said I read about the `setData()` method but was unclear on how to use this in terms of an ajax request. Maybe it's just one of those days for me but I don't think the documentation is that clear on how you'd use it - and an ajax response to get the content is probably a common scenario. Thank you for your most valuable input anyway :) – Andy Nov 29 '18 at 11:41
  • Btw, one can also set the textarea content, *then* init the editor. That way one doesn't need `setData()`. –  Nov 29 '18 at 12:00