×

Discover

Installation instructions: WIRIS plugin for Froala

DOWNLOAD

1 Requirements

  • Fraoala Editor v.2.0.0 or higher instaled.
  • Froala Image plugin should be enabled.
  • valid license to install the plugin in a production environment; otherwise, you can use the downloaded file just for demo purposes.

2 Copy files

Unzip the Froala WIRIS Plugin and copy the wiris directory into your Froala plugins directory. For example, you will have froala/js/plugins/wiris. The name of the WIRIS plugin directory must be wiris.

2.1 For PHP servers

  1. Give execution rights to the web server user on the PHP files contained at to froala/js/plugins/wiris/integration.
  2. Give write permissions to froala/js/plugins/wiris/integration/cache and to cfroala/js/plugins/wiris/integration/formulas directories to the web server user. Those folders will be used to store formula MathML codes and temporal images. If you prefer, you can configure the location of these folders (see section 3).

2.2 For ASP.NET servers

  1. Create an application through your IIS control panel with root directory at froala/js/plugins/wiris. If, given your project requirements or architecture, you need to have only one application move /wiris/bin contents to the /bin directory of your project and copy the Web.config configuration to your project Web.config. If you use .NET 4.0 or above use the values of Web.config4.0.
  2. Give write permissions to froala/js/plugins/wiris/integration/cache and to froala/js/plugins/wiris/integration/formulas directories to the web server user. Those folders will be used to store formula MathML codes and temporal images. If you prefer, you can configure the location of these folders (see section 3).

2.4 As Java servlet

  1. Install the pluginwiris_engine.war in your Java web applications server. For example, tomcat.
  2. Give write permissions to pluginwiris_engine/cache and to pluginwiris_engine/formulas directories to the web server user. Those folders will be used to store formula MathML codes and temporal images. If you prefer, you can configure the location of these folders (see section 3).

2.5 For Ruby on Rails

  1. Install wirispluginengine gem manually
  2. Specify wirispluginengine gem inside your application's Gemfile.
  3. Mount Wirispluginengine engine into your application's config/routes.rb file, adding the following line: mount Wirispluginengine::Engine => 'wirispluginengine'
  4. Give write permissions to wirispluginengine-X.Y.Z/cache and to wirispluginengine-X.Y.Z/formulas directories to the web server user. Those folders will be used to store formula MathML codes and temporal images. If you prefer, you can configure the location of these folders (see section 3).

3 Configure

3.1 On PHP, ASP.NET and ASP integrations

Edit froala/js/plugins/wiris/configuration.ini to set your own values. This table specifies all possible parameters.

3.2 On Java integration

Edit WEB-INF/pluginwiris/configuration.ini to set your own values. This table specifies all possible parameters.

For versions older than 3.50.0 it is essential to set the value of the parameters wiriscachedirectory and wirisformuladirectory.

3.3 On Ruby on Rails (RoR)

Edit configuration.ini file on wirispluginengine gem root directory. This table specifies all possible parameters.

4 Include WIRIS plugin for FROALA on your own platform

  • Include wiris.js javascript file: $('head').append('<script src="froala/js/plugins/wiris/wiris.js"></script>');
  • Add WIRIS EDITOR Math and WIRIS EDITOR chemistry buttons to toolbar: toolbarButtons: [''wirisEditor', 'wirisChemistry'].
  • Add WIRIS EDITOR Math and WIRIS EDITOR chemistry buttons to image toolbar: imageEditButtons: ['wirisEditor', 'wirisChemistry'].
  • Modify Froala allowed tags: htmlAllowedTags:   ['.*']

4.1 Integration example:

('#example').froalaEditor({
      iframe: true,
       // Add WIRIS EDITOR buttons to Image Toolbar.
      imageEditButtons: ['wirisEditor', 'wirisChemistry', 'imageDisplay', 'imageAlign', 'imageInfo', 'imageRemove'],
       // Add WIRIS EDITOR buttons to Toolbar.
      toolbarButtons: ['undo', 'redo' , 'bold', '|', 'wirisEditor', 'wirisChemistry','clear', 'insert'],
      // Allowed tags
      htmlAllowedTags:   ['.*'],
      htmlAllowedAttrs: ['.*'], 
    });

5 WIRISpugins.js

Add WIRISplugin.js script. You can find more information here.

6 Check that the plugin works correctly

In order to check if the plugin is installed correctly, there is a page that makes some tests on your server. Open this link to see where is your test page.