TinyMCE ajax для сохранения данных

Я видел много сообщений о tinyMCE и ajax, но я не мог заставить его работать-не путем запуска tinyMCE.triggerSave(); не путем переопределения submit и не путем запуска 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);

7
ajax tinymce

4 ответов

вам нужно использовать значение " name "в исходном текстовом поле, и вы получите содержимое с помощью"getContent ()"

это прямо из их документации.

<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>
6

в основном я получил его работу, представив 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;
});
4

вам нужно использовать "elm1" вместо "content"

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

вот полный рабочий пример, с немного другим 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 и 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, см. этот пост

0