2017-02-17 57 views
0
$(document).on('change', "input[name='child']", function() { 
    CKEDITOR.config.contentsCss = 'lib/bootstrap/css/bootstrap.css', 'lib/css/myStyle.css'; 
    CKEDITOR.config.extraPlugins = 'font'; 
    var pjID = {}; 
    var pjDesc = []; 
    $("input[name='child']:checked").each(function() { 
     pjDesc.push($(this).val()); 
    }); 
    if ($(this).prop("checked") == true) { 
     pjID.projectsk = $(this).val();    
     $.ajax({ 
      url: 'sample.php', 
      type: 'POST', 
      data: pjID, 
      success: function(result) { 
      var response = JSON.parse(result);      
      var content = CKEDITOR.instances.projectEditor.getData();   
      CKEDITOR.instances.projectEditor.setData(content + response.data[0].project_desc);    
      }, 
      error: function(error) { 
       console.log(error); 
      } 
     }); 
    } 
    else if ($(this).prop("checked") == false) {    
     var content = ""; 
     var contentVal = "";   
     $.each(pjDesc, function(key, val) { 
      pjID.projectsk = val;    
      $.ajax({ 
       url: 'sample.php', 
       type: 'POST', 
       data: pjID,      
       success: function(result) { 
        var response = JSON.parse(result); 
        console.log(response); 
        content = response.data[0].project_desc; 
        contentVal = contentVal+"<br>"+content; 
        console.log(contentVal);    
       }, 
       error: function(error) { 
        console.log(error); 
       } 

      }); 
      console.log('contentVal',contentVal); 
      CKEDITOR.instances.projectEditor.setData(contentVal); 
     }); 
    } 
    CKEDITOR.replace('projectEditor'); 
}); 

上面的代碼完全工作除了這條線CKEDITOR.instances.projectEditor.setData(contentVal)得到設定;. 我在控制檯中得到確切的輸出。但我無法設置ckeditor中的值。我嘗試過使用insertHtml,insertText和foocallback()。請幫我出值不在CKEditor的使用setData

回答

0

您必須將按照阿賈克斯的成功部分代碼。因爲你的行首先執行並且數據在它後面變化。

console.log('contentVal',contentVal); 
CKEDITOR.instances.projectEditor.setData(contentVal); 

只需將上述各行下面這些行

contentVal = contentVal+"<br>"+content; 
console.log(contentVal); 

您在控制檯上的可變印刷,因爲Ajax和Java腳本的異步行爲。你可以按照帖子就明白了:https://stackoverflow.com/a/23667087/2651863

我是個去修改代碼:

$(document).on('change', "input[name='child']", function() { 
     CKEDITOR.config.contentsCss = 'lib/bootstrap/css/bootstrap.css', 'lib/css/myStyle.css'; 
     CKEDITOR.config.extraPlugins = 'font'; 
// its better to initilize CKeditor immidiate after configuration 
CKEDITOR.replace('projectEditor'); 
     var pjID = {}; 
     var pjDesc = []; 
     $("input[name='child']:checked").each(function() { 
      pjDesc.push($(this).val()); 
     }); 
     if ($(this).prop("checked") == true) { 
      pjID.projectsk = $(this).val();    
      $.ajax({ 
       url: 'sample.php', 
       type: 'POST', 
       data: pjID, 
       success: function(result) { 
       var response = JSON.parse(result);      
       var content = CKEDITOR.instances.projectEditor.getData();   
       CKEDITOR.instances.projectEditor.setData(content + response.data[0].project_desc);    
       }, 
       error: function(error) { 
        console.log(error); 
       } 
      }); 
     } 
     else if ($(this).prop("checked") == false) {    
      var content = ""; 
      var contentVal = "";   
      $.each(pjDesc, function(key, val) { 
       pjID.projectsk = val;    
       $.ajax({ 
        url: 'sample.php', 
        type: 'POST', 
        data: pjID,      
        success: function(result) { 
         var response = JSON.parse(result); 
         console.log(response); 
         content = response.data[0].project_desc; 
         contentVal = contentVal+"<br>"+content; 
         console.log(contentVal); 
       // set data when actually it arrive 
       console.log('contentVal',contentVal); 
       CKEDITOR.instances.projectEditor.setData(contentVal);    
        }, 
        error: function(error) { 
         console.log(error); 
        } 

       }); 

      }); 
     } 

    }); 
+0

好迪帕克。我明白這是因爲ajax和javascript的異步行爲。我已經把代碼中的AJAX的成功一部分,但我沒有得到預期的輸出 – suna

+0

我更新註釋代碼。希望它可以幫助你 –

+0

沒有迪派克。它似乎沒有工作。感謝您及時的回覆!!! – suna