Technical blog

HTML editor requirements for WIRIS editor
24 Apr 2012

This article explains the requirements that an HTML editor should accomplish in order to be able to integrate WIRIS editor with it. You only need to check this requirements list if there is no WIRIS plugin for your HTML editor. Check the complete list at WIRIS plugins

For details of how to proceed with that integration visit WIRIS plugin for generic HTML editor.

Terminology

  • Web application. The collection of web pages that includes an HTML editor to generate new richly formatted content.
  • HTML editor. A Web component that allows editing rich HTML content. It usually substitutes a simple textarea with a more sophisticated user graphical interface that includes a toolbar and a frame where you can, for example, change font styling and insert images.
  • WIRIS editor/plugin. The WIRIS formula and equation editor and plugin.

There are two mandatory requirements

  1. Server side scripting. Allow executing server side scripting. WIRIS plugins already provide such scripts in Java, PHP, ASP.NET and ASP. This is more a Web application requirement than an HTML editor.
  2. Add a button. Allow inserting a new button in the toolbar of the HTML editor that executes a custom JavaScript code in the on click event. In addition is necessary to load a JavaScript file provided by WIRIS editor/plugin and to allow it to run some initialization code. The initialization method is the responsible to add the mouse events used to reedit a formula.

For features like LaTeX, storing “full MathML in the database” and WIRIS cas, two other requirements must be met:

  1. Post set HTML event. After the initial content is set in the HTML editor and before the user edition starts, a script of the WIRIS editor must called in order to transform the HTML.
  2. Pre get HTML event. Before the content is retrieved to be stored, a script of the WIRIS editor must be called in order to transform the HTML.

If the above requirements are not met, the Web application has still the change to do direct calls to the WIRIS editor/plugin.

Finally, two optional requirements help promote good practices and easy to maintain code:

  1. Auto-load of plugin JavaScripts. The HTML editor handles the load of the JavaScript required by WIRIS editor/plugin (it adds any necessary <script> tags by itself). If this requirement is not met, the Web application is the responsible to include the JavaScript file of the WIRIS editor/plugin whenever the editor is required.
  2. Initialization event. The HTML editor calls an initialization event of the WIRIS editor/plugin. If this requirement is not met, the Web application is the responsible to call the initialization method which might be tricky to achieve.
     
Installation instructions: WIRIS plugin for RadEditor
21 Mar 2012

DOWNLOAD

1 Requirements

  • RadEditor installed.
  • A 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 RadEditor WIRIS plugin and copy the radeditor_wiris directory into your RadEditor directory. The name of the WIRIS plugin directory must be radeditor_wiris.

  1. Create an application through your IIS control panel at radeditor_wiris/integration.
  2. Give write permissions to radeditor_wiris/cache and to radeditor_wiris/formulas folders to the web server user. Those folders will be used to store formula MathML codes and temporal images.

3 Configure

Edit radeditor_wiris/configuration.ini to set your own values. This table specifies all possible parameters.

4 Include WIRIS plugin for RadEditor on your own platform

Add the following HTML line in the head section.

<script type="text/javascript" src="./radeditor_wiris/core/core.js" charset="utf-8">

To show the new buttons on RadEditor you can follow two different ways.

  1. Add to the ToolsFile the new buttons.

    <root>
  <tools name="a">
    <tool name="b" />
    .
    .
  </tools>
  <tools name="WIRIS" enabled="true" dockable="true"> 
    <tool name="WIRISformula" />
    <tool name="WIRIScas" />
  </tools>
<root/>

  2. Add the buttons in the <telerik:RadEditor> tag.

    <telerik:RadEditor ID="RadEditor1">
<Tools>
    <telerik:EditorToolGroup>
        <telerik:EditorTool Name="WIRISformula" />
        <telerik:EditorTool Name="WIRIScas" />
    </telerik:EditorToolGroup>
</Tools>
</telerik:RadEditor>

In both case after </telerik:RadEditor> you must add the following HTML line.

<script type="text/javascript" src="radeditor_wiris/radeditor.js"></script>

5 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.

6 Clean and backup your WIRIS plugin for RadEditor

Check this page.

LaTeX support
13 Mar 2012

If you already have LaTeX code bits inside your texts, the WIRIS plugin will show you the actual formulas, and the WIRIS editor will allow you to edit them in WYSIWYG mode.

 

For exemple, imagine in your platform there is a text like:

The history of $$\sqrt(2)$$.

After installing the WIRIS plugin, students will see:

