How to make tinyMCE plugin 4.9 more user-friendly and less dangerous

TinyMCE is a strange open source project which is no longer even open source. To use the current version 6, one has to put up with a cloud version and agree to pay at least $1000/year. The free version is crippleware – TinyMCE publishers have removed basic functionality like Clean Paste from MS Word. To have access to even a standard feature like revisions, a publisher must be on the Pro plan at $145/month. Even if a publisher agrees to pay for Pro, revisions are another $787/year. Version 5 is the last mixed license version but is less popular as it requires quite a few changes and is a dead end, with important functionality already removed and made commercial.

Constantly shifting feature set and high per site pricing are why many open source projects continue to use version 4.9.x of TinyMCE. This includes WordPress in its classic editor, so TinyMCE still has a large footprint. Some other notable projects include Mosaico email builder, AngularJS, BackDrop. Or in this case, The Newsletter Plugin.

The Newsletter plugin for WordPress is quite powerful. But the admin interface is quite complex and not particularly intuitive. A user must plan to take the time to learn how things work. It looks like The Newsletter author planned for users to create and edit their newsletters elsewhere and just paste the result into The Newsletter.

However, if a publisher regularly sends a newsletter it’s a lot easier to have a template inside The Newsletter plugin and just fill in the blanks there. The built-in editor is overfeatured. Instead of using the minimalist WordPress Classic editor, The Newsletter plugin included their own version of TinyMCE 4.9.11 (same version as WordPress but very different configuration.

This is how the editor looks like:

It’s clear that it has too many formating options, incuding Font Family, Font Sizes, the colors and also a whole menu from File, through Edit down to Table.

If your editor goes and uses copy-paste from something like Microsoft Word horrible HTML markup is added and your newsletters can never look good.

The improved configuration

This is how our improved editor looks like:

As you can see we got rid of the menu bar completely. The only useful thing in it is View -> Source code which we instead put to the toolbar.

For the toolbar we are only keeping:

• the block format dropdown (to let users pick headings)
• the link button
• bold, italic, strikethrough, alignment and lists
• the “Paste as text” button.

The “Paste as text” button is very important. We have it enabled by default to ensure no bad HTML is carried over from other browsers or word processors.

You can still hit the button to enable rich pasting, but it’s still restricted to basic HTML – enough to make sure your links and bold text is carried over.

We are sharing our configuration with the world to help other The Newsletter users. The improved configuration looks like this:

tinymce.init({
  height: 600,
  mode: "specific_textareas",
  editor_selector: "visual",
  statusbar: true,
  allow_conditional_comments: true,
  menubar: false,
  table_toolbar: "tabledeleterow",
  toolbar: "formatselect | link | pastetext | bold italic strikethrough | alignleft aligncenter | bullist numlist | code",
  block_formats: 'Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3;Header 4=h4',
  formats: {
      h1: {
        block: 'h1', styles: {
          fontSize: '', lineHeight: '', marginTop: '', marginBottom: ''
        }
      },
      h2: {
        block: 'h2', styles: {
          fontSize: '', lineHeight: '', marginTop: '', marginBottom: ''
        }
      },
      h3: {
        block: 'h3', styles: {
          fontSize: '', lineHeight: '', marginTop: '', marginBottom: ''
        }
      },
      h4: {
        block: 'h4', styles: {
          fontSize: '', lineHeight: '', marginTop: '', marginBottom: ''
        }
      },
      p: {
        block: 'p',
        styles: {
          'fontSize': '16px',
          'lineHeight': '24px',
          'marginTop': '17px',
          'marginBottom': '17px',
          'textAlign': 'left'
        }
      },
  },
  entity_encoding: "raw",
  image_advtab: true,
  image_title: true,
  paste_as_text: true,
  paste_plaintext_inform: false,
  plugins: "paste table fullscreen legacyoutput textcolor colorpicker link image code lists fullpage",
  relative_urls: false,
  convert_urls: false,
  remove_script_host: false,
  document_base_url: " /* The WordPress homepage URL is here */ ",
  content_css: [ /* They load their plugin editor CSS files here */ ]
});

The changes are:

• menubar: false is what removes the menu bar
• In table_toolbar we only kept tabledeleterow as we are not editing tables. We only use tables to create newsletter layout with best compatibility for bad email clients (Outlook).
• toolbar was customized to only include items which we need.
• Added paste plugin, along with paste_as_text: true and paste_plaintext_inform: false configuration variables – note that WordPress Classic Editor uses this plugin too
• Removed advlist from plugins, as it adds the “down” arrows to the list buttons, letting you customize the bullet styles
• We added the block_formats and formats configuration to control which block styles are available.
  • The P tag styles include what we need to style the basic text in our newsletters to ensure maximum compatibility.
  • The empty CSS attributes for headings ensure you can switch from paragraph to headings easily.

The downside is that this customization has to be done in the emails/editortinymce.php file of The Newsletter plugin, but we can probably replace that with a WordPress action hook for the menu.

Inserting images

One other change which is not included above is tweaking the tnp_media() function of The Newsletter which creates the image HTML when inserting images from the WordPress Media Library.

It sets the img variable like this:

var img = '<img src="' + url + '" style="width: ' + width + 'px; height: ' + height + 'px">';

That prevents proper image sizing in the newsletter, so instead of that we use our own inline styling – once again for maximum newsletter HTML compatibility:

var img = '<img src="' + url + '" style="border: 0; display: block; outline: none; text-decoration: none; height: auto; width: 100%; font-size: 13px; " />';

With these TinyMCE improvements, it’s possible for clients to efficiently build newsletters in the The Newsletter plugin with an existing The Newsletter template. Getting that template right is a story in itself. The short answer is that one should edit a The Newsletter template directly in the PHP.

Honestly The Newsletter plugin is not my favourite way to build a newsletter. The Sendy editor (CK Editor) is more to my taste. What one can’t beat with The Newsletter though is the direct integration with the WordPress user database. If your website is based on WordPress and your users log in, you already have a lightweight ready CRM (customer relationship management system) right there. This includes using a WordPress users based membership plugin like RCP, Easy Digital Downloads or WooCommerce members.

Martin Viceník

Martin graduated as an engineer in Computer Science from Slovak Technical University in Bratislava. He grew up in Liptovský Mikuláš in northern Slovakia next to the beautiful Tatra mountains. He is the developer behind our FV Player.