using TinyMCE Latex plugin for developers using TinyMCE React integration

Question

I would like to use the latex tinymce plugin described at https://moonwave99.github.io/TinyMCELatexPlugin/. At this site, I am instructed to download and unzip the latex plugin into the tinymce plugins directory.

Unfortunately, the usage instructions mentioned there are for generic JavaScript developers. I, however, am using tinymce via react integration described here: https://www.tinymce.com/docs/integrations/react/. Using tinymce's react integration, there is no tinymce plugin directory.

Can anyone give me alternate directions for using the tinymce/latex plug in terms that make sense for those using tinymce/react integration?

Thanks

Michael Fromin Michael Fromin · Accepted Answer · 2018-01-24T03:49:28

From the documentation for that plugin they are telling you that you need to do two things:

Load their plugin
Add their toolbar button to the toolbar

In their examples they suggest this:

plugins : "autolink,lists, ... ,latex",
theme_advanced_buttons2 : "...,latex,|,...",

If you are trying to use that React wrapper you will note in their examples that you pass a configuration to TinyMCE via an init object:

render() {
  return (
    <Editor
      initialValue="<p>This is the initial content of the editor</p>"
      init={{
        plugins: 'link image code',
        toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code'
      }}
      onChange={this.handleEditorChange}
    />
  );
}

That is where you choose to load plugins and add items to the toolbar.

WARNING: The latex plugin you reference is 5+ years old and appears to be written for TinyMCE 3.x. That plugin won't run as is in TinyMCE 4. TinyMCE 3.x is no longer in active development and its not been tested with the React wrapper from TinyMCE (I work for the company that owns TinyMCE). Hopefully the explanation above helps explain how you load 3rd party plugins via the React wrapper but that plugin won't work with any modern version of TinyMCE.

using TinyMCE Latex plugin for developers using TinyMCE React integration

1 Answers