How to get data from TinyMCE text editor

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;

	});

});

Requirement

Assumption

Step 1: Create files

Step 2: Code

Output