Tips and Tricks to Maximize User Experience with Froala WYSIWYG Editor – part 2
Froala WYSIWYG editor has a powerful API with over 240 API options, 100+ events, and 220+ methods. In the “Froala’s tips and tricks – part 1” article, We started to explain how to use the Froala editor API to maximize and enhance the user experience, usage, and productivity. We are excited to continue on this journey by uncovering more valuable tips and tricks of the Froala editor.
Highlighting and Beautifying HTML Code for a Seamless User Experience
WYSIWYG editors were invented to allow users to create rich-text content without needing to know HTML. However, for tech-savvy users or developers, Froala provides a built-in feature to write and edit the content HTML code.
When dealing with large amounts of content within the editor, modifying the HTML code can become quite challenging, even for experienced developers, unless it is properly highlighted and beautified.
To address this issue, Froala has developed the CodeBeautifier plugin, which helps in arranging the code in a more readable format. With the help of this plugin, users can easily comprehend and modify the structure of the HTML code.
Furthermore, it is easy to integrate Froala with codeMirror which highlights the code making the editing process quite handy for developers.
To integrate codeMirror with Froala, simply ensure that the necessary CodeMirror stylesheet and script files are included within your webpage before calling the Froala scripts.
- Add Stylesheets at the head of the webpage
- Add the JS files in the following order:
- Make sure to configure the following API options correctly:
-
- codeMirror – which enables or disables the use of Code Mirror, the default value is window.codeMirror.
- codeMirrorOptions – that can be used to customize Code Mirror options, such as tab size. Its default value is:
{ indentWithTabs: true, lineNumbers: true, lineWrapping: true, mode: 'text/html', tabMode: 'indent', tabSize: 2 }See a full example here https://froala.com/wysiwyg-editor/examples/code-mirror/
Display Shortcut Commands Hints in the Froala Editor
Another user-friendly feature of the Froala editor is the ability to use shortcuts for quick and easy to perform many editor commands. For example, you can use the (Ctrl+B or ⌘ Cmd + B) shortcut to bold the selected text in the editor. Using shortcuts is a real time-saver and efficiency booster for your users who are familiar with these shortcuts.
Users may not know these shortcuts are available and they can use them. To help them, you can display the shortcut code in the button tooltip by setting the shortcutsHint API option to true.
new FroalaEditor('.selector', { shortcutsHint: true });
Now, when the user hovers over any toolbar options, they will see a tooltip with the corresponding keyboard shortcut, providing a quick reference for users who prefer to use the keyboard over the mouse.
However, users can see the full list of available shortcuts by clicking on the editor help button, displaying the shortcodes in the tooltip can be an effective way to educate users about these productivity features.
Control Froala Editor with External Buttons
When it comes to developing your app, you may encounter situations where you need to have control over certain editor actions through an external button. No problem, with Froala you can do this easily. Before invoking the external button function, you need to ensure that the editor is correctly loaded and retrieve the editor instance to access its methods. This can easily done inside the initialized API event.
Let’s say you want to clear the editor’s content using an external button. To achieve this, you’ll need to add a click event listener inside the editor-initialized event. This way, when the user clicks on the clear button, the event will be triggered and you can use Froala API’s html.set method to clear the editor content. This method allows you to set the editor’s content in HTML format. In our case, we want to clear the content, so we’ll call the method with an empty argument. Here’s an example:
const editorInstance = new FroalaEditor('#edit', {
events: {
initialized: function () {
const editor = this
document.getElementById('clearButton').addEventListener("click", function () {
editor.html.set('')
editor. events.focus()
})
}
}
})
In the above example, by clicking on the button with ID ‘clearButton’, the editor content will be cleared and the editor will be focused, ready to accept new input from users.
You can perform different actions by utilizing different Froala API methods to manipulate the editor’s behavior.
These sorts of interactions may allow an enhanced, user-friendly navigation and editing experience.
Control Multiple Editors Using A Shared Toolbar
Yet another brilliant feature of the Froala Editor is the ability to use one toolbar to perform actions in multiple editor instances on the same page. This can be extremely useful in cases where you have different editable sections but want to have centralized control over them using one toolbar. This shared toolbar can be positioned anywhere on the webpage and works in sync with the active editor instance.
To set up a shared toolbar, you need to set the toolbarContainer API option to the CSS selector of the element you want to use as your toolbar. Here’s an example:
new FroalaEditor("#edit1, #edit, #edit2", {
toolbarContainer: '#foo',
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'textColor', 'backgroundColor', 'emoticons'], ['paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent'], ['insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo'] ]
})
In the above example, we created three different editors on the following elements `#edit1`, `#edit`, and `#edit2` on the page. The shared toolbar of the three editors is placed inside the `#foo` HTML element.
By using this shared toolbar, users will only need to familiarize themselves with one toolbar to manage multiple editors, simplifying their editing experience and promoting efficiency.
Remember as we discussed in a previous article, when you are using multiple instances of the Froala editor on the same page, it is better to set the initOnClick option to true to lazy load the editors and improve the page performance.
Make Your Froala Editor Toolbar Sticky for Easy Navigation
The toolbar is an important element in WYSIWYG editors. It is the element where buttons are available to allow users to interact with the content. In a case where you have a lot of content in the editor, the toolbar might disappear as users scroll down the page, leading to a less efficient and user-friendly experience.
To address this, Froala offers the stickyToolbar API option. When set to true, the toolbar will move as users scroll in the editor box. Here’s an example of how you can activate this feature:
new FroalaEditor('div#froala-editor', {
toolbarSticky: true
})
Boosting User Experience with Advanced Features and Customization Options
In this article, we have discussed various features of the Froala WYSIWYG editor that enhance the user’s editing experience. We have covered respective aspects like displaying shortcut hints, using external buttons to perform actions, controlling multiple editors with a shared toolbar, and finally, incorporating a scrollable toolbar for easy and efficient navigation. Using these features, developers can ensure their applications provide a user-friendly and efficient editing experience to their end-users.
Remember, the power of the Froala editor is not confined to these features alone. Froala offers a multitude of APIs and options that developers can utilize to tailor the editor’s behavior to the specific needs of their applications. Explore the Froala documentation now, try it for free, and when you are ready, pick a plan that suits your project needs to leverage the full capabilities of this powerful editing tool without the unlicensed banner.
Happy coding!
No comment yet, add your voice below!