Installing TinyMCE is very simple, follow the instructions here. We give a few examples of to integrate TinyMCE, also look at the extensive options for configuration.
Requirements
TinyMCE has no direct requirements except for browser compatibility and of course JavaScript needs to be turned on. There is NO backend code distributed with TinyMCE.
Downloading
For download instructions check our web site.
Extracting the archives
On windows you could use WinZip or something similar. And on other operating systems such as Linux you simply extract the archive with the tar command. You can find a example on how to extract the archived file on Linux below.
You should extract TinyMCE in your wwwroot or site domain root folder
Extract example using a shell:
$ cd wwwroot $ gzip -d tinymce_1_44.tar.gz $ tar xvf tinymce_1_44.tar
A folder structure looking like this is created:
/tinymce/ /tinymce/docs/ /tinymce/docs/zh_cn/ /tinymce/examples/ /tinymce/examples/zh_cn/ /tinymce/jscripts/ /tinymce/jscripts/tiny_mce/ /tinymce/jscripts/tiny_mce/langs/ /tinymce/jscripts/tiny_mce/plugins/ /tinymce/jscripts/tiny_mce/plugins/<plugin folders> /tinymce/jscripts/tiny_mce/themes/ /tinymce/jscripts/tiny_mce/themes/advanced/ /tinymce/jscripts/tiny_mce/themes/default/ /tinymce/jscripts/tiny_mce/themes/simple/
Making changes on your web site
Once you have extracted the archive you will need to edit the pages to include the configuration and javascript for TinyMCE. Please note that you should probably only include the TinyMCE javascript on the pages that need it, not all the pages of the web site. Remember to change the URL to the .js below to match your installation path.
The most basic page integration (converts all textarea elements into editors):
<html>
<head>
<title>TinyMCE Test</title>
<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
</script>
</head>
<body>
<form method="post">
<textarea name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea>
</form>
</body>
</html>
Here are a few different example of how you could integrate TinyMCE.
- Example 00 - Simple Theme
- Example 01 - Advanced Theme
- Example 02 - Advanced Theme Full
- Example 03 - Advanced Theme Simplified
If you have any problems, you should check the forum on the TinyMCE web site.