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