×

Embed WIRIS editor in a Web page

This document explains how to embed the WIRIS EDITOR in a Web page. The scenario when the editor is used together with an HTML rich editor is covered by the WIRIS plugins.

The embedding is compound by two steps. The first one is displaying the editor itself and the second one is calling the editor API to set and retrieve the MathML.

Inserting an editor in a Web page

You can create a new page with the following content

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <script src="http://www.wiris.net/demo/editor/editor"></script>
    <script>
    var editor;
    window.onload = function () {
      editor = com.wiris.jsEditor.JsEditor.newInstance({'language': 'en'});
            editor.insertInto(document.getElementById('editorContainer'));
    }
    </script>
  </head>
  <body>
    <div id="editorContainer"></div>
  </body>
</html>

In the above code, the WIRIS editor is added into the <div> in the body. The actual insertion is done in the onload event. The variable editor is a global variable that will be used later to access the API.

Setting and getting the MathML

Calling the editor API to get the MathML:

alert(editor.getMathML());

To set the MathML:

editor.setMathML("<math><mfrac><mn>1</mn><mi>x</mi></mfrac></math>");

Controlling WIRIS EDITOR size

WIRIS editor will be resized to the same dimensions of the container <div>. Following the example, to set a 500x300 editor you can define the container <div> as

<div style="width:500px;height:300px" id="editorContainer"></div>

In any case, there is a minimal height of 200 pixels. You can also use percentual dimensions:

<div style="width:100%;height:300px" id="editorContainer"></div>

Initialization parameters

See full table of the initialization parameters.

Choosing the language

In the previous example, we passed the following parameter

{'language': 'en'}

which specifies to use English for the text in the user interface.

Changing the toolbar

The parameter 'toolbar' can be used to specify the icons of the toolbar. For example,

{'language': 'en', 'toolbar':'<toolbar ref="quizzes"/>'}

tells the editor to use the simple toolbar used by the WIRIS QUIZZES tools. The definition of the toolbar is the XML fragment:

<toolbar ref="quizzes"/>

To learn how to specify the toolbar in detail visit custom toolbar.

Changing the styles

It is possible to define the default styles of the editor. For example, you can change the font size, font family, color and background color.

{'backgroundColor':'#008060', 'color':'#ffffff', 'fontSize':'32px', 
'fontFamily':'Times New Roman'}