Custom styling in CKEditor dialog

Question

I'm trying to integrate the MathQuill math editor in the dialog of the MathJAX widget/plugin.

I successfully replaced the input box with a MathQuill input box, but now I would like to add a math toolbar as presented here: http://jenseng.github.io/mathquill/demo.html

The problem is that CKEditor resets all styles with the wildcard selector .cke_reset_all * and the nice MathQuill toolbar doesn't render at all (see screenshot here).

By using the Safari inspect element option I found out that (almost) all styles set by mathquill.css are overwritten by the wildcard reset. I managed to comment out the attributes in .cke_reset_all * and the layout of the MathQuill editor was restored.

Is it possible to avoid the .cke_reset_all * for some components in the ckeditor dialog? Can I maybe remove the wildcard styles via jQuery?

Answer 1

To my knowledge, there is not a way to selectively disable .cke_reset_all *, and getting Mathquill to ignore the rule would require extensive editing of Mathquill's CSS.

However, you can remove that class from the dialog by adding this to your dialog definition:

onLoad: function () {
    this.getElement().removeClass('cke_reset_all');
}

Once you have done that, if you're unhappy with how the dialog looks, you can go back and specifically apply cke_reset_all to elements where you want CKE's native styling, as long as they are not an ancestor to the Mathquill editor.