Adding MathJax to AlloyEditor

[Matthias Weise, modifié il y a 6 années.]

Hey Guys!

Currently I'm trying to add the MathJax-Plugin to the AlloyEditor. At first, I thought I need to add the files of the MathJax-Plugin with the help of a fragment. However, it seems that this is not neccessary because the files are already contained by the used ckeditor package. So to configure the AlloyEditor I created a EditorConfigContributor like described here. With the following lines, I configured the AlloyEditor to use the MathJax-Plugin:

String extraPlugins = jsonObject.getString("extraPlugins");
jsonObject.put("extraPlugins", extraPlugins + ",mathjax");
jsonObject.put("mathJaxLib", "//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_HTML");

The editor recognizes the MathJax plugin because without the mathJaxLib property I get an error in the browser console. Now I need to add the MathJax button. I already did it for Liferay 6 some month ago and so i did it similar but of course with the help of the EditorConfigContributor:

JSONObject toolbars = jsonObject.getJSONObject("toolbars");
JSONObject toolbarAdd = toolbars.getJSONObject("add");

if (toolbarAdd != null) {
	JSONArray addButtons = toolbarAdd.getJSONArray("buttons");
	addButtons.put("Mathjax");
}

Unfortunately, no MathJax button is visible. I also tried to add a custom button like explained here. There I used the following method to call the MathJax dialog:

handleClick: function(event) {
		var editor = this.props.editor.get('nativeEditor');
		editor.addCommand('mathjax', new CKEDITOR.dialogCommand( 'mathjax' ) );
		editor.execCommand('mathjax'); 
}

Actually, this will open the MathJax dialog and I can enter a formula. But when press the confirm button the formula is not added to the content. So this seems not to be the right way or something is missing.

I hope you can help me.
Thanks a lot and with best regards
Matthias

[Matthias Weise, modifié il y a 6 années.]

I don't like to push my own threads but I'm still dealing with this problem :/ So I'm appreciating any help!

Thanks a lot and with best regards
Matthias

[Banafshe Bamdad, modifié il y a 4 années.]

Hi,
You need to install LaTeX on your Operating System.
At first, I create a Liferay Module Project Fragment to add the MathJax plugin files to the ckeditor module Liferay.
Then, I create a portlet module which implements the EditorConfigContributor. This is my class:
@Component(
        immediate = true,
        property = {
                "editor.name=alloyeditor",
                "service.ranking:Integer=100"
                },
        service = EditorConfigContributor.class
        )
public class MyEditorConfigContributorPortlet extends BaseEditorConfigContributor {    @Override
    public void populateConfigJSONObject(JSONObject jsonObject, Map<String, Object> inputEditorTaglibAttributes,
            ThemeDisplay themeDisplay, RequestBackedPortletURLFactory requestBackedPortletURLFactory) {

        JSONObject toolbarsJSONObject = jsonObject.getJSONObject("toolbars");
        if (toolbarsJSONObject == null) {
            toolbarsJSONObject = JSONFactoryUtil.createJSONObject();
        }
        String extraPlugins = jsonObject.getString("extraPlugins");
        if (Validator.isNotNull(extraPlugins)) {
            extraPlugins = extraPlugins + ",ae_uibridge,ae_autolink,ae_buttonbridge,ae_menubridge,ae_panelmenubuttonbridge,ae_placeholder,ae_richcombobridge,mathjax";
        } else {
            extraPlugins = "ae_uibridge,ae_autolink,ae_buttonbridge,ae_menubridge,ae_panelmenubuttonbridge,ae_placeholder,ae_richcombobridge,mathjax";
        }        jsonObject.put("extraPlugins", extraPlugins);
       
       
        JSONObject addToolbar = toolbarsJSONObject.getJSONObject("add");
        JSONArray addToolbarButtons = addToolbar.getJSONArray("buttons");
        addToolbarButtons.put("Mathjax");
        

        addToolbar.put("buttons", addToolbarButtons);
        toolbarsJSONObject.put("add", addToolbar);
        jsonObject.put("toolbars", toolbarsJSONObject);
        
        jsonObject.put("mathJaxLib", "https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML");
    }
}
The MathJax buttom is added in toolbar and I can add mathematical formulas in AlloyEditor, but there is a problem. When I save the content, the characters be shown in the web page not formula.