Rich Text - Tiny

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">
<div class="container py-3">
  <div class="row">
    <div class="col">
      <!-- Create the editor container -->
      <script src="https://cdn.tiny.cloud/1/hc0q4qbcvs6wsprk9krd7lsjwlceyx3k8yp5l7lv6a8t8vps/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
      <div class="input-group flex-nowrap">
        <span class="input-group-text">Prefixo de<br>mensagem</span>
        <textarea class="form-control tinymce" name="conteudo">Bem-vindo a <strong>WayFlow!</strong> 🐺</textarea>
      </div>
      <button type="submit" class="btn btn-primary my-5" onclick="showAlert()">Enviar</button>
    </div>
  </div>
</div>

JavaScript

tinymce.init({
  language: 'pt_BR',
  selector: 'textarea.tinymce', // Seletor para identificar os textareas onde você deseja ativar o TinyMCE
  height: 110,
  toolbar_mode: 'sliding',
  toolbar_sticky: true,
  menubar: 'file edit insert view format tools',
  menu: {
    file: {
      title: 'File',
      items: 'newdocument restoredraft | print'
    },
    edit: {
      title: 'Edit',
      items: 'undo redo | cut copy paste pastetext | selectall | searchreplace'
    },
    insert: {
      title: 'Insert',
      items: 'template | tagsButton | charmap emoticons | insertdatetime'
    },
    view: {
      title: 'View',
      items: 'code | visualaid visualchars visualblocks | preview fullscreen'
    },
    format: {
      title: 'Format',
      items: 'bold italic strikethrough codeformat | nestedCaseChange | removeformat'
    },
    tools: {
      title: 'Tools',
      items: 'wordcount'
    },
  },
  autosave_ask_before_unload: false,
  autosave_retention: '1440m',
  contextmenu: 'bold italic strikethrough codeformat | emoticons',
  quickbars_insert_toolbar: false,
  quickbars_selection_toolbar: 'bold italic strikethrough codesample',
  plugins: 'autosave charmap code codesample emoticons fullscreen insertdatetime preview quickbars searchreplace template visualblocks visualchars wordcount',
  toolbar: 'undo redo | toggleMenuStatusButton | bold italic strikethrough monospace | emoticons | tagsButton | removeformat',
  templates: [{
      title: 'Some title 1',
      description: 'Some desc 1',
      content: 'My content'
    },
    {
      title: 'Some title 2',
      description: 'Some desc 2',
      content: 'development.html'
    }
  ],
  setup: function(editor) {
    editor.on('init', () => {
      editor.getContainer().style.transition = 'border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out';
      updateFormattedContent(editor);
      var editorContainer = editor.getContainer(),
        menu = editorContainer.querySelector(".tox-menubar"),
       ...