Blog técnico

HTML editor requirements for WIRIS editor
24 Abr 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.
     
Instrucciones de instalación: WIRIS plugin para RadEditor
21 Mar 2012

DESCARGAR

1 Requisitos

  • RadEditor instalado.
  • Una licencia válida para instalar el plugin en un entorno de producción; de lo contrario, puedes utilizar el archivo descargado solo como demo.

2 Copiar archivos

Descomprime RadEditor WIRIS plugin y copia el directorio radeditor_wiris en el directorio de plugins de RadEditor. El nombre del directorio de plugins de WIRIS debe ser radeditor_wiris.

  1. Crea una aplicación a través del panel de control IIS con directorio raíz en radeditor_wiris/integration.
  2. Otorga permisos de escritura a los directorios radeditor_wiris/cache y radeditor_wiris/formulas al usuario del servidor web. Las carpetas se utilizarán para almacenar códigos MathML de fórmulas e imágenes temporales.

3 Configuración

Edita radeditor_wiris/configuration.ini para definir tus propios valores. En esta tabla se especifican todos los parámetros posibles.

4 Activa WIRIS plugin para RadEditor en tu propia plataforma

Añade esta linea de código HTML en la sección head

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

Para añadir los botones de Wiris en la barra de botones de RadEditor hay dos maneras.

  1. Añadir los botones en el ToolsFile.

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

  2. Añadir los botones en el tag <telerik:RadEditor>

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

En los dos casos después de <telerik:RadEditor> hay que añadir el siguiente código HTML.

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

5 Comprueba que el plugin funciona correctamente

Con el fin de comprobar si WIRIS plugin se ha instalado correctamente, existe una página que hace algunos tests en tu servidor. Abre este enlace para ver dónde se encuentra tu página de test.

6 Limpia y realiza una copia de seguridad de tu WIRIS plugin para RadEditor

Consulta esta página.

Soporte de LaTeX
13 Mar 2012

Si usted ya tiene trozos de código LaTeX dentro de sus textos, el WIRIS plugin le mostrará las fórmulas reales, y el WIRIS editor le permitirá editarlas visualmente.

 

Por ejemplo, imagine que en su plataforma hay un texto así:

La historia de $$\sqrt(2)$$.

Después de instalar el WIRIS plugin, los estudiantes verán:

latexsup1.png

Los profesores que editen la página, en el editor de texto normal, volverán a ver:

latexsup2.png

Si colocan el cursor dentro de las marcas $$...$$, y hacen clic en el icono de WIRIS editor, verán:

latexsup3.png

Después de guardar el trabajo en el WIRIS editor, van a ver de nuevo:

latexsup4.png

Y después de guardar la página, los estudiantes verán, por supuesto:

latexsup5.png

Por lo tanto; los usuarios ven fórmulas, los editores ven LaTeX la mayor parte del tiempo, pero pueden editar visualmente una fórmula si lo desean.

 

Esto es una propiedad maravillosa, pero por favor tenga en cuenta que:

  • Deben deshabilitarse otros plugins que visualizen LaTeX. Por ejemplo, Moodle cuenta con otro filtro de TeX por defecto, y usted debe elegir cuál de ellos desea, pero no ambos.

  • No se pueden copiar los documentos LaTeX directamente al editor de la plataforma; por lo menos debe convertir todos los $ sencillos a $$ dobles, y anteriormente todos los $$ dobles a párrafos centrados. Este es el formato estándar para LaTeX insertado, todos los plugins funcionan así.

  • No todo el LaTeX está soportado. Existen muchos comandos de LaTeX, muchos de ellos acerca de formato de texto y sin relación con las matemáticas, y por eso no le damos soporte. Técnicamente, aceptamos las instrucciones que tienen un equivalente en MathML.

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 como ejemplos de integración
24 Feb 2012

Las integraciones de WIRIS plugins permiten integrar WIRIS editor y WIRIS cas en una serie de editores de HTML. Dichos editores son extensamente utilizados en cientos de plataformas web.

Para integrar las herramientas de WIRIS en tu editor de texto enriquecido, son necesarios algunos scripts. Incluimos algunas demos de integraciones, nuestras demos activas, para facilitar el proceso de integración.

NOTA: los enlaces siguientes te proporcionarán acceso a diferentes códigos fuente de las demos de integraciones de WIRIS plugin. Dichos archivos no son el plugin propiamente. Encontrarás los archivos de WIRIS plugin en la página de descarga de WIRIS plugin.