capturing TinyMCE form textarea

Question

I've been unable to get the value of a TinyMCE textarea, I just cant get the value from it?

This is my form (oh so simple):

<div id="pow_form_container">
    <form id="pow_content_form">        
        <textarea name="pow_content" id="tiny" style="width:100%">
            <? echo $pow; ?>
        </textarea>
        <input type="hidden" id="pow" name="pow" />
    </form>
</div>

And this is the JQuery ive been using to tray and get the content of the editor

    save_pow: function (job_id) {
        var editor = tinymce.get("tiny"),content = editor.getContent();
        $.post('/jobs/save_pow/' + job_id, $('#pow_content_form').serialize(), function (response) {

            alert(content);

            if (response.status == 'ok') {
                tinymce.EditorManager.execCommand('mceRemoveEditor',true, "tiny");
                Common_UI.dialog_close('edit_pow_dialog');

            }
        });
    },

But what gets posted is :

pow_content=++++%09%09++++%09&pow=

WTF is that?

I've tried things like:

tinyMCE.triggerSave();

SO

save_pow: function (job_id) {
    tinyMCE.triggerSave();
    $.post('/jobs/save_pow/' + job_id, $('#pow_content_form').serialize(), function (response) {

        if (response.status == 'ok') {
            Common_UI.dialog_close('edit_pow_dialog');

        }
    });
},

But that doesn't change anything, how can it be this hard? Have a missed something?

I am initializing tinyMCE with this as the text editor is on a jquery UI popup dialog and its the only way I could get the editor to show: edit_pow: function (job_id) { $.get('/jobs/edit_pow/' + job_id, function (data) {

            Common_UI.dialog('edit_pow_dialog', 'Edit Programme of Works', data, {
                'Save': function () {
                    method.jobs.save_pow(job_id);
                }
            });
            tinyMCE.init({ selector:'#tiny' });

        });
    },

score 0 · Answer 1 · edited May 23 '17 at 12:33

0

You can get the content of the editor with getContent():

var editor = tinymce.get("tiny"),
    content = editor.getContent();

You should also be aware that you cannot re-init tinyMCE without destroying any previous instances (see this answer). So before the dialog_close you should remove the tinyMCE instance:

tinymce.EditorManager.execCommand('mceRemoveEditor',true, "tiny");

edited May 23 '17 at 12:33

Community

1
1

answered Aug 24 '16 at 14:48

mhu

17,720
10
62
93

I get the following error when including your code above: TypeError: tinyMCE.activeEditor is null var content = tinyMCE.activeEditor.getContent(); – frobak Aug 24 '16 at 14:53
Is tinyMCE initialized – mhu Aug 24 '16 at 15:06
Could you add your tinyMCE init statement to the question? What is the value of the `tinyMCE.editors` property? – mhu Aug 24 '16 at 15:17
Your code seems legit. You should check the properties of the tinymce object, before the `method.jobs.save_pow()` function is called. – mhu Aug 24 '16 at 15:57
OK, thanks for your help on this. I've implemented your suggestions above and also edited the questions with the updated code. I am still getting errors though: TypeError: editor is null var editor = tinymce.get("tiny"),content = editor.getContent(); – frobak Aug 24 '16 at 15:58
How do I check properties? – frobak Aug 24 '16 at 15:59

capturing TinyMCE form textarea

1 Answers1