javascript - CK 编辑器上未获取数据

Question

我正在尝试从数据库中绑定 CK 编辑器中的数据。但它也不能正常工作，数据是获取但不显示，只有在谷歌浏览器中点击检查元素时才会显示。

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>

关联Here

Answer 1

首先，你必须等待 DOM 准备好，然后你必须等待编辑器准备好，最后你可以绑定你的数据：

// 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!' );  
   } );
} );

或使用外部方法：

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();
   } );
} );

阅读新的 jQuery 适配器的官方指南（从 4.2 开始）。

Answer 2

您加载 ckeditor 并在填充 textarea 之后。没办法，ckeditor被加载了。没有实时更新。你必须改变顺序。

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

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

Answer 3

您可以使用 ：

CKEDITOR.instances[ckeditorname].setData(yourdata)

在 ckeditor 实例之后绑定数据

Answer 4

尝试 ：

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

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

</script>

BindData()ckeditor init 后调用函数。