Froala and Other Editors

Froala Editor

Froala is the default text editor within Brilliance CRM. The reasons we chose Froala Editor over others are:

• The editor was much more modular allowing us to streamline the amount of code that was loaded providing a faster and more robust user experience.
• More control over the styling.
• Copy/Paste from Microsoft Word was more reliable where others "locked" the web browser.
• More mobile friendly than other editors we tested.
• The ability to provide a drag-and-drop experience for our Communications module and the ability to add it in other areas that will benefit from a drag-and-drop experience.
• Pasting of images is a lot more clean and condensed.

 <style>{{EDITORSTYLESHEET}}</style>
 <script>
 new FroalaEditor('#{{EDITORID}}', {
 attribution: false,
 charCounterMax: {{EDITORMAXCHARACTERS}},
 direction: 'auto',
 height: {{EDITORHEIGHT}},
 heightMin: 200,
 heightMax: 500,
 htmlRemoveTags: ['script', 'style', 'base'],
 htmlSimpleAmpersand: true,
 linkConvertEmailAddress: true,
 theme: '{{EDITORTHEME}}',
 toolbarSticky: true,
 useClasses: false,
 
 // Default Toolbar
 toolbarButtons: {
 'moreText': {
 'buttons': ['bold', 'italic', 'underline'],
 'buttonsVisible': 6
 },
 'moreParagraph': {
 'buttons': ['ul','ol','hr'],
 'buttonsVisible': 6
 },
 'moreMisc': {
 'buttons': ['undo', 'redo', 'fullscreen', 'help'],
 'buttonsVisible': 6
 }
 },
 
 // Large Screen Toolbar (≥ 1200px)
 toolbarButtonsLG: {
 'moreText': {
 'buttons': ['bold', 'italic', 'underline'],
 'buttonsVisible': 6
 },
 'moreParagraph': {
 'buttons': ['ul','ol','hr'],
 'buttonsVisible': 6
 },
 'moreMisc': {
 'buttons': ['undo', 'redo', 'fullscreen', 'help'],
 'buttonsVisible': 6
 }
 },
 
 // Medium Screen Toolbar (≥ 992px)
 toolbarButtonsMD: {
 'moreText': {
 'buttons': ['bold', 'italic', 'underline'],
 'buttonsVisible': 6
 },
 'moreParagraph': {
 'buttons': ['ul','ol','hr'],
 'buttonsVisible': 6
 },
 'moreMisc': {
 'buttons': ['undo', 'redo', 'fullscreen', 'help'],
 'buttonsVisible': 6
 }
 },
 
 // Small Screen Toolbar (≥ 768px)
 toolbarButtonsSM: {
 'moreText': {
 'buttons': ['bold', 'italic', 'underline'],
 'buttonsVisible': 5
 },
 'moreParagraph': {
 'buttons': ['ul','ol','hr'],
 'buttonsVisible': 5
 },
 'moreMisc': {
 'buttons': ['undo', 'redo', 'fullscreen', 'help'],
 'buttonsVisible': 5
 }
 },
 
 // Extra Small Screens (< 768px)
 toolbarButtonsXS: {
 'undoRedo': {
 buttons: ['undo', 'redo'],
 'buttonsVisible': 4
 },
 'moreText': {
 'buttons': ['bold', 'italic', 'underline'],
 'buttonsVisible': 4
 }
 }
 
 });
 </script>


Available Fields

When we added our editors we found that having some variables was greatly needed to streamline and reduce the code as well as provide a more code free environment. As such, below are the fields that are available within the editor:

• {{EDITORID}}: This is the unique editor ID for each of the text boxes in the system. You don't need to know the text box ID's as this code will automatically put it in for you.
• {{EDITORHEIGHT}}: This is the height you want for the editor.
• {{EDITORMAXCHARACTERS}}: This is the maximum number of characters that are allowed in the box. For Froala Editor a "-1" (no quotes) means there is no limit in the number of characters.
• {{EDITORSTYLESHEET}}: Based on the theme (see below) that is chosen this is the custom stylesheet that ties to the theme. We provide four spots for the themes and you can add additional using Application Settings (Advanced).
  • Note: The {{EDITORSTYLESHEET}} can be added to the Portal Scripts so that the stylesheet is loaded only once in the page. This is the best practice.
• {{EDITORTHEME}}: This is the "Editor Theme" that is found in the Theme settings. This allows you to quickly change the theme of the editor.

CK Editor

CK Editor was the first editor we looked at for Brilliance. Due to a lack of styling and control we chose Froala Editor as our editor of choice. A benefit of Brilliance is you can use CK Editor or any editor. We're including the code for CK Editor so that you can use CK Editor or use another JavaScript HTML editor of your choosing.

 <script>
 const editorConfiguration{{EDITORID}} = {
 toolbar: {
 plugins: [ 'Autoformat', 'Autoexpand' ],
 autoExpand: true,
 items: [
 'paragraph',
 '|',
 'bold',
 'italic',
 '|',
 'link',
 'bulletedList',
 'numberedList',
 '|',
 'undo',
 'redo'
 ]
 }
 };
 
 ClassicEditor
 .create(document.querySelector('textarea[name="{{EDITORID}}"]'), editorConfiguration{{EDITORID}})
 .catch(error => {
 console.error(error);
 }
 );
 </script>