Effortless Control Over Multiple Editors with Shared Toolbar

Are you tired of juggling multiple toolbars and switching between different editing interfaces just to manage your content? The solution may lie in the power of a shared toolbar – a centralized control hub that allows you to seamlessly manage content across multiple rich text editors on a single page.

In this article, we’ll explore the benefits of managing multiple editors with shared toolbar, demonstrate how to implement this feature, and uncover use cases that showcase its versatility in modern content management systems.

The Power of a Shared Toolbar Controlling Multiple Editor Instances

Traditionally, when working with multiple editable areas on a webpage, each editor would have its own dedicated toolbar, leading to a cluttered and disjointed user experience. However, the ability to leverage a single, shared toolbar across multiple editors can offer a range of benefits that optimize the content creation and management workflow.

Consistency and Predictability

By managing multiple editor instances with a shared toolbar, you can ensure a uniform editing experience across all content sections on a page. All editors will share the same toolbar configuration, making the interface predictable and intuitive for users. This consistency helps reduce cognitive load and enables seamless transitions between different editing areas.

Resource Efficiency

Only one instance of the toolbar is created and reused for multiple editor instances. This reduces the overall DOM complexity of the page.

Only one instance of the toolbar is created and reused for multiple editor instances. This reduces the overall DOM complexity of the page, potentially improving performance and reducing resource consumption.

By minimizing the duplication of toolbar elements, you can streamline the codebase and optimize the user experience.

For more on DOM optimization, see MDN’s guide on performance best practices

Simplified Maintenance

When you need to update the toolbar layout or the available buttons, making changes in one place automatically updates all editors sharing that toolbar. This centralized control simplifies the maintenance and evolution of the content management system, as any enhancements or modifications to the toolbar are instantly reflected across all associated editors.

Improved User Experience

A shared toolbar provides a cohesive and seamless editing environment, making it easier for users to switch between different content sections without disrupting their workflow. This level of integration and consistency can lead to increased user satisfaction and productivity, as they don’t have to reorient themselves with a new toolbar every time they shift their focus.

Implementing a Shared Toolbar

Implementing a shared toolbar for multiple editors is a straightforward process; the Froala WYSIWYG Editor provides built-in support for this functionality. Let’s walk through an example of how to set up a shared toolbar using the Froala Editor:

<!-- HTML -->
<div id="toolbar-container"></div>
<div id="editor1" class="froala-editor"></div>
<div id="editor2" class="froala-editor"></div>

// JavaScript
new FroalaEditor('.froala-editor', {
  toolbarContainer: '#toolbar-container',
  toolbarButtons: [
    'fullscreen', 'bold', 'italic', 'underline', 'strikeThrough',
    'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color',
    'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align',
    'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-',
    'insertLink', 'insertImage', 'insertVideo', 'insertFile',
    'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR',
    'selectAll', 'clearFormatting', '|', 'print', 'help', 'html', '|',
    'undo', 'redo', 'trackChanges', 'markdown'
  ]
});

In this example, we have two editor instances on the page, #editor1 and #editor2, both of which are initialized with the Froala Editor. The key configuration is the toolbarContainer option, which is set to the CSS selector #toolbar-container. This tells the Froala Editor to use the #toolbar-container element as the shared toolbar for both editor instances.

By leveraging this shared toolbar approach, any actions performed on the toolbar will be reflected in the active editor, ensuring a seamless and consistent editing experience for the user.

Use Cases for Shared Toolbars

The ability to control multiple editors with a single shared toolbar can be particularly beneficial in a variety of scenarios:

Multi-section Editing Pages

Websites or web applications that have multiple editable content sections, such as an article body, sidebar notes, or call-to-action areas, can benefit from a shared toolbar. This ensures a uniform editing experience across the entire page, making it easier for users to navigate and format content consistently.

Content Management Systems (CMS)

In content management systems, editors often need to switch between different areas of content, such as the main article body, metadata, or related resources. A shared toolbar can provide a centralized and efficient way to manage the formatting and styling of these various content sections, streamlining the editing workflow.

Collaborative Editing Platforms

In collaborative editing environments, where multiple users may be working on different parts of a document simultaneously, a shared toolbar can help maintain a consistent formatting and styling experience. This can be particularly useful in scenarios like online document collaboration, project management tools, or online whiteboards.

Dynamic Forms

Websites or web applications that incorporate rich text fields within forms can benefit from a shared toolbar approach. By using a single toolbar to control the formatting options across multiple form fields, you can avoid cluttering the interface and provide a more organized and intuitive editing experience for users.

Example: Create fully-templated documents with shared toolbar

