CODEWITHSUNDEEP
javascripttinymce
Hayden
Hayden

Reputation: 857

TinyMCE not outputing text in the console

I have a form with a textarea, where I have implemented the tinyMCE WYSIWYG editor. When I cluck the submit button, the text is supposed to display in the console (for testing purposes). Instead, it is outputting blank. Am I forgetting something?

 <form>
    <textarea id="forumreply" style="width:100%;margin-top:1rem;height:10rem;"></textarea>
    <div id="replyerrbox" class="errboxtxt"></div>
    <button id="forumreplysubbut" class="btn btn--orange">Send</button>
</form>

<script> 


document.getElementById('forumreplysubbut').addEventListener('click',function(event){
    event.preventDefault();
    var err = new Array();
    var reply = document.getElementById('forumreply');
    var rpid = <?php echo $postId; ?>;
    var errbox = document.getElementById('replyerrbox');

    console.log(reply.value);
    /*
    if(reply.value.trim().length < 100){
        err.push(1);
    }
    if(err.length != 0){
        errbox.innerHTML = "Replies must be 100 characters in length.";
    }else{
        var dta = new FormData();
        dta.append('reply',reply.value);
        dta.append('rpid',rpid);
        var req = new XMLHttpRequest();
        req.onreadystatechange = function(){
            reply.value = null;
            getReplies();
        }
        req.open('POST','includes/processforumreply.php',true);
        req.send(dta);
    }*/


});
</script>

<script>
  tinymce.init({ selector:'textarea',
  branding:false, 
  menubar:false,
  mobile:{theme:'mobile'},
  plugins: 'emoticons',
  toolbar: 'undo redo | bold italic | link emoticons' });
</script>

Upvotes: 3

Views: 372

Answers (1)

Dmitry Nevzorov
Dmitry Nevzorov

Reputation: 615

TinyMCE mimics your textarea, actual editing is occuring in another element. So, you need to get it's content explicitly:

<script>
  tinymce.init({ selector:'textarea',
    //... your code
    init_instance_callback: function (editor) {
      document.getElementById('forumreplysubbut').addEventListener('click', function(){
        var resultingSource = editor.getContent()
        console.log(resultingSource)
      }
    }
  }
)
 </script>

Take a look on editor docs for other ways to get its instance.

Upvotes: 3

Related Questions