How to integrate Formula Plugin into a TinyMCE Editor in a Phoenix Liveview project

Image by Jason Goh from Pixabay

Introduction

This is a follow-up to a previous tutorial that focuses on the integration of the TinyMCE editor into a Todo App, a Phoenix Liveview project. Access the tutorial here.

In this tutorial, we will integrate a formula plugin into the TinyMCE editor of the existing Todo App. Before we start, you need to set up the project if you did not follow the previous tutorial.

Cloning the Project Setup

To get started, clone the GitHub repository for this project https://github.com/mosiac05/phoenix_todo_app.

On your terminal, change the directory into the project folder.

$ cd phoenix_todo_app

Checkout to the final branch.

$ git checkout final

Fetch and install the dependencies.

$ mix deps.get

Then launch the project to see if all things are working as expected.

$ mix phx.server

Todo App Screen

When you go to localhost:4000 on your browser, you should see something like the image above.

We just have the Todo App screen that has a form with a regular input field for the title and a textarea field integrated with TinyMCE editor for the description of a new todo. Below the form is a list of todos.

Cloning the Formula Plugin

Go to https://github.com/mosiac05/tinymce-formula and clone the formula plugin into your live/priv/static/images directory. You can also clone it elsewhere and then copy the cloned repository into the /images directory.

Delete all git-related files and directories from the formula plugin’s folder so that your project can track the changes in the plugin’s folder. For this tutorial, we have only the /.git directory and .gitignore file to delete.

Integrating the Formula Plugin

We will update the TinyMCE Hook in our assets/js/tinyMCEHook.js file. As described in the plugin’s usage documentation, we will include the formula plugin as an external plugin.

In the tinymce.init() options object, add the external_plugins option that takes an object, with the ID or name for the plugin as the key and a link to the plugin’s directory as the value.

external_plugins: {
  'formula': '/images/tinymce-formula/plugin.min.js'
}

Remember that we added the tinymce-formula plugin directory in the priv/static/images/ directory.

Finally, include the name of the plugin in the options object as below.

toolbar: ... + 'formula | removeformat | help'

The updated TinyMCE options object is given below.

tinymce.init({
  selector: `#${elID}`,
  height: 300,
  plugins: [
    'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
    'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
    'insertdatetime', 'media', 'table', 'help', 'wordcount'
  ],
  external_plugins: {
    'formula': '/images/tinymce-formula/plugin.min.js'
  },
  toolbar: 'undo redo | blocks | ' +
    'bold italic backcolor image | alignleft aligncenter ' +
    'alignright alignjustify | bullist numlist outdent indent | ' +
    'formula | removeformat | help',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
  placeholder: 'Type something here...',
});

Reload the Todo App and click on the horizontal three dots for more options, then click on the formula icon.

Showing More Options icon and Formula icon

You should have a screen as shown below.

The Formula Editor screen

You can create your formulas using the editor shown in the dialog.

Conclusion

This tutorial is the sequel of an initial tutorial that just focused on integrating TinyMCE into a Phoenix Liveview project. This tutorial goes further to add a plugin that enables the creation of formulas.

I am glad to share this tutorial with you. You can access the code here on GitHub https://github.com/mosiac05/phoenix_todo_app. Cheers!