tinyMCE的AJAX保存

Question

我所看到的关于TinyMCE的和Ajax的许多职位数据，但我无法得到它的工作 - 而不是通过触发tinyMCE.triggerSave();不通过重写提交，而不是通过触发tinyMCE.get("elm1").save();

这里是我的代码：

$('#ss').submit(function (e) { 
     e.preventDefault(); 
     var ed = tinyMCE.get('elm1'); 
     var data = ed.getContent() 

    // tinyMCE.triggerSave(); 
    // tinyMCE.get("elm1").save(); 

    // var data = $(this).serialize(); 
     console.log(data); 
     $.ajax({ 
      type:  'POST', 
      cache:  false, 
      url:  'xtras/ssheetsave.php', 
      data:  data, 
      success: function(){ 
         console.log("Updates have successfully been ajaxed"); 
      } 
     }); 
     return false; 
    }); 

形式：

<form id="ss" method="post" style="margin-top: 40px;"> 
    <input type="hidden" id="cat_id" name="cat_id" value="<?php echo $id; ?>"> 
    <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%"> 
       </textarea> 

    <input type="submit" name="save" value="Submit" /> 
    <input type="reset" name="reset" value="Reset" /> 
</form> 

和tinyMCE的：

tinyMCE.init({ 
     // General options 
     mode : "textareas", 
     theme : "advanced", 
     plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave,visualblocks", 
//  save_onsavecallback : "ajaxSave", 

     // Theme options 
     theme_advanced_buttons1 : "save,cancel,|,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,|,forecolor,backcolor", 
     theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,cleanup,help,code,tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,advhr", 
     theme_advanced_toolbar_location : "top", 
     theme_advanced_toolbar_align : "left", 
     theme_advanced_statusbar_location : "bottom", 
     theme_advanced_resizing : true, 

     // Style formats 
     style_formats : [ 
      {title : 'Bold text', inline : 'b'}, 
      {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}}, 
      {title : 'Red header', block : 'h1', styles : {color : '#ff0000'}}, 
      {title : 'Example 1', inline : 'span', classes : 'example1'}, 
      {title : 'Example 2', inline : 'span', classes : 'example2'}, 
      {title : 'Table styles'}, 
      {title : 'Table row 1', selector : 'tr', classes : 'tablerow1'} 
     ], 

     // Replace values for the template plugin 
     template_replace_values : { 
      username : "Some User", 
      staffid : "991234" 
     } 
    }); 

有人能帮我搞定这个工作吗？ - 基本上，我甚至不得到控制台数据console.log(data);

Answer 1

基本上我得到它通过引入on()监听工作：

$(document).on('submit','#ss',function (e) { 
    e.preventDefault(); 
    var ed = tinyMCE.get('elm1'); 
    var data = ed.getContent(); 
    var cat_id = $('#cat_id').val(); 

    console.log(cat_id); 
    $.ajax({ 
     type:  'GET', 
     cache:  false, 
     url:  'xtras/ssheetsave.php', 
     data:  'data=' + escape(data) + '&cat_id=' + cat_id, 
     success: function(){ 
        $("#ss").remove(); 
        $("#output").html(data); 
     } 
    }); 
    return false; 
}); 

Answer 2

你需要使用“elm1”而不是“内容”

var ed = tinyMCE.get('elm1'); 

Answer 3

您需要在原始文本区域中使用“名称”值，并使用“getContent（）”获取内容

这是直接从它们的d ocumentation。

<script> 
tinymce.init({ 
    selector: "textarea", 
    plugins: "save", 
    toolbar: "save", 
    save_enablewhendirty: true, 
    save_onsavecallback: function() { 
         // USE THIS IN YOUR AJAX CALL 
       alert(tinyMCE.get('ajax_text').getContent()); 
     } 
}); 
</script> 

<textarea name="ajax_text" /></textarea> 

Answer 4

这是一个完整的工作示例，略有不同的JS：

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://tinymce.cachefly.net/4.1/tinymce.min.js"></script> 

<textarea id="prjOView" name="prjOView" rows="8" cols="73"></textarea> 
<button id="btnProjSave">Save</button> 

注：在我的情况，这是不够的，仅设置name=属性。我必须同时设置name和id属性，并分配两个相同的值（如上所示）。

JS/jQuery的：

$(document).ready(function(){ 

    tinymce.init({ 
     selector: '#prjOView', 
     theme: 'modern', 
     width: 600, 
     height: 300, 
     plugins: [ 
      'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker', 
      'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking', 
      'save table contextmenu directionality emoticons template paste textcolor' 
     ], 
     content_css: 'css/content.css', 
     toolbar: 'insertfile undo redo | styleselect | sizeselect | bold italic | fontselect | fontsizeselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons' 
    }); //tinyMCE 

    $('#btnProjSave').click(function(){ 
     var mi = tinymce.get('prjOView').getContent(); 
     alert(mi); 

     //The data is now in var `mi`, use AJAX to save via PHP 
     $.ajax({ 
      type: 'post', 
      url: 'path_to_your_php_file.php', 
      data: 'tinydata=' +mi, 
      success:function(){ 
      } 
     }); 
    }); 

}); //END document.ready 

文件path_to_your_php_file.php：

<?php 
    var $tinydata = $_POST['tinydata']; 
    //the data is now in the above var. Do what you need to do. 

---

有关如何使用AJAX的一些基本示例，请参阅this post