How to get data from TinyMCE text editor
TinyMCE
In this tutorial we will learn to get data from a TinyMCE text editor.
Requirement
We will need the following items.
- Text Editor like SublimeText, TextMate, Coda, NotePad++ or IDE like Eclipse
- Web Browser like Chrome or Firefox
- TinyMCE
- jQuery
Assumption
It is assumed that you have TinyMCE setup done. To know more about TinyMCE setup check this tutorial.
So lets get started...
The project folder structure will look something like the following...
tinymce
|
+--js
| |
| +-- jquery.min.js
|
+--plugin
| |
| +--tinymce
| |
| +-- some folders
| |
| +-- init-tinymce.js
| |
| +-- tinymce.min.js
|
+-- index.html
Step 1: Create files
Create getdata.html file inside the tinymce project folder.
Create getdata.js file inside the js folder. This file will contain the javascript code that we are going to write.
Now the project folder will look like the following...
tinymce
|
+--js
| |
| +-- getdata.js
| |
| +-- jquery.min.js
|
+--plugin
| |
| +--tinymce
| |
| +-- some folders
| |
| +-- init-tinymce.js
| |
| +-- tinymce.min.js
|
+-- getdata.html
|
+-- index.html
Step 2: Code
Open getdata.html file and write the following code.
<!DOCTYPE html>
<html>
<head>
<title>TinyMCE - Get Data</title>
</head>
<body>
<form id="get-data-form" method="post">
<textarea class="tinymce" id="texteditor"></textarea>
<input type="submit" value="Get Data">
</form>
<div id="data-container">
</div>
<!-- javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="plugin/tinymce/tinymce.min.js"></script>
<script type="text/javascript" src="plugin/tinymce/init-tinymce.js"></script>
<script type="text/javascript" src="js/getdata.js"></script>
</body>
</html>
Open getdata.js file and write the following code.
$(document).ready(function(){
$("#get-data-form").submit(function(e){
var content = tinymce.get("texteditor").getContent();
$("#data-container").html(content);
return false;
});
});
Output
ADVERTISEMENT