Rich Text - Quill

by Daniel Gualberto

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<div class="container py-3">
  <div class="row">
    <div class="col">
      <!-- Create the editor container -->
      <div class="editor" id="editor"></div>
      <textarea name="conteudo" style="display:none;"></textarea>
      <button type="submit" class="btn btn-primary my-5" onclick="showAlert()">Enviar</button>
    </div>
  </div>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

JavaScript

var editors = document.querySelectorAll('.editor');

editors.forEach(function(editor) {
  var quill = new Quill(editor, {
    theme: 'snow',
    modules: {
      toolbar: [
        ['bold', 'italic', 'strike'], // Opções de formatação
        ['code-block'], // Monoespaçado
        ['clean'] // remove formatting button
      ]
    }
  });

  quill.on('text-change', function() {
    var content = quill.root.innerHTML;
    var formattedContent = formatText(content);
    editor.nextElementSibling.value = formattedContent;
  });
});

// Função para mostrar o alert
function showAlert() {
  alert(document.querySelector('textarea[name="conteudo"]').value);
}

// Função para formatar o texto
function formatText(content) {
  content = content.replace(/<pre[^>]*>([^]*?)<\/pre>/g, '```$1```')
    .replace(/<\/?p[^>]*>/g, '\r\n') // Converte <p> e </p> em quebras de linha
    .replace(/^\s+/gm, ''); // Remove espaços em branco no início de cada linha
  content = content.replace(/<strong>(.*?)<\/strong>/g, '*$1*'); // Negrito
  content = content.replace(/<em>(.*?)<\/em>/g, '_$1_'); // Itálico
  content = content.replace(/<s>(.*?)<\/s>/g, '~$1~'); // Tachado
  content = content.replace(/\n(?=[^\n]*$)/, ''); // Monoespaçado

  return content;
}