How Plugins Enhance The WYSIWYG Editing Experience

WYSIWYG editors are one of the core components of any content management system (CMS). A well-coded, feature-filled WYSIWYG HTML editor can distinguish between a CMS users love and one they can’t stand. 

While all WYSIWYG editors have a set of basic functionality, the power of plugins enhances the editing experience. Plugins allow WYSIWYG editors to do more and provide advanced features to users. 

Therefore it is important to look at some of the plugins that make some WYSIWYG editors rise above others. It’s also essential to check how easily you can add these plugins. 

In this article, we’ll be taking you through the world of WYSIWYG editors and plugins so that you can take your users’ editing to the next level. 

Plugin Libraries

Froala provides numerous plugins available for download on their website:

A great WYSIWYG editor should provide numerous plugins that are easy to include and use. Because the more plugins there are, the more versatile the editor is and the more use cases it can accommodate. 

Moreover, the more intuitive and developer-friendly plugins, the faster the deployment is. 

The image below shows that WYSIWYG editors usually list plugins on their websites and documentation. So, it won’t be difficult for users to find the additional features they’re looking for.

Some of the most popular and powerful plugins are as follows: 

• Draggable – Drag and drop your rich contents, from images to video, across the content pane.
• Code Beautifier – Visually improves the code formatting in content, which is especially important for tech bloggers.
• Files Manager – Exceptional plugin for managing images and other files.
• Image TUI – This allows you to add filters and watermarks to the imagery on the fly.
• Markdown Support – Write and format content with Markdown — a huge time-saver for many content creators.
• Spell and Grammar Checker – Ensure users that they’ll be able to spot and correct grammatical and spelling errors as they type.
• Real-time Collaboration – Let users work together, create, review, edit content and mention others in real-time.

Using Plugins

Let’s look at how you can add plugins to WYSIWYG editors. In most cases, to get access to a plugin, you only have to insert its JavaScript and CSS files:

<!-- Include the Tables plugin CSS file -->
<link rel="stylesheet" href="https://davidwalsh.name/css/plugins/table.min.css">

<!-- Include the Tables plugin JS file -->
<script src="../js/plugins/table.min.js"></script>

Then, to include the plugin in an editor instance, add it to the pluginsEnabled key (or its equivalent in your preferred editor):

const editor = new FroalaEditor('#editor-element', {
    pluginsEnabled: ['table'],
    // ... more config
});

That’s all it takes to start using your chosen WYSIWYG editor plugins. You can play around with this excellent drag-and-drop extension example to see more of how helpful plugins are.

Creating Plugins

Some WYSIWYG editors allow you to create your plugins in a few simple steps. For instance, this is a generic, reduced format code for creating a plugin in an editor:

(function (FroalaEditor) {
  // Add an option for your plugin.
  FroalaEditor.DEFAULTS = Object.assign(FroalaEditor.DEFAULTS, {
    myOption: false
  });

  // Define the plugin.
  // The editor parameter is the current instance.
  FroalaEditor.PLUGINS.myPlugin = function (editor) {
    // Private variable visible only inside the plugin scope.
    var private_var="My awesome plugin";

    // Private method that is visible only inside plugin scope.
    function _privateMethod () {
      console.log (private_var);
    }

    // Public method that is visible in the instance scope.
    function publicMethod () {
      console.log (_privateMethod());
    }

    // The start point for your plugin.
    function _init () {
      // You can access any option from documentation or your custom options.
      console.log (editor.opts.myOption)

      // Call any method from documentation.
      // editor.methodName(params);

      // You can listen to any event from documentation.
      // editor.events.add('contentChanged', (params) => {});
    }

    // Expose public methods. If _init is not public then the plugin won't be initialized.
    // Public method can be accessed through the editor API:
    // editor.myPlugin.publicMethod();
    return {
      _init,
      publicMethod,
    }
  }
})(FroalaEditor);

As you can see, making your plugin can be pretty straightforward in structure should you have the right WYSIWYG editor.

Froala is an HTML editor with a library of plugins, making it a solid option for the WYSIWYG editor in your CMS. 

The existing plugin repository contains excellent functionality, and creating your plugin with Froala is easy. The Markdown editing plugin alone is worth it for writers like me!

So there you have it. You’ve learned about some of the best plugins you should look for in a WYSIWYG editor, adding and using plugins in these editors, and even making your plugins. 

This should be enough for you to take your users’ content editing with a WYSIWYG editor to greater heights.