programing

Ajax를 사용한 Tiny MCE 텍스트 영역 및 게시 양식

stoneblock 2023. 8. 22. 21:47

Ajax를 사용한 Tiny MCE 텍스트 영역 및 게시 양식

텍스트 영역에 작은 MCE를 사용하고 있으며 AJAX를 통한 POST 양식을 사용하고 있습니다.

그러나 텍스트 영역 값을 저장하려고 하면 첫 번째 클릭 시 이전 값을 사용하지만 두 번째 클릭 시 업데이트된 값을 사용합니다.

사용해 보았습니다.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;
    });

도와주세요, 어떤 도움이든 감사하겠습니다.

Tiny MCE 편집기를 통해 변경할 때 숨겨진 텍스트 영역의 값을 동기화하도록 Tiny MCE를 다음과 같이 구성할 수 있습니다.

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

이 기능을 사용하면 언제든지 텍스트 영역 요소에서 직접 최신 값에 액세스할 수 있습니다.

TinyMCE 4.0에서 테스트되었습니다.

데모 실행 위치: http://jsfiddle.net/9euk9/

다음 대신 이 옵션tinymce.triggerSave();

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

Dan Malcolm이 TinyMCE 3.x용으로 게시한 것에 대한 대체 구현은 다음과 같습니다.

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

이 버전은 3.x에서 작업할 뿐만 아니라 다음을 사용합니다.editor.save대신에tinymce.triggerSave즉, 페이지의 모든 편집자가 아닌 현재 편집자만 업데이트합니다.

Ajax를 사용하여 데이터를 게시하기 전에 이 스크립트를 사용합니다.사용 전 자바스크립트 코드입니다. 작은 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; 
    } 
});

저는 잘 작동합니다.

tinymce.triggerSave();

아약스 포스트 앞에 놓으십시오.

시간이 흘렀지만 나는 오늘 이 해결책을 찾았습니다.

양식을 직렬화하기 전에 다음 방법을 사용하여 편집기를 저장해야 합니다.

tinymce.activeEditor.save();
var serializedForm = f.serialize();

아마 이것은 어떤 동지를 도울 것입니다.

여러 인스턴스의 경우:

tinymce.init({
    mode : "specific_textareas"
    ,body_class: 'tinymceclass'
    ,setup: function (editor) {
        editor.onChange.add(function() {
            $('#' + this.id).html( tinymce.get(this.id).getContent() );
        });
    }
});

언급URL : https://stackoverflow.com/questions/14393512/tinymce-textarea-and-post-form-using-ajax