Exploring the Differences Between Classic, IFrame, Inline, and Document Editing Modes
Froala is a popular rich text editor that offers users various editing modes, each with its own user interface and use cases. As a writer or content creator, understanding the differences between these modes can help you select the most appropriate one for your project needs.
In this blog post, we’ll take a deep dive into the four main editing modes provided by Froala: Classic, IFrame, Inline, and Document. We’ll explore the key characteristics of each mode, their benefits, and the scenarios where they are best suited. By the end, you’ll have a solid understanding of Froala’s editing capabilities and be equipped to choose the right mode for your content creation workflows.
Classic Froala Editor
The Classic mode is the default and most commonly used editing mode in Froala. In this mode, the editor is displayed as a standalone element on the page, typically within a <div> or <textarea> element.
This mode is the default mode in the Froala editor. You don’t need any special configuration when you initialize the editor.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
<link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.min.css' rel='stylesheet' type='text/css' />
</head>
<body>
<div id="froala-editor"></div>
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.min.js'></script>
<script>
new FroalaEditor('div#froala-editor');
</script>
</body>
</html>
In this mode, the editor toolbar is always visible at the top of the editor. If you want to make the toolbar stay visible as you scroll the content, you need to enable the toolbarSticky option.
new FroalaEditor('div#froala-editor', {
toolbarSticky: true
})
You can also display the toolbar at the bottom instead of the top of the editor by setting the toolbarBottom option to true.
new FroalaEditor('div#froala-editor', {
    toolbarBottom: true
  })
Explore how to customize the Froala editor toolbar.
The Froala classic mode is suitable for scenarios where you want the editor to be a distinct element on the page, such as in a content management system or a form. It provides a familiar and intuitive interface for users to input and format text.
IFrame Froala Editor
The IFrame mode embeds the Froala editor within an <iframe> element. This isolates the editor’s content and styling from the main page, providing a more secure and independent editing environment.
This mode is useful when you need to ensure the editor’s content and styles do not interfere with the surrounding page. It can be particularly helpful in scenarios where the page has complex layouts or existing styles that could potentially conflict with the editor.
The user interface of the editor is the same as it is in the classic mode.
To enable this mode, set the iframe option to true.
new FroalaEditor('div#froala-editor', {
iframe: true
})
Full Page Mode
The Full Page mode is similar to the classic mode but allows the usage of HTML, HEAD, BODY tags and DOCTYPE declaration. This mode is useful when you need to edit the entire web page, including the <head> and <body> sections. It provides a more comprehensive editing experience, allowing you to modify the page’s metadata, styles, and overall structure. The Full Page mode is particularly beneficial when working on standalone HTML pages or templates that require a complete document-level editing capability.
To enable the Full Page mode, set the fullPage option to true when initializing the Froala Editor.
new FroalaEditor('div#froala-editor', {
fullPage: true
})
Inline (Distraction-Free) Mode
The minimalist interface of this mode helps you focus on your content. In Froala’s Inline mode, the editor’s toolbar remains accessible but stays hidden until needed, providing a clean and minimalist interface, ensuring a seamless and uninterrupted writing experience. This mode makes it easier for users to focus on their content.
var editor = new FroalaEditor('div#froala-editor',{
toolbarInline: true,
});
The toolbarVisibleWithoutSelection option allows you to control whether the toolbar should be displayed when the user:
- Select content within the editor.
- Focuses on the editor without selecting any content.
This gives you the flexibility to decide when the toolbar should be visible to the user.
var editor = new FroalaEditor('div#froala-editor',{
toolbarInline: true,
toolbarVisibleWithoutSelection: true,
});
By default, Froala displays Character and Word Counts at the bottom of the editing area. However, it may be feasible to hide this information in this mode.
var editor = new FroalaEditor('div#froala-editor',{
toolbarInline: true,
toolbarVisibleWithoutSelection: true,
charCounterCount: false,
wordCounterCount: false
});
This mode is suitable for scenarios where you want to provide a seamless editing experience within the page’s content, such as in a blog post or a content-heavy website.
Explore Froala’s inline editing mode.
Document Mode
The Document mode in Froala is similar to the classic mode but with a different default toolbar configuration optimized for creating online documents. The editing area is taller, providing an A4 page layout design. However, this mode does not offer page break, headers, or footers features. The Document mode is best suited for scenarios where you need a rich text editor with a document-like appearance, such as in a word processor or a report generator. The increased editing area height makes it easier to work with longer-form content.
The content is editable within the editor, and the changes are reflected in the underlying HTML structure.
To enable this mode, set the documentReady option to true.
new FroalaEditor('div#froala-editor',{
documentReady : true,
});
Edit in Popup
The Froala editor’s “Edit in Popup” mode allows users to quickly update text content within a focused popup environment. In this mode, the toolbar functionality is not available, making formatting a text is not an option but users can easily make simple text updates without the complexity of the complete editor interface. To enable this mode, set the editInPopup option to true when initializing the Froala editor. The popup will appear when the user focuses on the text, providing a streamlined experience for updating specific content areas within your application.
new FroalaEditor('div#froala-editor',{
editInPopup : true,
});
What Are Froala Initialize Modes?
Froala is a flexible editor that can be initialized on different HTML elements, giving different UI and options for each.
The different modes we have discussed in this article can be applied when the editor is initialized on <div>, <p>, or <textarea> elements. However, the Froala editor can be initialized on other elements where these modes will not be applicable. For example:
- Initialize on a Button: in this mode, a popup will be displayed to update the button text.
- Initialize on an Image: The image popup will be displayed to replace or edit the image.
- Initialize on a link: allowing you to update, remove, and set link attributes.
Conclusion
Froala rich text editor offers a variety of editing modes to cater to different use cases. The choice of editing mode will depend on the specific requirements of your project and the type of editing experience you want to provide to your users. By understanding the differences between the Classic, IFrame, Inline, and Document modes, you can choose the most appropriate mode for your project and provide a seamless and efficient editing experience for your users.
No comment yet, add your voice below!