Thursday, March 15, 2018

Add TinyMCE editor in PHP or HTML

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.

How to Integrate TinyMCE editor with php, How To Adding TinyMCE Text Editor in our Form on PHP, How to install TinyMCE in 5 minutes


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 :

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.

1 comment: