How to setup TinyMCE text editor - TinyMCE - dyclassroom

In this tutorial we will learn to setup TinyMCE a HTML WYSIWYG text editor for your web project.

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

So lets get started...

Step 1: Download TinyMCE

Visit tinymce.com and download the Community version.

Step 2: Download jQuery

Visit jquery.com and download the compressed production version.

Step 3: Create a new project: tinymce

Open your favourite text editor or IDE and create a new project and name it tinymce.

Create two sub-folders namely js and plugin inside the project folder.

Now copy the jquery.min.js file that you downloaded from jquery.com inside the js folder. And copy tinymce folder inside the plugin folder.

Step 4: Create an index.html file

Inside the project folder create an index.html file. We will create a TinyMCE text editor in this file.

Step 5: Create init-tinymce.js file

Now inside the tinymce folder which is inside the plugin folder, create a new file and name it init-tinymce.js. This file is going to initialize the tinymce text editor.

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

index.html

Write the following HTML code inside the index.html file.


<!DOCTYPE html>
<html>
	<head>
		<title>TinyMCE - Setup</title>
	</head>
	<body>
		<textarea class="tinymce"></textarea>

		<!-- 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>
	</body>
</html>

init-tinymce.js

Write the following code inside the init-tinymce.js file.


tinymce.init({
	/* replace textarea having class .tinymce with tinymce editor */
	selector: "textarea.tinymce",
	
	/* theme of the editor */
	theme: "modern",
	skin: "lightgray",
	
	/* width and height of the editor */
	width: "100%",
	height: 300,
	
	/* display statusbar */
	statubar: true,
	
	/* plugin */
	plugins: [
		"advlist autolink link image lists charmap print preview hr anchor pagebreak",
		"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
		"save table contextmenu directionality emoticons template paste textcolor"
	],

	/* toolbar */
	toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons",
	
	/* style */
	style_formats: [
		{title: "Headers", items: [
			{title: "Header 1", format: "h1"},
			{title: "Header 2", format: "h2"},
			{title: "Header 3", format: "h3"},
			{title: "Header 4", format: "h4"},
			{title: "Header 5", format: "h5"},
			{title: "Header 6", format: "h6"}
		]},
		{title: "Inline", items: [
			{title: "Bold", icon: "bold", format: "bold"},
			{title: "Italic", icon: "italic", format: "italic"},
			{title: "Underline", icon: "underline", format: "underline"},
			{title: "Strikethrough", icon: "strikethrough", format: "strikethrough"},
			{title: "Superscript", icon: "superscript", format: "superscript"},
			{title: "Subscript", icon: "subscript", format: "subscript"},
			{title: "Code", icon: "code", format: "code"}
		]},
		{title: "Blocks", items: [
			{title: "Paragraph", format: "p"},
			{title: "Blockquote", format: "blockquote"},
			{title: "Div", format: "div"},
			{title: "Pre", format: "pre"}
		]},
		{title: "Alignment", items: [
			{title: "Left", icon: "alignleft", format: "alignleft"},
			{title: "Center", icon: "aligncenter", format: "aligncenter"},
			{title: "Right", icon: "alignright", format: "alignright"},
			{title: "Justify", icon: "alignjustify", format: "alignjustify"}
		]}
	]
});

Output