Arie Molendijk, mesdomaines.nu
Creating a TinyMCE-editor without downloading TinyMCE-files
Adding php-code for saving the edits made online
TinyMCE (http://www.tinymce.com/) is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL. So I guess I can freely publish the information given below.
To create a TinyMCE-editor without downloading TinyMCE-files, read the info and instructions below:
1. Create a php-file named tinymce_edit.php (but you can choose another name if you want) containing the following lines:
<!DOCTYPE html>
<html>
<head><!-- CDN hosted by Cachefly -->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Saving TinyMCE-edits online</title>
<!-- This is the line that does almost everything. We can find it at http://www.tinymce.com/index.php -->
<script src="http://tinymce.cachefly.net/4.1/tinymce.min.js"></script>
</head>
<body >
<!-- Thanks to http://www.dreamincode.net/forums/topic/9866-textarea-editor for the php part -->
<?php
$file = "tinymce_save";
$save_file = $_POST['save_file'];
$savecontent = $_POST['savecontent'];
?>
<?php
$loadcontent = $file.".php";
if (!is_writable($loadcontent))
echo 'error';
if($save_file) {
$savecontent = stripslashes($savecontent);
$fp = @fopen($loadcontent, "w");
if ($fp) {
echo 'written';
fwrite($fp, $savecontent);
fclose($fp);
}
}
$fp = @fopen($loadcontent, "r");
$loadcontent = fread($fp, filesize($loadcontent));
$loadcontent = htmlspecialchars($loadcontent);
fclose($fp);
?>
<form style="position: absolute; left: 10px; top: 10px; right: 10px; " method="post" action="<?=$_SERVER['PHP_SELF']?>">
<textarea name="savecontent" id="savecontent" >
<?=$loadcontent?>
</textarea>
<input type="submit" name="save_file" value="Save" style="position: absolute; top:2px; right: 2px">
</form>
<script>
function size_it()
{
//Specifying the height of the field where the edits are done. You may have to alter the pixel-value (method: trial and error)
document.getElementById('savecontent').style.height=window.innerHeight-150+'px'
}
size_it()
</script>
</body>
</html>
2. The name for $file (here: tinymce_save, see 1 above) is arbitrarily chosen, you can modify it if you like. But it has to correspond with the name of a php-file that we must create in order to save our edits. So in our case, we must (also) create a file called tinymce_save.php. We don't have to put anything into it. It's best to put both files we've created in the same folder. Whatever name you choose, php will use it for another php-file that will be automatically created and that stores the edits made in the editor (called tinymce_edit.php here). In our case, the name for the (automatically created) file that stores the data will be tinymce_save.php, since we have $file = "tinymce_save" in the script, see 1 above.
3. We are not finished yet. In the first file, we still have to put init-code for (i) writing a toolbar for the editor and (ii) replacing the textarea with something that can contain more than just raw text. The choice of the script depends on what editor we want to use. We can make our choice at http://www.tinymce.com/tryit/basic.php by selecting an example, for instance, the 'classic example', which directs us to http://www.tinymce.com/tryit/classic.php. When we click there on 'view source', we'll see:
<script type="text/javascript">
tinymce.init({
selector: "textarea",
plugins: [
"advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"table contextmenu directionality emoticons template textcolor paste fullpage textcolor colorpicker textpattern"
],
toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | insertdatetime preview | forecolor backcolor",
toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft",
menubar: false,
toolbar_items_size: 'small',
style_formats: [
{title: 'Bold text', inline: 'b'},
{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
{title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
{title: 'Example 1', inline: 'span', classes: 'example1'},
{title: 'Example 2', inline: 'span', classes: 'example2'},
{title: 'Table styles'},
{title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
],
templates: [
{title: 'Test template 1', content: 'Test 1'},
{title: 'Test template 2', content: 'Test 2'}
]
});
</script>
EDIT: we can customize this script at http://fiddle.tinymce.com.
Now all we have to do is put this script in the head of our first file, just below <script src="http://tinymce.cachefly.net/4.1/tinymce.min.js"></script> in the head.
4. Final result:
<!DOCTYPE html>
<html>
<head><!-- CDN hosted by Cachefly -->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Saving TinyMCE-edit online</title>
<!-- This is the line that does almost everything. We can find it at http://www.tinymce.com/index.php -->
<script src="http://tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
plugins: [
"advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"table contextmenu directionality emoticons template textcolor paste fullpage textcolor colorpicker textpattern"
],
toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | insertdatetime preview | forecolor backcolor",
toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft",
menubar: false,
toolbar_items_size: 'small',
style_formats: [
{title: 'Bold text', inline: 'b'},
{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
{title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
{title: 'Example 1', inline: 'span', classes: 'example1'},
{title: 'Example 2', inline: 'span', classes: 'example2'},
{title: 'Table styles'},
{title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
],
templates: [
{title: 'Test template 1', content: 'Test 1'},
{title: 'Test template 2', content: 'Test 2'}
]
});
</script>
</head>
<body >
<!-- Thanks to http://www.dreamincode.net/forums/topic/9866-textarea-editor for the php part -->
<?php
$file = "tinymce_save";
$save_file = $_POST['save_file'];
$savecontent = $_POST['savecontent'];
?>
<?php
$loadcontent = $file.".php";
if (!is_writable($loadcontent))
echo 'error';
if($save_file) {
$savecontent = stripslashes($savecontent);
$fp = @fopen($loadcontent, "w");
if ($fp) {
echo 'written';
fwrite($fp, $savecontent);
fclose($fp);
}
}
$fp = @fopen($loadcontent, "r");
$loadcontent = fread($fp, filesize($loadcontent));
$loadcontent = htmlspecialchars($loadcontent);
fclose($fp);
?>
<form style="position: absolute; left: 10px; top: 10px; right: 10px; " method="post" action="<?=$_SERVER['PHP_SELF']?>">
<textarea name="savecontent" id="savecontent" >
<?=$loadcontent?>
</textarea>
<input type="submit" name="save_file" value="Save" style="position: absolute; top:2px; right: 2px">
</form>
<script>
function size_it()
{
//Specifying the height of the field where the edits are done. You may have to alter the pixel-value (method: trial and error)
document.getElementById('savecontent').style.height=window.innerHeight-150+'px'
}
size_it()
</script>
</body>
</html>