<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);
          });
        });
      }
    });
  }

});