Building on the concept of a shared toolbar, you can also leverage the ability to designate certain content sections as “locked” or “editable.” This gives you the power to control which parts of the document users can modify, ensuring the overall structure and branding remain consistent, while still allowing for targeted editing where needed.

Let’s say you’re building a company brochure template that has both static, branded content and dynamic, editable areas. Using the Froala Editor, you can create a template that has the following structure:

<div class="template-container">
  <dev id="toolbar-container"></dev>
  <br />
  <div class="header"></div>
  <dev id="editor1" class="editable-section">
    <h1>Zymexi Corp</h1>
  </dev>
  <div class="non-editable separator"></div>
  <div class="non-editable">
    <h2>About the Company</h2>
  </div>
  <!-- Editable main content section -->
  <div class="editable-section" id="main-content">
    <p>We are a leading provider of high-quality products and services.</p>
  </div>
  
    <div class="non-editable">
    <h2>Our Products</h2>
  </div>
  <!-- Editable main content section -->
  <div class="editable-section" id="products">
<ul>
	<li>First Product: product summary</li>
	<li>Second Product: product summary</li>
	<li>Third Product: product summary</li>
</ul>
  </div>
  
    <div class="non-editable separator"></div>

  <!-- Non-editable footer section -->
  <footer class="non-editable">
    <p>&copy; 2025 Acme Corp. All rights reserved.</p>
  </footer>
</div>

In this example, some sections are marked as “non-editable” using the non-editable class, while other sections are designated as “editable” with the editable-section class and a unique ID.

We can now initialize Froala on the editable section and control them with one toolbar:

let editor = new FroalaEditor(".editable-section", {
  toolbarContainer: "#toolbar-container",
  toolbarInline: true,
  charCounterCount: false,
  wordCounterCount: false,

  toolbarVisibleWithoutSelection: true,
  toolbarButtons: [
    "bold",
    "italic",
    "underline",
    "strikeThrough",
    "|",
    "fontFamily",
    "fontSize",
    "color",
    "|",
    "paragraphFormat",
    "align",
    "formatOL",
    "formatUL",
    "outdent",
    "indent",
    "quote",
    "-",
    "insertLink",
    "insertImage",
    "insertVideo",
    "insertFile",
    "insertTable",
    "|",
    "clearFormatting",
    "html",
    "|",
    "undo",
    "redo",
  ],

})

 Adding some CSS code to style the template and make the toolbar visible all the time

.fr-toolbar{
  display: block !important;
  background:#eee
}

.header{
  width:100%;
  height: 100px;
  background-color: greenyellow
}

.separator{
  background-color: greenyellow;
  width: 60px;
  height: 7px;
  
}
.editable-section{
  border: 2px solid transparent;
}
.editable-section:hover{
  border: 2px solid #eee;
}

By using the shared toolbar and locking down specific sections, your users will have a seamless editing experience where they can focus on the content that requires updates, without accidentally modifying the static, branded elements. This ensures that the overall structure, branding, and layout of the document remain consistent, while still allowing for targeted editing where needed.

With this approach, you eliminate the need for your users to constantly preview their changes, as they’ll see the exact 1:1 representation of the final output, streamlining the content creation and management workflow.

Optimizing the Shared Toolbar Experience

While the concept of a shared toolbar is relatively straightforward, there are a few additional considerations and best practices to keep in mind when implementing this feature:

Lazy Loading Editors

When using multiple instances of the Froala Editor on the same page, it’s recommended to set the initOnClick option to true.

As we discussed in Froala tips and tricks article, this lazy-loads the editors, improving the initial page load performance and reducing the overall resource footprint.

Customizing the Toolbar

The Froala Editor allows for extensive customization of the toolbar, enabling you to fine-tune the available buttons and their arrangement to suit the specific needs of your application or user base. This level of control allows you to create a tailored editing experience that aligns with your content management requirements.

Seamless Editing Experience

By combining the shared toolbar with the Froala Editor’s inline editing capabilities, you can create a truly seamless editing experience. Users can click directly on the content they want to edit, without the need to navigate to a separate editing window or preview mode. This “what-you-see-is-what-you-get” (WYSIWYG) approach can significantly enhance the user’s productivity and content management workflow.

Conclusion

Mastering the use of a shared toolbar to control multiple rich text editors on a single page can be a powerful tool in your content management arsenal. By leveraging this feature, you can streamline the editing experience, improve resource efficiency, and maintain consistency across your digital content.

Whether you’re working on a multi-section website, a complex content management system, or a dynamic form-based application, the shared toolbar approach can help you create a more intuitive, efficient, and user-friendly editing environment.

As you continue to refine and optimize your content management strategies, exploring the capabilities of shared toolbars and integrated editing experiences can be a game-changer in delivering a superior content creation and collaboration experience for your users.