如何使用 JQuery 向 CKEditor 添加数据

Posted 2023-02-16

【中文标题】如何使用 JQuery 向 CKEditor 添加数据

【英文标题】：How to add data to CKEditor using JQuery

【发布时间】：2011-01-07 16:16:53

【问题描述】：

每次加载页面时，我都需要使用 JQuery 将文本加载到 CK 编辑器中，以便从我使用的 CK 编辑器中获取数据

var editor_data = CKEDITOR.instances['editor1'].getData();

现在我可以使用类似的功能将数据放回编辑器吗？

我正在使用 ajax 来设置这样的数据

$.ajax(
  type: "POST",
  url: "/inc/ajax/basic.php?menu_id="+menu_id+"&info=3",
  success: function(msg)

    CKEDITOR.instances['editor1'].setData(msg);
  
);

我做错了什么

【问题讨论】：

你的标题说的是FCKEditor，但问题是在说CKEditor；它们实际上是两个独立的项目。你在这里问的是哪一个？

解释 setData() 方法的重要性，当使用带有 <textarea> 的 CKeditor 时：> 和 < 实体被转换为标签符号，参见 jsfiddle.net/9qu39

【参考方案1】：

试试这个：

CKEDITOR.instances['editor1'].setData(html)

其中 'html' 是一个包含要编辑的内容的字符串。

【讨论】：

这是正确的做法，但它只是不想在这种情况下工作 $.ajax( type: "POST", url: "/inc/ajax/basic.php? menu_id="+menu_id+"&info=3", 成功：function(msg) CKEDITOR.instances['editor1'].setData(msg); );

解释 setData() 方法的重要性，当使用带有 <textarea> 的 CKeditor 时：参见 jsfiddle.net/9qu39

【参考方案2】：

因为它不是一个数组 只需像这样替换实例

CKEDITOR.instances.editor1.setData(html)

【参考方案3】：

var editor = CKEDITOR.instances.help_ldesc;         
editor.setData(''); 
$.ajax(
url: urlstr, // Url to which the request is send
type: "POST",             // Type of request to be send, called as method
data:action:"ex_form", // Data sent to server, a set of key/value pairs (i.e. form fields and values)
contentType: false,       // The content type used when sending data to the server.
cache:false,             // To unable request pages to be cached
processData:false,        // To send DOMDocument or non processed data file it is set to false
success: function(data)   // A function to be called if request succeeds

    //alert(data);
    var data1=data.split("~`");
    $('#help_id').val(data1[0]);
    $('#help_title').val(data1[1]);
    $('#help_sdesc').val(data1[2]);                 

    editor.setData(''+data1[3]);    
    var edata = editor.getData();
    alert(edata);

);

使用此代码对我有用，并且 (help_ldesc) 是我的文本区域名称。

【参考方案4】：

您应该使用数据和发送查询字符串的方法，如下所示：

$(document).ready(function()

  var querystring="menu_id="+menu_id+"&info=3";
  $.ajax(
  method: "POST",
  url: "/inc/ajax/basic.php",
  data:querystring,
  success: function(msg)
   
     CKEDITOR.instances['editor1'].setData(msg);
   
  );
);

【参考方案5】：

var jqxhr = $.get( "file.php", function(data) 
CKEDITOR.instances.idOftextAreaName.setData( data );
    alert( "success" );
  )
.done(function() 
    //alert( "second success" );
)
.fail(function() 
    alert( "error" );
)
.always(function() 
   // alert( "finished" );
);

【讨论】：

将 idOftextAreaName 更改为您的 textarea 的 id。

欢迎您！请注意，您也可以单击答案下方的edit 并进行更新。这比对自己的答案发表评论更可取。

【参考方案6】：

CKEDITOR.instances['<%=ckEditor.ClientID%>'].setData(value);

【参考方案7】：

根据我在函数内部使用的经验，有时无法正常工作。我建议使用：

    $(document).ready(function () 
    ...
    // instance, using default configuration.
    CKEDITOR.replace('editor1');
    //set data
    CKEDITOR.instances['editor1'].setData(data);
    ...
    );