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

通过将 tinyMCE 代码放入我的 php ajax 文件中，我开始工作了。

let editorChangeHandlerId;
        tinymce.init({
            height: "400",
            selector: 'textarea',
            branding: false,
            plugins: 'media image',
            mediaembed_max_width: 300,
            image_dimensions: false,
            content_style: 'img {max-width: 100%;}',
            media_live_embeds: false,

            setup: function(editor) {
                // const tinyId=$('textarea').data('id');
                // console.log("ID: ",tinyId);
                editor.on('Paste Change input Undo Redo', function () {
                    clearTimeout(editorChangeHandlerId);
                    // const tinyId=$('this').data('id');
                    // tinyMCE.activeEditor.setContent(tinyId.defination);
                    editorChangeHandlerId = setTimeout(function() {
                        ajaxfunctions();
                        console.log('changed');
                        tinymce.get('textarea').save();

                    }, 100);
                });
            }
            // ,...
        });

在我的 ajaxfunctions() 中是我的 ajax 查询的工作代码，其中也有 const data = tinyMCE.get("textarea").save();

Answer 2

这是一个完整的工作示例，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

Answer 3

您需要在原始文本区域中使用“名称”值，然后通过“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>

Answer 4

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

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

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