Math Symbols and Language Support

[Chris]

I am building an application for the management of educational materials.  One of the requirements is the ability to support rich-text editing including mathematical equations, multiple language character sets and possibly scientific symbols.  Does the Telerik text editor control support this kind of content beyond the basic symbol picker I've seen on the demo site?

[Rumen]

Hello Chris,

RadEditor is an HTML editor and unfortunately the HTML specification does not offer good support for visualizing Math formulas and symbols such as the integral. That is why it is up to the developer to implement this functionality for example by creating a custom dialog and using some third party tool for example: Equation Server for .NET. This tool will convert the inputted formula text to an image that can be inserted after that in the editor with the pasteHtml method.

Best regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Richard]

Q1. How is the data being saved? I wasn't able to retreieve content after saving it to database.
    Start math symbol 
        ∑, β   (These end up in my database as "?" but I can see it's working here) 
    End math symbol

    What's the difference? 
 

DBColumn[0] = RadEditor2.Content

 
Q2. If we do implement the solution above, can you explain how the data will be saved? Will any HTML editor display the symbols ?

[Paul]

The symbols are Unicode characters. If they're being saved as ansi or ascii characters, the higher-order Unicode characters all get replaced with a ? by default. You didn't say which database you're using, but I can tell you if it's SQL Server the datatype should be nvarchar for Unicode text, and not varchar. Check for your db.

[Trent]

MathType and FireMath are great addins for Firefox browsers (other browser support is available).

These addins support MathML.(http://www.w3.org/1998/Math/MathML).

Any chance of future versions of RadEditor and RadGrid supporting MathML?

[Lini]

Hi,

We have an example, showing how to integrate the RadEditor with the WIRIS MathML editor - http://blogs.telerik.com/stoyanstratev/posts/09-04-30/integrating_radeditor_for_asp_net_ajax_with_the_wiris_family_of_products.aspx

Basically it does what Rumen originally described - a custom dialog for the editor that opens the formula editor and then the result is inserted in the content area as an image. Selecting the inserted image and opening the formula editor again allows you to modify its content. Even if you do not use the WIRIS products, the demo should allow you to plug another MathML editor without too many changes.

Greetings,
Lini
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Mark Sternig]

I have the WIRIS sample up and running in an ASP.NET project, however the integration only appears to work for IE.  In Firefox on a PC there seems to be javascript errors when referencing the various properties of the "applet" object.  I have tried debugging using Firebug, but cannot seem to make headway on where the problem is or how to make it cross-browser friendly.  Any help?

EDIT: A little more information here.... the behavior can be reproduced by running the sample in Firefox, openeing the editor dialog, entering an equation, and then clicking "Accept".  The dialog does not close (but flickers?) and the image is not returned.

[Mark Sternig]

It appears that the problem is related to using document.getElementByID() versus $find to get a reference to the "applet" object.  The sample code currently uses getElementByID() which seems to work in IE but not Firefox. I attempted to chnage this to use the $find() method, but it still appears that the applet object is a generic DOM object and not a typed applet with its specific properties.

[Lini]

Hello,

I think this is an issue specific to Firefox. I tested the current FF version as well as IE, Chrome, Opera and the problem only happened in Firefox. The applet variable is available - it just does not allow you to call the Java applet methods like "isFormulaEmpty()". See the attached screenshot from the Firebug console.

The $find method is used only for ASP.NET AJAX client objects. In this case we are dealing with an <applet> HTML element, so the proper way to obtain a reference is to use $get() or document.getElementById().

I think the problem is related either to the browser or Java plugin. It happens only when the applet is loaded in an IFRAME (e.g. RadWindow) and not in a new window. You can try replacing the deprecated <applet> tag with an <object>/<embed> combination and see if that will fix the issue.

All the best,
Lini
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Mark Sternig]

I tried your suggestion of using the <OBJECT>/<EMBED> tags to load the applet onto the page, but I get the same result as before.  It appears that loading into an IFRAME regardless of how the applet is defined does not make it accessible using javascript.  Any additional thoughts or attempts are most welcome. As an aside, would it be possible to work up an example that used a simple popup window (window.open) to load the WIRIS editor from the RadEditor's toolbar instead of using the IFRAME/RadWindow?  Not sure if this is possible....thanks!

[Mark Sternig]

I am trying to use the browser's default modal dialogs using a method described in a Telerik KB article, but it appears that this method is no longer supported. Whenever I open a dialog, it used the RadWindow regardless of what I try.  Thoughts?

