javascript - 当我禁用标准浏览器使用 javascript 提交时，为什么 Ckeditor 值返回空？

Question

我有一个使用 ckeditor 的 textarea 字段，但我试图通过 ajax 提交表单并阻止标准浏览器提交，但 ckeditor 返回一个空字段。我确实在互联网上进行了搜索，但似乎没有任何效果。

我的 Html 和 Javscript 代码列在下面提前致谢。

HTML

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

<form action="processors.php" method="post" enctype="multipart/form-data" 
id="MyUploadForm">
<input type="text" placeholder="Title" name="title">
<input type="file" name="file">
<textarea name="content" id="editor"></textarea>
<button id="submit-btn" class="btn btn-default" type="submit">Submit All</button>
</form>

Javascript

for(var instanceName in CKEDITOR.instances){
CKEDITOR.instances[instanceName].updateElement();
} //To allow ajax in ckeditor

     $('#MyUploadForm').submit(function() {
        $(this).ajaxSubmit(options);
        // always return false to prevent standard browser submit and page navigation
        return false;
    });

var options = {
        target:   '#output',   // target element(s) to be updated with server response
        beforeSubmit:  beforeSubmit,  // pre-submit callback
        success:       afterSuccess,  // post-submit callback
        uploadProgress: OnProgress, //upload progress callback
        resetForm: true        // reset the form after successful submit
    };

    //progress bar function
    function OnProgress(event, position, total, percentComplete)
    {
    //Progress bar
    $('#progressbox').show();
    $('#progressbar1').width(percentComplete + '%') //update progressbar percent complete
    $('#statustxt').html(percentComplete + '%'); //update status text
    if(percentComplete>50)
    {
        $('#statustxt').css('color','#000'); //change status text to white after 50%
    }
 }

//function to format bites bit.ly/19yoIPO
function bytesToSize(bytes) {
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
if (bytes == 0) return '0 Bytes';
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
}

//function to check file size before uploading.
function beforeSubmit(){
//check whether browser fully supports all File API
if (window.File && window.FileReader && window.FileList && window.Blob)
{
    var fsize = $('#FileInput')[0].files[0].size; //get file size
    var ftype = $('#FileInput')[0].files[0].type; // get file type
    //allow file types
    switch(ftype)
    {
  case 'image/png':
        case 'image/gif':
        case 'image/jpeg':
        case 'image/pjpeg':
        case 'text/plain':
        case 'text/html':
        case 'application/x-zip-compressed':
        case 'application/pdf':
        case 'application/msword':
        case 'application/vnd.ms-excel':
        case 'video/mp4':
            break;
        default:

            $("#output").html("<b>"+ftype+"</b> Unsupported file type!");
            return false
    }

    //Allowed file size is less than 5 MB (1048576)
    if(fsize>5242880)
    {
        $("#output").html("<b>"+bytesToSize(fsize) +"</b> Too big file! <br 
    />File is too big, it should be less than 5 MB.");
        return false
    }

    $('#submit-btn').hide(); //hide submit button
    $('#loading-img').show(); //hide submit button
    $("#output").html("");
    }
    else
    {
    //Output error to older unsupported browsers that doesn't support HTML5 
    File API
    $("#output").html("Please upgrade your browser, because your current browser lacks some new features we need!");
    return false;
}
}

每当我尝试使用 php 插入到数据库时，除了我的 textarea 之外，其他值都会被插入

Answer 1

我认为你必须移动

for(var instanceName in CKEDITOR.instances){
  CKEDITOR.instances[instanceName].updateElement();
}

在您的“提交”处理程序中。否则，该代码仅在页面加载时运行。这不好，因为文本区域仅包含加载页面时编辑器包含的内容(在您的情况下，它似乎什么都没有)。

相反，它需要在提交表单时运行，以便将编辑器插件中的最新内容复制到文本区域中。

 $('#MyUploadForm').submit(function(event) {
    event.preventDefault(); //this is instead of return false, but they are pretty much interchangeable. I think this is just a bit clearer.

    for(var instanceName in CKEDITOR.instances){
      CKEDITOR.instances[instanceName].updateElement();
    }

    $(this).ajaxSubmit(options);
});

归功于此答案:How to ajax-submit a form textarea input from CKEditor?提示。