TinyMCE – a wysiywg editor for your web application

Screen Shot 2015-03-10 at 8.48.11 AM

  1. download TinyMCE from http://www.tinymce.com/download/download.php
  2. extract the file and copy the folder tinymce/ into your web application folder or any sub folder
  3. include the js file in your html
    • <script type=”text/javascript” src=”scripts/tinymce/tinymce.min.js”></script>
  4. add this line within your <script language=’javascript’></script>
    • tinymce.init({
      selector: “textarea#txt_page_content2″,
      theme: “modern”,
      skin:”light”,
      plugins: [
      "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
      "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
      "save table contextmenu directionality template paste textcolor"
      ],
      toolbar: “undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l ink image | print preview media fullpage | forecolor backcolor | fontsizeselect”,
      theme_advanced_font_sizes: “10px,12px,13px,14px,16px,18px,20px”,
      font_size_style_values: “12px,13px,14px,16px,18px,20px”,
      menubar:false
      });
  5. tinymce by default come with a ‘menubar’. To disable the menubar, add menubar:false within ‘init’ function.
  6. to modify the button in the toolbar, modify the ‘toolbar’ value
  7. to add font-size selection,
    1. add fontsizeselect in toolbar,
    2. add theme_advanced_font_size, and font_size_style_value
  8. to modify the skin,
    1. download the skin from the website
    2. unzip the file and copy the skin folder into tinymce/skins/ folder
    3. add ‘skin:”skin_name”‘ in the init function