Home > DeveloperSection > Forums > How to use rich text box editor in web page.
Ankit Singh

Total Post:341

Points:2389
Posted on    January-05-2016 9:41 PM

 .NET ASP.Net  ASP.NET MVC 
Ratings:


 2 Reply(s)
 259  View(s)
Rate this:
I want to use rich text box editor in web page. How to use this please help me.


aditya kumar Patel

Total Post:244

Points:1736
Posted on    January-05-2016 9:57 PM

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>


aditya kumar Patel

Total Post:244

Points:1736
Posted on    January-08-2016 11:25 AM

@{
    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>
 


aditya kumar Patel

Total Post:244

Points:1736
Posted on    January-08-2016 11:29 AM

@{
    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>
 

Don't want to miss updates? Please click the below button!

Follow MindStick