Date Posted:17-02-2017

This post we will explain on how to integrate tinymce into  webpage.

This example we add two type of textara one is static and dynamic texarea  with tinymce editor

First Step,create new file and Include the script source files inside head


 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js"></script>
 <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>

Second step add one textarea field and button with onclick event in inside of the body tag

[script]
<textarea></textarea>
<button onclick="ShowEditModal">Submit</button>
[/script]

Third step, add tinymce init function and create ShowEditModal function,  when the user clicking the button ShowEditTextarea function excutes, this function creating dynamic textarea.

<script>
tinymce.init({
selector: 'textarea',
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code'
],
toolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image'
});

function ShowEditModal(id)
{
  var uid =id; // it will get id of clicked row
  $('#dynamic-content').html(''); // leave it blank before ajax call
  $.ajax({
   url: 'tinyajax.php',
   type: 'POST',
   data: 'id='+id,
   dataType: 'html'
  })
  .done(function(data){
   console.log(data);
   $('#dynamic-content').html('');
   $('#dynamic-content').html(data); // load response
   tinymce.EditorManager.editors = [];
   tinymce.init({selector:'textarea'});//this will reinitialze tinymce
   })
   .fail(function(){
   });
}
</script>

tinyajax.php

This page return the textarea field to respective ajax call

<textarea><textarea>

Give is we mention  index.php like this

<!DOCTYPE html>
 <html>
 <head>
 <title>TinyMce Editor</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" media="all">
 <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js"></script>
 <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>

</head>
 <body>
 <form action="#" method="POST" role="form">

<div class="form-group">
 <label for="">Onload Textare</label>
 <textarea class="tinymce-enabled-message" cols="80" id="description1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt est ac dolor condimentum vitae laoreet ante accumsan. Nullam tincidunt tincidunt ante tempus commodo.</textarea>
 </div>
<div id="dynamic-content"></div><!-- This Tag Dispaly dynamic textarea with tinymce editor window -->
 <button onclick="ShowEditModal(this.id)" id="onclick" type="submit" class="btn btn-primary">Submit</button>
 </form>
 <script>
 tinymce.init({
 selector: 'textarea',
 height: 500,
 menubar: false,
 plugins: [
 'advlist autolink lists link image charmap print preview anchor',
 'searchreplace visualblocks code fullscreen',
 'insertdatetime media table contextmenu paste code'
 ],
 toolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image'
 });
function ShowEditModal(id)
 {

$('#dynamic-content').html(''); // leave it blank before ajax call

$.ajax({
 url: 'tinyajax.php',
 type: 'POST',
 data: 'id='+id,
 dataType: 'html'
 })
 .done(function(data){

console.log(data);
 $('#dynamic-content').html('');
 $('#dynamic-content').html(data); // load response
 tinymce.EditorManager.editors = [];

tinymce.init({selector:'textarea'});//this will reinitialze tinymce

//applyMCE();

})
 .fail(function(){

});

}

</script>
 </body>
 </html>
Post Views: 1,163

Leave a Reply