Menu
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>
915
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.
197
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
