How to Create WYSIWYG Text Editor using Bootstrap & JQuery

How to Create WYSIWYG Text Editor using Bootstrap & JQuery

Jquery text editor is a jquery plugins which is based on modal of WYSIWYG. for using this plugins must to  use either use of directly link  jquery.min.js and for responsive bootstrap.min.js or downloaded local file. and for jquery editor also import two file one of Jquery_text_editor.js file and Jquery_text_editor.css  must to use.

 

  • Import jquery and bootstrap min,js and css file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="Jquery_text_editor.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="Jquery_text_editor.css" type="text/css" rel="stylesheet"/>
  • Create input field text area.
<div class="container-fluid">
   <div class="row">
	<h2 class="demo-text">Jquery Text Editor</h2>
	    <div class="container">
	      <div class="row">
	        <div class="col-lg-12 nopadding">
	         <textarea id="jquery_txt_Editor"></textarea>
	        </div>
	     </div>
	  </div>
   </div>
</div>
  • Enable Editor.
 <script>
        $(document).ready(function() {
            $("#jquery_txt_Editor").Editor();
          
        });
    </script>
  • Enabled Editor.

6 Replies to “How to Create WYSIWYG Text Editor using Bootstrap & JQuery”

Leave a Reply

Your email address will not be published. Required fields are marked *