JSFiddle - React, Tailwind, and code Playground

by Rapha Souza

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Rich-Text-Editor-jQuery-RichText/css/site.css">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Rich-Text-Editor-jQuery-RichText/richtext.min.css">
<script src="https://www.jqueryscript.net/demo/Rich-Text-Editor-jQuery-RichText/jquery.richtext.js"></script>
        <div class="page-wrapper box-content">

            <textarea class="content" name="example"></textarea>

        </div>

JavaScript

$(document).ready(function () {
  console.log("ready")

  $(".content").richText({
    // text formatting
    bold: true,
    italic: true,
    underline: true,

    // text alignment
    leftAlign: true,
    centerAlign: true,
    rightAlign: true,
    justify: true,

    // lists
    ol: true,
    ul: true,

    // title
    heading: false,

    // fonts
    fonts: false,
    fontList: [
      "Arial",
      "Arial Black",
      "Comic Sans MS",
      "Courier New",
      "Geneva",
      "Georgia",
      "Helvetica",
      "Impact",
      "Lucida Console",
      "Tahoma",
      "Times New Roman",
      "Verdana",
    ],
    fontColor: false,
    backgroundColor: false,
    fontSize: true,

    // uploads
    imageUpload: false,
    fileUpload: false,

    // media
    videoEmbed: false,

    // link
    urls: false,

    // tables
    table: false,

    // code
    removeStyles: false,
    code: false,

    // colors
    colors: [],

    // dropdowns
    fileHTML: "",
    imageHTML: "",

    // translations
    translations: {
      title: "Título",
      white: "Branco",
      black: "Preto",
      brown: "Marrom",
      bege: "Bege",
      darkBlue: "Azul escuro",
      blue: "Azul",
      lightBlue: "Azul claro",
      darkRed: "Vermelho escuro",
      red: "Vermelho",
      darkGreen: "Verde escuro",
      green: "Verde",
      purple: "Roxo",
      darkTurquois: "Turquesa escuro",
      turquois: "Turquesa",
      darkOrange: "Laranja escuro",
      orange: "Laranja",
      yellow: "Amarelo",
      imageURL: "URL da imagem",
      fileURL: "URL do arquivo",
      linkText: "Texto do link",
      url: "URL",
      size: "Tamanho",
      responsive:
        '<a href="https://www.jqueryscript.net/tags.php?/Responsive/">Responsivo</a>',
      text: "Texto",
      openIn: "Abrir em",
      sameTab: "Mesma aba",
      newTab: "Nova aba",
      align: "Alinhar",
      left: "Esquerda",
      justify: "Justificar",
      center: "Centralizar",
      right:...