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

您需要使用＆＃34;名称＆＃34;原始文本区域中的值，您可以使用＆＃34; getContent（）＆＃34;

获取内容

这直接来自他们的文档。

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

基本上我通过介绍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 3

你需要使用＆＃34; elm1＆＃34;而不是＆＃34;内容＆＃34;

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

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

tinyMCE ajax用于保存数据

4 个答案: