---
title: "How to use rich text box editor in web page."  
description: "How to use rich text box editor in web page."  
author: "Anonymous User"  
published: 2016-01-05  
updated: 2023-07-03  
canonical: https://www.mindstick.com/forum/33836/how-to-use-rich-text-box-editor-in-web-page  
category: ".net"  
tags: ["asp.net", "asp.net mvc"]  
reading_time: 4 minutes  

---

# How to use rich text box editor in web page.

I want to use [rich](https://yourviews.mindstick.com/story/2229/10-things-to-know-about-rich-india) [text](https://www.mindstick.com/blog/301635/did-people-reinvent-texting-to-express-the-full-range-of-emotions) box [editor](https://www.mindstick.com/forum/78/how-avoid-the-html-tag-and-remove-the-formating-of-copy-in-ajax-editor) in [web page](https://www.mindstick.com/forum/718/sql-server-report-alignment-to-center-of-web-page). How to use this please help me.

## Replies

### Reply by Aryan Kumar

There are many ways to use a rich text box editor in a [web](https://www.mindstick.com/articles/12783/the-ultimate-bunch-of-free-web-design-resources) page. Here are a few examples:

- **Using a third-party library:** There are many third-party libraries that provide rich text box editors, such as TinyMCE, Froala, and CKEditor. These libraries can be easily integrated into your web page and provide a wide range of features, such as formatting, spell checking, and image insertion.
- **Using a native HTML element:** The `<textarea>` element can be used to create a rich text box editor. However, you will need to write JavaScript code to provide the formatting and other features.
- **Using a web component:** A web component is a reusable piece of code that can be used to create rich text box editors. Web components are supported by all major browsers and provide a consistent way to create rich text box editors.

Here is an example of how to use a third-party library to create a rich text box editor:

HTML

```plaintext
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.10.1/tinymce.min.js"></script>
<script>
tinymce.init({
    selector: '#my-rich-text-box'
});
</script>

<textarea id="my-rich-text-box"></textarea>
```

This code will create a rich text box editor using the TinyMCE library. The editor will be initialized when the page loads and will be bound to the `#my-rich-text-box` element.

Here is an example of how to use a native HTML element to create a rich text box editor:

HTML

```plaintext
<textarea id="my-rich-text-box" style="width: 100%; height: 200px;"></textarea>

<script>
var editor = document.getElementById("my-rich-text-box");

// Add some formatting
editor.innerHTML = "<h1>This is a heading</h1><p>This is a paragraph</p>";

// Add an image
editor.innerHTML += "<img src='https://www.example.com/image.jpg'>";
</script>
```

This code will create a rich text box editor using the `<textarea>` element. The editor will be styled to have a width of 100% and a height of 200px. The JavaScript code will add some formatting to the editor, such as a heading and a paragraph. The code will also add an image to the editor.

Here is an example of how to use a web component to create a rich text box editor:

HTML

```plaintext
<script src="https://unpkg.com/@webcomponents/custom-elements/custom-elements.min.js"></script>
<script src="https://unpkg.com/@polymer/rich-text-editor/dist/rich-text-editor.js"></script>

<rich-text-editor></rich-text-editor>
```

This code will create a rich text box editor using the `<rich-text-editor>` web component. The editor will be rendered when the page loads.

### Reply by Anonymous User

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

```

![How to use rich text box editor in web page.](https://www.mindstick.com/mindstickforums/c36404f5-a014-4dab-a1fb-3d0d89e8d764/images/d4a97f6c-3415-4c3e-a519-83d9c3a02094.png)\

### Reply by Anonymous User

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>
```

```

```


---

Original Source: https://www.mindstick.com/forum/33836/how-to-use-rich-text-box-editor-in-web-page

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.