CODEWITHSUNDEEP
reactjspluginstinymcelatex
CIrvine
CIrvine

Reputation: 71

using TinyMCE Latex plugin for developers using TinyMCE React integration

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

Upvotes: 1

Views: 1920

Answers (1)

Michael Fromin
Michael Fromin

Reputation: 13746

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

  1. Load their plugin
  2. 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.

Upvotes: 1

Related Questions