Table of contents

TinyMCE Basic Example

In this post, I'm sharing how to install TinyMCE with a basic example also interesting with Bootstrap 5.

 

TinyMCE is the most advanced WYSIWYG HTML editor that many businesses and developers using because of its simplicity in content creation. Another advantage of TinyMCE is standalone no library needed this to work.

 

If you are developing a task like a blog, email templates, and page template that needs a WYSIWYG HTML editor then TinyMCE is the right one for you.

 

If you are new to the TinyMCE here are the steps on how to install it.

 

Step 1: Download the latest version of TinyMCE.

Download the TinyMCE here.

 

Step 2: Put this javascript code to your js file or in your head script tag.

tinymce.init({
	  selector: 'textarea#tinymce',
	  plugins: [
           "advlist autolink lists link image charmap print preview anchor",
           "searchreplace visualblocks code fullscreen",
           "insertdatetime media table paste codesample"
      ],
      toolbar:"undo redo | fontselect styleselect fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | codesample action section button",
	 font_formats:"Segoe UI=Segoe UI;",
	 fontsize_formats: "8px 9px 10px 11px 12px 14px 16px 18px 20px 22px 24px 26px 28px 30px 32px 34px 36px 38px 40px 42px 44px 46px 48px 50px 52px 54px 56px 58px 60px 62px 64px 66px 68px 70px 72px 74px 76px 78px 80px 82px 84px 86px 88px 90px 92px 94px 94px 96px",
	 height: 600
});

 

Step 3: Here is the complete code

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Basic on TinyMCE</title>

	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script type="text/javascript" src="assets/plugins/tinymce/js/tinymce.min.js"></script>

	<script type="text/javascript">
		tinymce.init({
	        selector: 'textarea#tinymce',
	        plugins: [
                "advlist autolink lists link image charmap print preview anchor",
                "searchreplace visualblocks code fullscreen",
                "insertdatetime media table paste codesample"
            ],
            toolbar:
                "undo redo | fontselect styleselect fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | codesample action section button",
	        font_formats:"Segoe UI=Segoe UI;",
	        fontsize_formats: "8px 9px 10px 11px 12px 14px 16px 18px 20px 22px 24px 26px 28px 30px 32px 34px 36px 38px 40px 42px 44px 46px 48px 50px 52px 54px 56px 58px 60px 62px 64px 66px 68px 70px 72px 74px 76px 78px 80px 82px 84px 86px 88px 90px 92px 94px 94px 96px",
	        height: 600
	    });
	</script>
</head>
<body>
	<div class="container mt-5">
		<form method="post">
			<div class="form-group">
				<label>Title</label>
				<input type="text" name="title" class="form-control">
			</div>
			<div class="form-group mt-4">
				<label>Content</label>
				<textarea id="tinymce"></textarea>
			</div>
			
			<button class="btn btn-primary mt-4">Submit</button>
		</form>
	</div>
	
</body>
</html>

 

Download

 

I hope it helps. Thank you for reading :)

Read next