web-dev-qa-db-ja.com

TinyMCEテキストエリアとajaxを使用した投稿フォーム

私は、テキストエリアにtinyMCEを使用し、AJAXを介してフォームをPOSTしています。

しかし、textarea値を保存しようとすると、最初のクリックで古い値が使用されますが、2番目のクリックで更新された値が使用されます。

tinyMCE.triggerSave()を試してみましたが、うまくいきませんでした。

私もtinyMCE.get('myid').getContent()を試しましたが、それでも古い値が使用されます。

私のコードは次のとおりです。

    $(".submit").live("click", function () {
            tinyMCE.triggerSave();
            var f = $(this).parents("form");
            var action = f.attr("action");
            var serializedForm = f.serialize();
            //tinyMCE.triggerSave(); also tried putting here
            $.ajax({
                 type: 'POST',
                 url: action,
                 data: serializedForm,
                 async: false,
                 success: function (data, textStatus, request) {
                     $(".divform").html(data);
                 },
                 error: function (req, status, error) {
                     alert&("Error occurred!");
                 }
            });
    return false;
    });

助けてください、どんな助けでもいただければ幸いです

ajaxtinymcesave
14
Sanjay Panchal

tinymce.triggerSave();の代わりにこれを使用してください

$('#' + 'your_editor_id').html( tinymce.get('your_editor_id').getContent() );
11
Thariama

TinyMCEエディターを介して変更が行われたときに、非表示のテキストエリアの値を同期させるために、TinyMCEを次のように構成できます。

tinymce.init({
    selector: "textarea",
    setup: function (editor) {
        editor.on('change', function () {
            tinymce.triggerSave();
        });
    }
});

これにより、いつでもtextarea要素から最新の値に直接アクセスできます。

これはTinyMCE 4.0でテストされています

デモの実行場所： http://jsfiddle.net/9euk9/

43
Dan Malcolm

TinyMCE 3.xのDan Malcolmによって投稿された実装の代替実装は、次のようになります。

tinymce.init({
    selector: "textarea",
    setup: function (editor) {
        editor.onChange.add(function() {
            editor.save();
        });
    }
});

3.xでの作業と同様に、このバージョンではeditor.save の代わりに tinymce.triggerSaveは、ページ内のすべてのエディターではなく、現在のエディターのみを更新することを意味します。

3
HappyDog

@Dan Malcom、

ボックスのいずれかに何かを入力して[テキスト値を表示]ボタンを押すと、[元に戻す]矢印をクリックしても、[元に戻す]によって発生した新しいテキストではなく、すでに表示されているテキストが保持されることに気付きました」あなたの例を使用して、テキストエディターに何かが含まれているかどうかを確認しようとしたときに、それを発見しました。

私の例では、何かを入力すると、「元に戻す」を実行すると、その中のテキストが削除されますが、フォームは送信されます。

こちらの例をご覧ください：

enter code here

https://codepen.io/speedygonzales77/pen/bzMrqB

enter code here
0
speedygonzales77

ajaxを使用してデータを投稿する前に、このスクリプトを使用してください。これは使用する前にJavaScriptコードです。小さなmce jsファイルをロードして使用してください。

tinymce.triggerSave（）;

$.ajax({ 
    type: 'post', 
    url: 'autoSaveReport.php', 
    data: $('form').serialize(), 
    success: function (result) { 
        var redirectURL = window.location.pathname; 
        var redirectURL1 = redirectURL+"?incid="+result; 
        window.location = window.location+"?incid="+result; 
    } 
});
0
user2828818