<textarea id="editor">
 <h2>
    <span>TinyMCE demo: Custom language span button</span>
</h2>
<p>This example demonstrates the custom lang="mi" button. Just select some text and click the custom button. 
</textarea>
/* .lang-mi {
  text-decoration: underline;
  text-decoration-style: dotted;
} */
tinymce.init({
  selector: '#editor',
  height: 300,  
  plugins: 'code fullpage',
  toolbar: 'undo redo | langMi | fullpage code',
  formats: {
    langMi: { inline: 'span', attributes: { lang: 'mi'}, classes: 'lang-mi'},
  },
  // style_formats: [
  //   { title: 'langMi', format: 'langMi' },
  // ],
  
  // TODO: this would go in a css file, but for codepen purposes I am inlining it.
  content_style: `
    .lang-mi {
      text-decoration: underline;
      text-decoration-style: dotted;
    }
  `,
  setup: function(editor) {
    editor.addButton('langMi', {
      text: 'lang mi',
      onclick: function() {
        editor.execCommand('mceToggleFormat', false, 'langMi');
      },
      onpostrender: function() {
        var btn = this;
        editor.on('init', function() {
          editor.formatter.formatChanged('langMi', function(state) {
            btn.active(state);
          });
        });
      }
    });
  }

});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/4/tinymce.min.js