Knowledge is power. We love to share it.

News related to Mono products, services and latest developments in our community.

kpeulic

How to add math formulas into MonoX

02/18/2014Categories: MonoX

Prerequisities

Let's see how to add support for editing mathematical formulas and expressions to MonoX text editors.
First of all you need to download and install MonoX (current version 4.9.40.4907). Download the WIRIS plugin for Telerik RadEditor, as the main MonoX HTML editor is based on it. We will be using the latest beta of the WIRIS plugin (current version is 3.50.0).

Go to MonoX\Samples\Solution folder, copy ProjectName.sln and Portal.csproj and paste them to your MonoX project root folder.

WIRIS setup

Unpack the WIRIS plugin and copy radeditor_wiris folder to your MonoX project root folder.
Go to the radeditor_wiris folder and:

  • set write permissions to folders cache and formulas,
  • copy pluginwiris.dll from its bin folder and paste it to your main MonoX bin folder,
  • delete Web.config from radeditor_wiris folder,
  • open Web.config.40 and copy the following code to your main Web.config:
    <add key="com.wiris.plugin.wirisfontfamily" value="Times New Roman" />
  • rename configuration.ini.dist to configuration.ini
  • open configuration.ini and replace
    #wiriseditorsavemode = xml
    with
    wiriseditorsavemode = image
  • open radeditor.js and replace this chunk of code:
    Telerik.Web.UI.Editor.CommandList["WIRIScas"] = function(commandName, editor, args) {
        if (_wrs_conf_CASEnabled) {
            wrs_int_openNewCAS(editor._contentAreaElement, _wrs_int_language);
        }
    };
      
    Telerik.Web.UI.Editor.CommandList["WIRISformula"] = function(commandName, editor, args) {
        if (_wrs_conf_editorEnabled) {
            wrs_int_openNewFormulaEditor(editor._contentAreaElement, _wrs_int_language);
        }
    };
    with this code: 
    window.setTimeout(setupCommands, 250);
      
    function setupCommands() {
         
        if (typeof Telerik.Web.UI.Editor !== undefined) {
            Telerik.Web.UI.Editor.CommandList["WIRIScas"] = function (commandName, editor, args) {
                if (_wrs_conf_CASEnabled) {
                    wrs_int_openNewCAS(editor._contentAreaElement, _wrs_int_language);
                }
            };
      
            Telerik.Web.UI.Editor.CommandList["WIRISformula"] = function (commandName, editor, args) {
                if (_wrs_conf_editorEnabled) {
                    wrs_int_openNewFormulaEditor(editor._contentAreaElement, _wrs_int_language);
                }
            };
        }
        else {
            window.setTimeout(setupCommands, 250);
        }
    }

Set up MonoX solution for WIRIS

Go to the MonoX project root folder and open ProjectName.sln. Turn on Show All Files option in the Solution Explorer of Visual Studio.

Now, you need to include radeditor_wiris folder to your project.

Add a Reference to pluginwiris.dll from the bin  folder.

Go to radeditor_wiris/integration  and convert all files to web application.

After the successful conversion, you need to open all these files and add a following code in the first line:
EnableTheming = "False" StylesheetTheme="" Theme=""
e.g. for the file cas.aspx, replace 
<%@ Page Language="C#" AutoEventWireup="false" Inherits="plugin_web.cas" Codebehind="cas.aspx.cs"%>
with this code:
<%@ Page Language="C#" AutoEventWireup="false" Inherits="plugin_web.cas" Codebehind="cas.aspx.cs" EnableTheming = "False" StylesheetTheme="" Theme=""%>
Go to folder radeditor_wiris/core/icons, copy cas.gif  and formula.gif  and paste them to the folder App_Themes/Default/img. Create your own custom css file in the the App_Themes/Default/css/ and add the following code:
/* Wiris editor - start */
.reToolbar .WIRIScas
{
    background-image: url(../img/cas.gif);
}
.reToolbar .WIRISformula
{
    background-image: url(../img/formula.gif);
}
/* Wiris editor - end */

How to extend MonoX HTML editor with WIRIS editor

How to extend the regular HTML editor

Open file MonoX\ModuleGallery\MonoXHtmlEditor.ascx and change the property in htmlEditor  control from:
ContentAreaMode="Div"
to:
ContentAreaMode="Iframe" 
After the Telerik control markup, add the following line
<script type="text/javascript" src="<%= ResolveUrl("/radeditor_wiris/radeditor.js") %>"></script>
Open MonoX\ModuleGallery\MonoXHtmlEditorToolsFile.xml and add the following code:
<tools name="WIRISToolbar" dockable="false">
  <tool name="WIRISformula" />
  <tool name="WIRIScas" />
</tools>
after this code chunk:
<tools name="EnhancedEditToolbar" dockable="false">
  <tool name="ToggleScreenMode" shortcut="F11"/>
  <tool name="ToggleTableBorder" />
  <tool name="Zoom" />
</tools>

Open your MonoX project in the browser and log in to MonoX. Go to the any page with the HTML editor and turn on Edit mode in the HTML editor:

Click in the HTML editor and you’ll see the HTML toolbar at the top of your screen with WIRIS icons included.

