Mobile-first Rich Text Editor With jQuery - Rich Text Format

Rich Text Format (RTF) is a minimal clean jQuery based rich text editor designed especially for mobile devices.

How to use it:

1. Import jQuery library together with the Rich Text Format's JavaScript and CSS files into the document.

<link href="RTF.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="RTF.js"></script>

2. Create the html for the rich text editor and editable area.

<div class="wrapper">

  <div id="textStyle-container2">
    <div class="editor-textStyle">
      <div class="editor-textStyle-item">
        <div class="editor-textStyle-bold" dataStyle="font-weight" dataStyleRS="800">
        </div>
      </div>
      <div class="editor-textStyle-item">
        <div class="editor-textStyle-color" dataStyle="color" dataStyleRS="">
          <span>
          </span>
        </div>
      </div>
      <div class="editor-textStyle-item">
        <div class="editor-textStyle-linedecoration" dataStyle="text-decoration" dataStyleRS="">
        </div>
      </div>
      <div class="editor-textStyle-item">
        <div class="editor-textStyle-bgColor" dataStyle="background-color">
        </div>
      </div>
      <div class="editor-textStyle-item">
        <div class="editor-textStyle-fontSize" dataStyle="font-size">
        </div>
      </div>
      <div class="editor-textStyle-item">
        <div class="editor-textStyle-lineHeight" dataStyle="line-height">
        </div>
      </div>
      <div class="editor-textStyle-item">
        <div class="editor-textStyle-align editor-textStyle-alignLeft" align="left" dataStyle="text-align" dataStyleRS="left">
        </div>
      </div>
      <div class="editor-textStyle-item">
        <div class="editor-textStyle-align editor-textStyle-alignCenter" align="center" dataStyle="text-align" dataStyleRS="center">
        </div>
      </div>
      <div class="editor-textStyle-item">
        <div class="editor-textStyle-align editor-textStyle-alignRight" align="right" dataStyle="text-align" dataStyleRS="right">
        </div>
      </div>
    </div>
    <div class="editor-textarea" id="editor-textarea" oninput="userInput()" contenteditable="true" spellcheck="true"></div>
    <div class="editor-options"></div>
  </div>
  <div id="textStyle-container1"></div>
</div>

3. Create the sidebar controls to remove & save the editor.

<div class="editor-textEditor-formats">
  <div class="editor-textEditor-format" onclick="clearEditor()"></div>
  <div class="editor-textEditor-clean" onclick="OKEditor()"></div>
</div>

---

This awesome jQuery plugin is developed by zc95. For more Advanced Usages, please check the demo page or visit the official website.