HOW TO USE RICH TEXT BOX EDITOR IN WEB PAGE.

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
 543  View(s)
Ratings:
Rate this:
I want to use rich text box editor in web page. How to use this please help me.
  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: How to use rich text box editor in web page.

    The HTML editor give to you as functionality to change the look of your text with HTML markup. we can be used it in both entries and comments.

    for example goto https://www.tinymce.com/ download editor  and use like below:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="tinymce.min.js"></script>
        <link href="//www.tinymce.com/css/codepen.min.css" rel="stylesheet" />

    </head>
    <body>
        <div style="width:500px ; height:300; margin:0 auto;">
            <textarea>
    </textarea>
        </div>
        <script>
            tinymce.init({
                selector: 'textarea',
                height: 500,
                plugins: [
                  'advlist autolink lists link image charmap print preview anchor',
                  'searchreplace visualblocks code fullscreen',
                  'insertdatetime media table contextmenu paste code'
                ],
                toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
                content_css: [
                  '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
                  '//www.tinymce.com/css/codepen.min.css'
                ]
            });
        </script>
    </body>
    </html>

  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: How to use rich text box editor in web page.

    @{
        ViewBag.Title = "Editor";
        Layout = "~/Views/Share/_Layout.cshtml";
    }
     
      <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
     
     
      <script>
    
          tinymce.init({
              selector: 'textarea',
              height: 500,
              file_browser_callback_types: 'image',
              file_browser_callback: function (field_name, url, type, win) {
                  $('#fileinput').trigger('click');
                  $('INPUT[type="file"]').change(function () {
                      var ext = this.value.match(/\.(.+)$/)[1];
                      switch (ext) {
                          case 'jpg':
                          case 'jpeg':
                          case 'png':
                          case 'gif':
                              var fileUpload = $("#fileinput")[0];
                              var reader = new FileReader();                          
                              reader.readAsDataURL(fileUpload.files[0]);
                              reader.onload = function (e) {
                                  win.document.getElementById(field_name).value = e.target.result;
                              }
                              break;
                          default:
                              win.document.getElementById(field_name).value = '';
                              this.value = '';
                      }
                  });
    
              },
              plugins: [
                  'advlist autolink lists link image charmap print preview anchor',
                  'searchreplace visualblocks code fullscreen',
                  'insertdatetime media table contextmenu paste code'
                ],
              toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
              content_css: [
                  '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
                  '//www.tinymce.com/css/codepen.min.css'
                ]
          });
    
          
      </script>
     
     <input type="file" id="fileinput"/>
      <textarea>Easy (and free!) You should check out our premium features.</textarea>
     

  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: How to use rich text box editor in web page.

    @{
        ViewBag.Title = "Editor";
        Layout = "~/Views/Share/_Layout.cshtml";
    }
     
      <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
     
     
      <script>

          tinymce.init({
              selector: 'textarea',
              height: 500,
              file_browser_callback_types: 'image',
              file_browser_callback: function (field_name, url, type, win) {
                  $('#fileinput').trigger('click');
                  $('INPUT[type="file"]').change(function () {
                      var ext = this.value.match(/\.(.+)$/)[1];
                      switch (ext) {
                          case 'jpg':
                          case 'jpeg':
                          case 'png':
                          case 'gif':
                              var fileUpload = $("#fileinput")[0];
                              var reader = new FileReader();                          
                              reader.readAsDataURL(fileUpload.files[0]);
                              reader.onload = function (e) {
                                  win.document.getElementById(field_name).value = e.target.result;
                              }
                              break;
                          default:
                              win.document.getElementById(field_name).value = '';
                              this.value = '';
                      }
                  });

              },
              plugins: [
                  'advlist autolink lists link image charmap print preview anchor',
                  'searchreplace visualblocks code fullscreen',
                  'insertdatetime media table contextmenu paste code'
                ],
              toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
              content_css: [
                  '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
                  '//www.tinymce.com/css/codepen.min.css'
                ]
          });

          
      </script>
     
     <input type="file" id="fileinput"/>
      <textarea>Easy (and free!) You should check out our premium features.</textarea>
     

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!