Hello,
I am trying to integrate the Mathematical Formulas (mathjax) CKEditor plugin with Drupal. A sandbox project is available at https://www.drupal.org/sandbox/dinarcon/ckeditor_mathjax →
The Mathematical Formulas plugin is implemented as a CKEditor widget. As shown in the documentation, it is possible to create a widget without implementing the editor.ui.addButton() method in the plugin.js.
When integrating such a plugin with Drupal, you can add the button to the toolbar through the Text formats and editors configuration page...
..but when you try to use the WYSIWYG editor the button is missing.
Using the inspector we can see that, in the editor's settings, the toolbar configuration includes a reference for the mathjax button.
Even though the button is not visible, the library is working. For example, if we manually edit source to add content to be rendered as a formulae by the Mathjax library...
...we get the text converted when we exit source editing.
Even the dialog functionality works upon clicking on the widget.
The Drupal Image button was created as a widget, but in this case the editor.ui.addButton() method was implemented.
Also, the Mathematical Formulas plugin does not implement the editor.addCommand() method to define the list of allowed tags as Core's Drupal Image and other plugins like Youtube do. Instead, the Mathematical Formulas implements the editor.widgets.add() method. This might prevent the proper tags from being automatically added to the "Allowed HTML tags" field if the "Limit allowed HTML tags and correct faulty HTML" filter is enabled. Nevertheless, manually adding the tag does not solve the problem either.
The Mathematical Formulas (mathjax) demo on the CKEditor plugin page shows the button in the toolbar using the same code without the editor.ui.addButton() method, yet it works fine there. So the question is, is there anything custom in Drupal that prevents the button to be shown?
I have been trying many things to get this working without success. I even created a custom CKEditor build using Core's build-config.js file and then created another build adding the Mathematical Formulas plugin to the same setup using the CKEditor web builder. After a diff between directories, nothing unexpected came up. The difference was the extra library and its configuration.
For the record, I have tested this with the "Limit allowed HTML tags and correct faulty HTML" filter disabled to allow the plugin's required class to be added to the <span> tag. Although this does not necessarily conflicts with the button visibility, if the class is stripped out by the filter you would not see the library working as expected even when everything else is properly configured.
Steps to reproduce this issue:
1) Download the latest development version of Drupal core.
2) Download this sandbox project:
https://www.drupal.org/sandbox/dinarcon/ckeditor_mathjax →
.
3) Download the Mathematical Formulas (mathjax) plugin and place it in the /libraries folder in your Drupal root folder.
4) Enable the CKEditor Mathematical Formulas module.
5) Go to the Text formats and editors settings (/admin/config/content/formats).
6) Add the Mathematical Formulas Button to the Full HTML text format.
7) Create an Article node and switch to the Full HTML format. You should not be able to see the button, but manually editing source should work.
Example code in source editing mode:
<span class="my-math">\( \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \)</span>
Note that this issue has been reported in a similar context → and modifying the library to implement the editor.ui.addButton() method is reported to work. After given that a try, I got the button to show, but the dialog does not work properly. In any case, modifying the library does not seem like a good solution, particularly because it works fine in the plugin demo page without such a change.
Any help on getting this working in much appreciated.
Postponed: needs info
1.0
Code
Not all content is available!
It's likely this issue predates Contrib.social: some issue and comment data are missing.
I think this issue should be closed with Closed (works as designed)... after this behavior is documented properly. Using a capitalized string for my button fixed the issue, but contradicts CKEditor's documentation:
https://ckeditor.com/docs/ckeditor4/latest/guide/widget_sdk_tutorial_1.html