Saving tinymce textarea content to file

php, tinymce

Solution

The question itself comes down to :

How to save HTML content of TinyMCE into a file.

Well, first of all, you need:

1) Get content of editor 2) Send this content to PHP script 3) Implement some function that would save that content into a file

Getting content Make sure you are getting it the way it should work.

For example,

<script type="text/javascript">

window.onload = function(){

  var btn = document.getElementById('SubmitBtn');

  btn.onclick = function(){

     //This MUST alert HTML content of editor.
     alert( tinyMCE.activeEditor.getContent() );
  }
}

</script>

<input type="button" id="SubmitBtn" value="Get HTML content"/>

Sending content to PHP script

All you need to do is to send value of the method `tinyMCE.activeEditor.getContent()` to PHP script.

Well, you should use `Jquery-AJAX` for that.

Assume that you included `jquery.js` into script tag in the head section, the next step would be sending JavaScript variable to PHP script

It would be similar to this one:

<script type="text/javascript">
$(function(){

  var url = "path_to_your_php_script.php";

  $("#SomeSubmitButton").click(function(){
    //"content" will PHP variable 
    $.post(url, { "content" : tinyMCE.activeEditor.getContent() }, function(respond){

       if ( respond == ){
          alert('Content saved to file');
          return;
       } else {
          //Error message assumed
          alert(respond);
        }
    });
  });

});

</script>

PHP script

Since we were sending `"content"` this one will be populated in `$_POST` superglobal

<?php

if ( isset($_POST['content']) ){

   //This is what you want - HTML content from tinyMCE
   //just treat this a string

   if ( save_html_to_file($_POST['content'], '/some_file.html') ){
     //Print 1 and exit script
     die(1);
   } else {
      die('Couldnt write to stream');
   }
}

/**
 * 
 * @param string $content HTML content from TinyMCE editor
 * @param string $path File you want to write into
 * @return boolean TRUE on success
 */
function save_html_to_file($content, $path){
   return (bool) file_put_contents($path, $content);
}

So after execution this you should get back `alert` with message of success.

Problem

I have been trying to save tinymce editor textarea content to a .txt file for a while but without success yet. This is my html file code: ``` <!Doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>TinyMCE example</title> <meta name="description" content="HTML5 Basic template"> <meta name="author" content="R Dickinson"> <link rel="stylesheet" href="css/styles.css?v=1.0"> <script src="js/scripts.js"></script> <script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ // General options mode : "textareas", }); </script> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header> <h1>test tinymce save</h1> </header> <nav> </nav> <section> <form method="post" action="test.php"> <p> <textarea name="content" style="width:50%"></textarea> <input type="submit" value="Save" /> </p> </form> </section> <aside> </aside> <footer> </footer> </body> </html> ``` Now test.php ``` <?php /* * test.php */ ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>test tiny mce</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="generator" content="Geany 0.21" /> </head> <body> <?php echo(stripslashes($_POST['content'])); ?> <?php $file = "data.txt"; $fp = fopen($file, 'w'); $data =(stripslashes($_POST['content'])); fwrite($fp, $data); fclose($fp); ?> </body> </html> ``` I'm grateful for helpful replies to fix this-many thanks :-) Update Following the first answer below I have added triggerSave as: ``` <script language="Javascript"> function submitForm() { tinyMCE.triggerSave(); document.forms[0].submit(); } </script> ``` and ``` <form method="post" action="test.php"> <p> <textarea name="content" style="width:50%"></textarea> <!--<input type="submit" value="Save" />--> <a href="javascript:submitForm();">Submit Form</a> </p> ``` but still no success...More help gratefully received UPDATE 2 Here is my jQuery TinyMCE version: ``` <!Doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Sample WebPage</title> <meta name="description" content="HTML5 Basic template"> <meta name="author" content="R Dickinson-see sitepoint etc"> <link rel="stylesheet" href="css/styles.css?v=1.0"> <script src="js/scripts.js"></script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.3"); </script> <!-- Load jQuery build --> <script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ mode : "textareas" }); </script> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header> <h1>Enter the main heading, usually the same as the title.</h1> </header> <nav> </nav> <section> <!-- OF COURSE YOU NEED TO ADAPT ACTION TO WHAT PAGE YOU WANT TO LOAD WHEN HITTING "SAVE" --> <form method="post" action="show.php"> <p> <textarea name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea> <input type="submit" value="Save" /> </p> </form> </section> <aside> </aside> <footer> </footer> </body> </html> ```

Original source