javascript之ckeditor 未在弹出对话框中加载通过 ajax 生成的元素

java哥阅读：29 2025-12-25 22:24:30 评论：0

我正在使用自定义表单并通过 ajax 调用生成表单元素，但 textarea 未使用 ckeditor 加载。此表单加载在弹出对话框上。这是我的代码:

ajax code: 
 
    jQuery.ajax({ 
    type: "POST", 
    url: "reg_arz_ajax2.php", 
    data: "book="+book_arzyabi, 
    dataType : "html", 
    success: function(response){ 
 
        $('#resp').html(response); 
                    ckeditor.replace('fname');  
        $("#fname").ckeditor(); 
    }, 
    error:function (xhr, ajaxOptions, thrownError){ 
        //On error, we alert user 
        alert(thrownError); 
    } 
}); 
 
$( "#dialog-form" ).dialog( "open"); 
 
});

PHP 代码:

    echo '<textarea class="ckeditor" cols="80" id="fname" name="fname" rows="10" >test</textarea>';

html代码:

  <html> 
 <head> 
 <script type="text/javascript" src="../include/ckeditor/ckeditor.js"></script> 
 <script type="text/javascript" src="../include/ckeditor/sample.js" ></script> 
 </head> 
 
 <body> 
 <form> 
 <fieldset> 
 <label for="name">Name</label> 
 <div id="resp" ></div> 
 </fieldset> 
 </form> 
 </body> 
 </html>

请帮我解决问题。

请您参考如下方法:

您需要手动将文本区域转换为 CKEditor 实例，因为通过分配类名进行替换仅在页面加载时完成一次。

There are samples on how to convert a textarea to a ckeditor instance ，基本上就是:

CKEDITOR.replace( 'textarea_id' )

所以在你的情况下你应该添加

CKEDITOR.replace( 'fname' )

到ajax成功回调。

请注意Javascript 区分大小写，因此您应该以大写形式编写CKEDITOR。 replace 之后的函数调用 ckeditor 也太多了。请参阅官方指南的示例。

标签:ajax

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。