Froala WYSIWYG Editor Language V3

by Jithin Raj P R

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://editor-latest.s3.amazonaws.com/v3/js/froala_editor.pkgd.min.js"></script>
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_editor.pkgd.min.css">
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_style.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.4.0/css/jquery.atwho.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.4.0/js/jquery.atwho.min.js"></script>
<div id="froala-editor">
  <p>Froala WYSIWYG Editor can easily be integrated with At.js library.</p>
  <p>Type an {{ to display the autocomplete list. </p>
  <br>
</div>⁠

JavaScript

// Define data source for At.JS.
var dsPlaceholders = ["ticket.title}}", "ticket.description}}" ];
var dsDescriptions = ["Ticket title", "Ticket description"]

// Build data to be used in At.JS config.
var names = $.map(dsPlaceholders, function (value, i) {
  return {
    'id': i, 'name': value, 'description': dsDescriptions[i]
  };
});

// Define config for At.JS.
var config = {
  at: "@",
  data: names,
  displayTpl: '<li>{{${name} <br /><strong>${description}</strong></li>',
  limit: 200
}

// Initialize editor.
var editor = new FroalaEditor('#froala-editor', {
    events: {
      initialized: function() {
        $(editor.el).atwho(config);

    editor.events.on('keydown', function (e) {
      if (e.which == FroalaEditor.KEYCODE.ENTER && $(editor.el).atwho('isSelecting')) {
        return false;
      }
    }, true);      }
    }
  });