Today, We are going to discuss how to Integrate TinyMCE editor with php or html. TinyMCE editor is web based WYSIWYG editor which enables you to convert HTML textarea field to an editor. The TinyMCE editor is converting the formatted text into HTML. Basically it helps to display formatted HTML code. Here we have given simple example how to add TinyMCE editot in php or html file.
To use this editor you need to download some important files from the TinyMCE editor official sites.
How to setup TinyMCE text editor
Follow the below steps to add TinyMCE editor in PHP or HTML file.
1. Add TinyMCE editor’s JS library :
<script type="text/javascript" src="tinymce/tinymce.min.js"></script>
2. Add HTML textarea to display Editor box :
<textarea name="editor" id="editor"></textarea>
3. Call the TinyMCE editor function :
<script> tinymce.init({ selector: 'textarea#editor', //Change this value according to your HTML auto_focus: 'element1', width: "700", height: "200" }); </script>
lets see the complete example, which helps to you display formatted HTML code.
index.php
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Add tinymce editor in PHP or HTML </title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="tinymce/tinymce.min.js"></script> <style> .texteditor-container { width:700px; height:365px; } textarea#editor1 { width:500px !important; border:1px solid red; } </style> <script> tinymce.init({ selector: 'textarea#editor', //Change this value according to your HTML auto_focus: 'element1', width: "700", height: "200" }); $( document ).ready(function() { $('#buttonpost').on("click", function(){ tinyMCE.triggerSave(); var value = $("textarea#editor").val(); $("#display-post").html(value); $(".texteditor-container").hide(); return false; }); }); </script> </head> <body> <div class="texteditor-container"> <h1> Add tinymce editor in PHP or HTML </h1> <textarea name="editor" id="editor"></textarea> <input type="button" id="buttonpost" value="Publish Post" /> </div> <div id="display-post" style="width:700px;" ></div> </body> </html>
Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/Add%20TinyMCE%20editor%20in%20PHP%20or%20HTML
Demo Link :
This is all about TinyMCE editor. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.
Nice Blog...
ReplyDeleteYour blog provided us with valuable information to work with. Each & every tips of your post are awesome. Thanks a lot for sharing. Keep blogging, dokument
ReplyDeleteVery much planned and brilliant sites are essential for a wide range of organizations. Cakephp Programming service
ReplyDeleteNice bog thanks a lot for sharing.
ReplyDelete