After you click on the WIRIS icon, you’ll get the pop-up with the WIRIS editor.

How to extend the HTML editor in the Discussion part in MonoX

  • Go to MonoX\controls and copy-paste CustomRadEditor.ascx. Rename this new file to WirisCustomRadEditor.ascx. Include this file into your project and right click to the parent folder controls to add the WirisCustomRadEditor.ascx.cs. Open WirisCustomRadEditor.ascx and replace the following code: 
    <%@ Control
        Language="C#"
        AutoEventWireup="true"
        Inherits="MonoSoftware.MonoX.Controls.CustomRadEditor"
        Codebehind="CustomRadEditor.ascx.cs" %>
    with this code:
    <%@ Control
        Language="C#"
        AutoEventWireup="True"
        Inherits="ProjectName.Web.controls.WirisCustomRadEditor"
        Codebehind="WirisCustomRadEditor.ascx.cs" %>
    Go to the WirisCustomRadEditor.ascx.cs and replace all its content with this code: 
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using MonoSoftware.MonoX.Utilities;
      
    namespace ProjectName.Web.controls
    {
        public partial class WirisCustomRadEditor : MonoSoftware.MonoX.Controls.CustomRadEditor
        {
            protected override void OnPreRender(EventArgs e)
            {
                base.OnPreRender(e);
                JavascriptUtility.RegisterClientScriptInclude(this.Page, "/radeditor_wiris/radeditor.js");
            }
        }
    }
  • Convert WirisCustomRadEditor.ascx  into the Web project file.
  • Go to MonoX\ModuleGallery\SocialNetworking\Discussion\DiscussionBoard.ascx and replace the following code: 
    <%@ Register Src="/MonoX/controls/CustomRadEditor.ascx" TagPrefix="mono" TagName="CustomRadEditor" %>
    with this code: 
    <%@ Register Src="/MonoX/controls/WirisCustomRadEditor.ascx" TagPrefix="mono" TagName="CustomRadEditor" %>
    You also need to replace this code: 
    <mono:CustomRadEditor Width="100%" Height="100%" ID="radBoardDescription" EditModes="Design" runat="server" ToolBarMode="ShowOnFocus" StripFormattingOptions="AllExceptNewLines" ContentAreaMode="Div" ></mono:CustomRadEditor>
    with this code: 
    <mono:CustomRadEditor Width="100%" Height="100%" ID="radBoardDescription" EditModes="Design" runat="server" ToolBarMode="ShowOnFocus" StripFormattingOptions="AllExceptNewLines" ContentAreaMode="Iframe" ></mono:CustomRadEditor>
  • Go to the MonoX\ModuleGallery\SocialNetworking\Discussion\DiscussionMessages.ascx and replace the following code: 
    <%@ Register Src="/MonoX/controls/CustomRadEditor.ascx" TagPrefix="mono" TagName="CustomRadEditor" %>
    with this code: 
    <%@ Register Src="/MonoX/controls/WirisCustomRadEditor.ascx" TagPrefix="mono" TagName="CustomRadEditor" %>
    You also need to replace this code: 
    <mono:CustomRadEditor Width="100%" Height="220px" ID="radReply" EditModes="Design" StripFormattingOptions="AllExceptNewLines" IsRequired="true" runat="server" ToolBarMode="ShowOnFocus" ContentAreaMode="Div" ></mono:CustomRadEditor>
    with this code: 
    <mono:CustomRadEditor Width="100%" Height="220px" ID="radReply" EditModes="Design" StripFormattingOptions="AllExceptNewLines" IsRequired="true" runat="server" ToolBarMode="ShowOnFocus" ContentAreaMode="Iframe" ></mono:CustomRadEditor>
  • Go to MonoX\ModuleGallery\SocialNetworking\Discussion\DiscussionRadEditorToolsFile.xml  and add the following code: 
    <tools name="WIRISToolbar" dockable="false">
      <tool name="WIRISformula" />
      <tool name="WIRIScas" />
    </tools>
    after this code: 
    <tool name="JustifyLeft" />
    <tool name="JustifyCenter" />
    <tool name="JustifyRight" />
    <tool name="JustifyFull" />
    <tool name="JustifyNone" />
    <tool separator="true"/>
    <tool name="Indent" />
    <tool name="Outdent" />
    <tool separator="true"/>
    <tool name="InsertLink" />
    <tool name="Unlink" shortcut="CTRL+SHIFT+K"/>
    <tool name="FormatCodeBlock" />
    <tools>
  • Build the project, go to the browser, log in to MonoX and go to the discussion in the navigation menu.
  • Try to add a new discussion board.

  • Try to open a new topic.

  • Try to add a new post.

going further

You can extend the HTML editor across the whole MonoX project (e.g. News, Blog, …) using the approach described in this article. If you need any additional information about the WIRIS editor please contact WIRIS support team.

Please check the attachment for the complete sample solution. We didn't attach the database, but you can simply switch this solution to install mode if you go to the web.config and change the following code:
<add key="InstallationDone" value="True" />
to this:
<add key="InstallationDone" value="False" />
After that, you will be able to start MonoX installation and install the fresh MonoX database to your server.
Rated 1.50, 8 vote(s).