CODEWITHSUNDEEP
javascriptphphtmltinymce
showkey
showkey

Reputation: 358

How to pass content in TinyMCE's textarea to a PHP file directly instead of sending via AJAX?

I build a simple webpage with embeded TinyMCE.

The HTML part:

<form method="post" action="dump.php">
<div id="main">
<div id="container_left">
        <textarea id="mytextarea"></textarea>
        <input id="submit" type="submit" value="submit">            
</div>
<div id="show_right"></div>
</div>
</form>

The JavaScript part.

<script src="tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    height: 250,
    plugins: [
        "code advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "code insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    setup: function (editor) {
        editor.on('init keydown change', function (e) {
           document.getElementById('show_right').innerText = editor.getContent();
        });
    }
});
</script>

Now I want to print content in the TinyMCE's editor, after you click the submit button.

The dump.php

<?php
    print_r($_POST);
?>

Why nothing print by dump.php?
I can send info to the dump.php via AJAX method.
1.Remove <form method="post" action="dump.php"></form> in html part.
2.Add the following js code in the JavaScript part. 

<script>
function send(){
    var data = tinyMCE.get('mytextarea').getContent();
    var ajax = new XMLHttpRequest();
    ajax.open('POST','dump.php',false);
    ajax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    ajax.send('data='+data);    
} 
ob = document.getElementById("submit");
ob.addEventListener("click",send);
</script>

I have tried that it can pass content which I type in the textarea whose id is mytextarea to dump.php and dump.php can print the array properly.

My issue is how to pass content in TinyMCE's textarea to a PHP file directly instead of sending it via AJAX? Do the work without AJAX.

Upvotes: 6

Views: 2361

Answers (3)

acucchieri
acucchieri

Reputation: 582

You don't need iframe, just add this to your tinymce config to keep original textarea sync with the editor

tinymce.init({
selector: '#mytextarea',
setup: function (editor) {
    editor.on('change', function () {
        editor.save();
    });
}
});

Quick and dirty poc

<!DOCTYPE html>
<html>
<head>
  <script src='https://cloud.tinymce.com/stable/tinymce.min.js'></script>
  <script>
  tinymce.init({
    selector: '#mytextarea',
    setup: function (editor) {
        editor.on('change', function () {
            editor.save();
        });
    }
  });
  </script>
</head>

<body>
<?php if ('POST' === $_SERVER['REQUEST_METHOD']): ?>
  <pre><?php print_r($_POST) ?></pre>
<?php else: ?>
    <form method="post">
      <label for="mytitle">Title</label>
      <input type="text" id="mytitle" name="title" value="">
      <textarea id="mytextarea" name="content"></textarea>
      <button type="submit" name="submit">Submit</button>
    </form>
<?php endif; ?>
</body>
</html>

Upvotes: 0

Bharata
Bharata

Reputation: 14175

Yes, you can send it without AJAX with an hidden iframe which has as target attribute the name value from iframe. The original page will not reload. The answer from your server will be loaded in hidden iframe. In that case, you have to set the iframe display to none.

<iframe name="server_answer" style="display:none"></iframe>
<form method="post" action="dump.php" target="server_answer">
    <div id="main">
    <div id="container_left">
        <textarea id="mytextarea" name="mytext"></textarea>
        <input id="submit" type="submit" value="submit">            
    </div>
    <div id="show_right"></div>
    </div>
</form>

For your textarea you have also to write some name as attribute, for example like name="mytext" because on the server side you want get the text, which will sended. And because you did not write this name you can not get it. In your AJAX solution you do it with ajax.send('data='+data);. In this case data is like the name of your textarea.

For your PHP script:

print($_POST["mytext"]); //mytext is name of textarea

Alternative solution

You could also display the submit form as a separate page inside the iframe, and when it gets submitted then the outer page will not reload. This solution does not use AJAX too.

Upvotes: 3

Joseph Nguyen
Joseph Nguyen

Reputation: 1

First, you must name for textarea. And "dump.php" :

<?php

print_r ($_POST["name_of_textarea"]);

?>

Upvotes: -2

Related Questions