How to load Wiris plugin in Tinymce 4

Question

I am about using Wiris with Tinymce. Following the tutorial at INSTALLATION INSTRUCTIONS: WIRIS PLUGIN FOR TINYMCE , I am unable to go over step 4.

Each time I load the plugins tiny_mce_wiris_formulaEditor, tiny_mce_wiris_formulaEditorChemistry, and tiny_mce_wiris_CAS, the Tinymce text editor does no longer appear.

Here is my code sample

<script src="{{asset('assets/js/tinymce/plugins/tiny_mce_wiris/editor_plugin.js')}}"></script>

<script src="{{asset('assets/js/tinymce/tinymce.min.js')}}"></script>

<script>
    tinymce.init({
        selector: 'textarea',
        plugins: "image imagetools tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry tiny_mce_wiris_CAS"
});
</script>

I wish to know the right way to to it.

This is the error I get in my javascript console

"NetworkError: 404 Not Found - .../assets/js/tinymce/plugins/tiny_mce_wiris_formulaEditor/plugin.min.js"

"NetworkError: 404 Not Found - .../assets/js/tinymce/plugins/tiny_mce_wiris_CAS/plugin.min.js"

"NetworkError: 404 Not Found - .../assets/js/tinymce/plugins/tiny_mce_wiris_formulaEditorChemistry/plugin.min.js"

Answer 1

The name of the plugin you need to include in the plugins section on tinymce.init is tiny_mce_wiris. You have included the name of the buttons instead (tiny_mce_wiris_formulaEditor, tiny_mce_wiris_formulaEditorChemistry and tiny_mce_wiris_CAS).

    tinymce.init({
    selector: 'textarea',
    plugins: "image imagetools tiny_mce_wiris"});

Answer 2

Apart from downloading and using TinyMCE plugin , you can even use Wiris as externally hosted plugin. I followed this documentation http://www.wiris.com/plugins/docs/resources/external-plugin

My component looked like following, and I was able to get Wiris to work this way.

<editor apiKey="test" [init]="{ plugins : 'image', external_plugins: { tiny_mce_wiris: 'https://www.wiris.net/demo/plugins/tiny_mce/plugin.js' }, toolbar: 'tiny_mce_wiris_formulaEditor' } "></editor>