latexsup1.png

Teachers who edit the page, in the regular text editor, will see again:

latexsup2.png

If they put the cursor inside the $$...$$ marks, and click on the WIRIS editor icon, they will see:

latexsup3.png

After saving the work in WIRIS editor, they will see again:

latexsup4.png

And after saving the page, students will see, of course:

latexsup5.png

So; users see formulas, editors see LaTeX most of the time, but can edit visually a formula if they want.

 

This is a great feature, but please be aware that:

  • You must disable any other plugins that render LaTeX. For example, Moodle comes with another TeX filter by default; you must choose which one you want, but not both.

  • You can not copy LaTeX documents directly to the platform editor; at least you must convert all single $ to double $$, and previously all double $$ to a centered paragraph. This is the standard format for embedded LaTeX, all plugins expect this.

  • Not all LaTeX is supported. There exist lots of LaTeX commands, lots of them about text format and unrelated to maths, and so we don't support them. Technically, we support the instructions which have a MathML equivalent.

LaTeX support in WIRIS plugins: Insights.
13 Mar 2012

The WIRIS plugins integrates the WIRIS editor into the HTML editors. From release 3.0, it is possible to write LaTeX inside the HTML editor using the $$ notation. In any case, formulas will be converted and stored as MathML.

LaTeX is disabled in the WIRIS plugin for Moodle if the filter of TeX is enabled in order to avoid conflicts.

How to edit using LaTeX

For example, if you type $$\frac12$$ in your HTML editor and you save the page, you will get a page with the fraction «math xmlns=¨http://www.w3.org/1998/Math/MathML¨»«mfrac»«mn»1«/mn»«mn»2«/mn»«/mfrac»«/math». The WIRIS editor icon WIRIS editor icon is never clicked for this purpose but means that the WIRIS plugin is installed and works behind the scenes to cope with LaTeX.

Editing LaTeX in an HTML editor
Editing LaTeX in an HTML editor

The browser displays the formula
The browser displays the formula

When you reedit the page, you will see again $$\frac12$$. Thus, during edition you get the LaTeX and you see the image of the formula in display time.

A nice feature provided by the WIRIS plugin is that you can still use the WIRIS editor with LaTeX formulas. If the caret is inside a formula, you can click the WIRIS editor icon to edit it. After submitting the WIRIS editor form, the old LaTeX is replaced by the new LaTeX formula.

Using the WIRIS editor to modify a LaTeX formula
Using the WIRIS editor to modify a LaTeX formula
 

LaTeX is manipulated as MathML

Above is described the user experience, but what is important to note is that formulas are actually stored and displayed using MathML.

Upon submit the HTML editor, the WIRIS plugins searches all $$ and converts the LaTeX into MathML. During this process, the plugin stores the MathML and the original LaTeX text written by the author. Thus, when displaying formulas, the MathML mechanism takes place.

MathML is used internally whatever you do with LaTeX
MathML is used internally whatever you do with LaTeX

LaTeX is stored inside a MathML using a standard tag called <semantics>. Following the previous example:

<math xmlns="http://www.w3.org/1998/Math/MathML">
   <semantics>
      <mfrac><mn>1</mn><mn>2</mn></mfrac>
      <annotation encoding="LaTeX">\frac12</annotation>
   </semantics>
</math>

When the HTML editor is opened again, the stored LaTeX is recovered from the <semantics> tag and is displayed in the HTML editor area for further edition. What it is important to note is that it works even when the LaTeX cannot be converted into MathML while it is possible still to edit the erroneous LaTeX to fix any possible error.

Which LaTeX is supported?

The supported LaTeX depends on the effectiveness when translating from/to MathML. The limits are due to the following facts:

  1. Some formulas have no equivalence with MathML.
  2. LaTeX is an extensible language with a lot of non-official packages. To do things worse, LaTeX has its own programming language.

Some examples about the current LaTeX supported can be found here.


 

DEMOS AS INTEGRATION EXAMPLES DOWNLOAD
23 Feb 2012

WIRIS plugins integrations allow to integrate WIRIS editor and WIRIS cas in a group of HTML editors. These editors are widely used in thousands of web platfoms.

In order to integrate WIRIS tools with your rich text editor, you require some scripting. We include some integration demos, our live demos, to ease the integration process.

NOTE: the following links give you access to several WIRIS plugin integrations demo source code. Those files are not the WIRIS plugin themselves. You can find WIRIS plugin files in WIRIS plugins download page.