KB Article
http://www.telerik.com/support/kb/aspnet-ajax/editor/using-browser-modal-dialog-instead-of-radwindow.aspx

[Rumen]

Hi Mark,

Please, try the solution for Firefox implemented in this sample project: http://www.telerik.com/ClientsFiles/146821_wiris.zip

The set_useClassicDialogs(true) method works only for the built-in RadEditor dialogs.

You can achieve your scenario by adding a custom button to the RadEditor toolbar that will fire the browser's window.showModalDialog method which will open a custom browser dialog. You should set the URL to the PrintPreview.aspx file as first argument for the showModalDialog method.

You can find information about the showModalDialog method in the following articles:
http://msdn.microsoft.com/en-us/library/ms536759(VS.85).aspx
and
https://developer.mozilla.org/En/DOM/Window.showModalDialog

Another approach is to use window.open method.


All the best,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Mark Sternig]

I took a look at the Firefox example roject that was posted and noticed two changes to the code. 

The first was placing a setTimeout() around the call to get the applet object.  I assume this is done to ensure the applet is fully loaded befroe getting a reference to it. 

The second change was to use a <a href=..> tag instead of an input button for the submit.  I am not sure what this change is for exactly, but the code seems to work using the submit button as well. 

Can you explain these changes and let me know which one is the chnage that actually is responsible for solving the problem I was having?  THANK YOU for being so prompt to reply and lend a hand!

[Rumen]

Hi Mark,

Yes, these were the exact changes that I made to solve the Firefox problems:
1) Use the setTimeout function to ensure that the applet is loaded in Firefox
2) Since I was unable to make the project to work with a submit button in FF, I used the link button to do that.


Kind regards,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Mark Sternig]

I have one more "bug" that appears to be effected by Firefox as well.  If I have nothing selected in the RadEditor and then insert a new equation using the WIRIS dialog, everything works just fine.  The equation is returned to the editor and the image loads.  If I select the image and try to edit it, I run inot problems,

1) The equation is not loaded into the WIRIS editor
2) I cannot create a new equation and click "Accept", I need to close the dialog to get back to the RadEditor again.

It appears that if I have an image selected and then open the WIRIS dialog, I am unable to use it similar to the behavior before your fix.  Thoughts?  I have a hunch it is related to your setTimeout() fix, but I simply do not know where to look.

[Rumen]

Hi Mark,

Thank you for reporting this issue. I was able to fix it by updating the initDialog() function as shown below:

function initDialog()
{
    setTimeout(function()
    {
        var applet = document.getElementById('applet');
    }, 1000);
    var clientParameters = getRadWindow().ClientParameters;
    // Mathml content
    if (clientParameters._wrs_temporalImage) {
        var mathml = opener.wrs_mathmlDecode(clientParameters._wrs_temporalImage.getAttribute(opener._wrs_conf_imageMathmlAttribute));

        function setAppletMathml() {
            // Internet explorer fails on "applet.isActive". It only supports "applet.isActive()"
            try {
                if (applet.isActive && applet.isActive()) {
                    applet.setContent(mathml);
                }
                else {
                    setAppletMathml();
                }
            }
            catch (e) {
                if (applet.isActive()) {
                    applet.setContent(mathml);
                }
                else {
                    setTimeout(setAppletMathml, 50);
                }
            }
        }
        setTimeout(function()
        {
            setAppletMathml();
        }, 0);
    }
...

For your convenience I have attached the updated project.

Best regards,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Mark Sternig]

I have verified that the additional setTimeout() call has fixed the Firefox issues.  Thank you for your assistance!

[sai nsrs]

HI,

Can anyone let me know, whether i can use the same kind of integartion of wiris math editor and RadEditor in silverlight. I tried that but i am getting some errors as shown below. Also let me know if i can integrate to RadRichTextbox control of silverlight?

Error 1 The type or namespace name 'EditorToolGroup' does not exist in the namespace 'Telerik.Windows.Controls' (are you missing an assembly reference?)

Error 2 The type or namespace name 'EditorTool' does not exist in the namespace 'Telerik.Windows.Controls' (are you missing an assembly reference?)

did i miss any dependencies?

Regards,

Sai Ravi

[Valentin.Stoychev]

Hello sai nsrs,

Unfortunately this is not possible in Silverlight. The current HtmlEditor will be obsoleted and we are going to work on the RadRichTextBox from now on. Unfortunately the RadRichTextBox is still in very infant state and do not support such rich islands. We will work towards enabling such functionality, but not with high priority at the moment.

Kind regards,
Valentin.Stoychev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.