Basic Froala Editor jsFiddle

by cleaver

HTML

<script src="https://editor-latest.s3.amazonaws.com/js/froala_editor.pkgd.min.js"></script>
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/css/froala_editor.pkgd.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/css/froala_style.min.css">
<script>
(function(FE, $, _) {
  'use strict';
  $.extend(FE.POPUP_TEMPLATES, {
    'audio.insert': '[_BUTTONS_][_BY_URL_LAYER_][_UPLOAD_LAYER_][_PROGRESS_BAR_]',
    'audio.edit': '[_BUTTONS_]'
  });
  $.extend(FE.DEFAULTS, {
    audioAllowedTypes: ['mp3', 'mpeg', 'x-m4a'],
    audioEditButtons: ['audioReplace', 'audioRemove', '|', 'audioAutoplay', 'audioAlign'],
    audioInsertButtons: ['audioBack', '|', 'audioByURL', 'audioUpload'],
    audioMove: true,
    audioSplitHTML: false,
    audioUpload: true,
    audioUploadMethod: 'POST',
    audioUploadParam: 'file',
    audioUploadParams: {},
    audioUploadURL: 'https://i.froala.com/upload'
  });

  // This SVG icon is licensed under Apache 2.0 and was retrieved from
  // https://material.io/resources/icons/?search=audio&icon=volume_up&style=baseline
  $.extend(FE.SVG, {
    insertAudio: 'M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'
  });

  FE.PLUGINS.audio = function(editor) {
    const MISSING_LINK = 1;
    const ERROR_DURING_UPLOAD = 2;
    const BAD_RESPONSE = 4;
    const BAD_FILE_TYPE = 8;

    const errorMessages = {
      [MISSING_LINK]: 'No link in upload response.',
      [ERROR_DURING_UPLOAD]: 'Error during file upload.',
      [BAD_RESPONSE]: 'Parsing response failed.',
      [BAD_FILE_TYPE]: 'Unsupported file type - please provide an audio file.',
    };

    let currentAudio = null;

    const stopEditing = function(audio) {
      if (!audio) audio =...

JavaScript

const editor = $('#froala-editor').froalaEditor({
            pluginsEnabled: [
                'align',
                'charCounter',
                'codeBeautifier',
                'codeView',
                'colors',
                'draggable',
                'embedly',
                'emoticons',
                'entities',
                'file',
                'fontAwesome',
                'fontFamily',
                'fontSize',
                'fullscreen',
                'image',
                'imageTUI',
                'imageManager',
                'inlineStyle',
                'inlineClass',
                'lineBreaker',
                'lineHeight',
                'link',
                'lists',
                'paragraphFormat',
                'paragraphStyle',
                // 'quickInsert',
                'quote',
                'save',
                'table',
                'url',
                'video',
                'wordPaste',
                'audio',
            ],
            toolbarButtons: [
                [
                    'bold',
                    'italic',
                    'underline',
                    'strikeThrough',
                    // 'subscript',
                    // 'superscript',
                    'fontFamily',
                    'fontSize',
                    '|',
                ],
                [
                    'paragraphFormat',
                    'paragraphStyle',
                    // 'quote',
                    'align',
                    'formatOL',
                    'formatUL',
                    'outdent',
                    'indent',
                    'insertHR',
                    '-',
                ],
                [
                    'insertLink',
                    'insertImage',
                    'selectHeaderImage',
                    'insertVideo',
                    //  'insertFile',
                    'insertTable',
             ...