Press "Enter" to skip to content

[WYSIWYG Editor] Pure JavaScript Rich Text Editor | textEditor.js

Rich Text Editor is a JavaScript WYSIWYG EditorΒ that provides basic content editing functions such as alignment, text design, menus, images, links, and instant preview.

rich text editor in html, html rich text editor free, rich text editor bootstrap, rich text editor html5, tinymce, ckeditor, rich text editor html code

Angular Material Simple Rich Text WYSIWYG Editor | MatNgxWig

How to make use of it:

1. Load the textEditor.js JavaScript library and Font Awesome iconic font within the doc.

<script src="https://kit.fontawesome.com/7ce56be44b.js" crossorigin="anonymous"></script>
<script src="textEditor.js"></script>

2. Create a Textarea component with the CSS ID referred to as text-editor and also you’re executed.

<textarea id="text-editor"></textarea>

3. The primary CSS styles for the editor.

button:first-child {
  margin: 0 5px 0 0;
}

button:last-child {
  margin: 0;
}

button {
  width: 30px;
  height: 30px;
  margin: 0 5px 0 0;
  border: none;
  outline: none;
  cursor: pointer;
}

#buttonsToolbar {
  width: fit-content;
}

#textEditor {
  width: 700px;
  height: 400px;
  margin-top: 5px;
  padding: 5px;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 3px;
  outline: none;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .1);
}

.active {
  background-color: rgb(214, 214, 214)
}

Tiny Rich Text HTML Editor, Rich Text Editor Plugin/Github


See Demo And Download

Official Website(GoldB): Click Here

This superior jQuery/javascript plugin is developed by GoldB. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

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