无法在CK编辑器上获取数据

Question

I'm trying to bind data in CK Editor from database. But it is nor work properly, data is fetch but not display, display only when click on inspect element in Google Chrome.

HTML

 <textarea id="input" name="input"></textarea>

JS

<script>
 $(document).ready(function () {
    $("#input").ckeditor();
 });       
function BindData() {
 $("#input").val('This is CK Editor Demo');   
}
BindData();
</script>

Link Here

Answer 1

First, you got to wait for DOM to be ready, then you got to wait for editor to be ready, and finally you can bind your data:

// Wait for DOM to be ready.
$( document ).ready( function() {
   // Create an instance of the editor.
   $( '#input' ).ckeditor( function( textarea ) {
     // When the instance is ready, set some data.
     $( textarea ).val( 'This is CK Editor Demo!' );  
   } );
} );

Or with an external method:

function BindData() {
  $( '#input' ).val( 'This is CK Editor Demo!' );  
}

// Wait for DOM to be ready.
$( document ).ready( function() {
   // Create an instance of the editor.
   $( '#input' ).ckeditor( function() {
     // When the instance is ready, set some data.
     BindData();
   } );
} );

Read the official guide for the new jQuery adapter (since 4.2).

Answer 2

You load ckeditor and after you fill the textarea. No way, the ckeditor is loaded. An has not live update. You must change order.

<script>
function BindData() {
 $("#input").val('This is CK Editor Demo');   
}
BindData();

 $(document).ready(function () {
    $("#input").ckeditor();
 });       
</script>

Answer 3

You can use :

CKEDITOR.instances[ckeditorname].setData(yourdata)

To bind data after ckeditor instance

Answer 4

Try :

<script>
 $(document).ready(function () {
    $("#input").ckeditor();
    BindData();
 });

function BindData() {
    CKEDITOR.instances["input"].setData('This is CK Editor Demo');   
}

</script>

Calling BindData() function after ckeditor init.