Ckeditor4 Integration with MathType and ChemType using jQuery

CKEditor is a WYSIWYG-rich text editor that enables writing content directly inside of web pages or online applications. Its core code is written in JavaScript and it is developed by CKSource. CKEditor is available under open-source and commercial licenses.

  • MathType: MathType is a software application created by Design Science that allows the creation of mathematical notation for inclusion in desktop and web applications. After Design Science was acquired by Maths for More in 2017, their WIRIS web equation editor software been rebranded as MathType.
  • ChemType: ChemType is a flavor of MathType designed to help you work with chemical notation. A personalized toolbar with the common chemical symbols but also a different user experience adapted to chemical notation needs.

What is a MathType tool?

MathType is an online equation editor that provides perfect-quality math formulas. No matter which environment you are using it in, your documents will always look professional and of a high quality.

Integration source code (index.html)

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="robots" content="noindex, nofollow">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Creating mathematical and chemical formulas with MathType</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <h1>MATH TOOL</h1>
    <textarea cols="10" id="editor1" name="editor1" rows="10" data-sample-short>
        <p><math xmlns="http://www.w3.org/1998/Math/MathML"><mfrac><mn>2</mn><mn>5</mn></mfrac><mo>+</mo><mfrac><mn>3</mn><mn>5</mn></mfrac><mo>=</mo><mn>16</mn></math></p>
        <p><math xmlns="http://www.w3.org/1998/Math/MathML" class="wrs_chemistry"><msub><mi mathvariant="normal">H</mi><mn>2</mn></msub><msub><mi>SO</mi><mn>4</mn></msub></math></p>
    </textarea>
    <script src="https://cdn.ckeditor.com/4.14.0/standard-all/ckeditor.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        (function() {
            var mathElements = [
                'math',
                'maction',
                'maligngroup',
                'malignmark',
                'menclose',
                'merror',
                'mfenced',
                'mfrac',
                'mglyph',
                'mi',
                'mlabeledtr',
                'mlongdiv',
                'mmultiscripts',
                'mn',
                'mo',
                'mover',
                'mpadded',
                'mphantom',
                'mroot',
                'mrow',
                'ms',
                'mscarries',
                'mscarry',
                'msgroup',
                'msline',
                'mspace',
                'msqrt',
                'msrow',
                'mstack',
                'mstyle',
                'msub',
                'msup',
                'msubsup',
                'mtable',
                'mtd',
                'mtext',
                'mtr',
                'munder',
                'munderover',
                'semantics',
                'annotation',
                'annotation-xml'
            ];
            CKEDITOR.plugins.addExternal('ckeditor_wiris', 'https://ckeditor.com/docs/ckeditor4/4.14.0/examples/assets/plugins/ckeditor_wiris/', 'plugin.js');
            CKEDITOR.replace('editor1', {
                extraPlugins: 'ckeditor_wiris,print,format,font,colorbutton,justify,uploadimage,find,magicline,bidi,easyimage,image2,colordialog,tableresize',
                mathJaxLib: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML',
                format_tags: 'p;h1;h2;h3;h4;h5;h6;pre;address;div',
                contentsLangDirection: 'ltr',
                removeButtons: 'ExportPdf,Form,Checkbox,Radio,TextField,Select,Textarea,Button,ImageButton,HiddenField,NewPage,CreateDiv,Flash,Iframe,About,ShowBlocks,Maximize',
                toolbarGroups: [{
                        name: 'clipboard',
                        groups: ['clipboard', 'undo']
                    },
                    {
                        name: 'editing',
                        groups: ['find', 'selection', 'spellchecker']
                    },
                    {
                        name: 'links'
                    },
                    {
                        name: 'insert'
                    },
                    {
                        name: 'forms'
                    },
                    {
                        name: 'tools'
                    },
                    {
                        name: 'document',
                        groups: ['mode', 'document', 'doctools']
                    },
                    {
                        name: 'colors'
                    },
                    {
                        name: 'others'
                    },
                    {
                        name: 'about'
                    },
                    '/',
                    {
                        name: 'basicstyles',
                        groups: ['basicstyles', 'cleanup']
                    },
                    {
                        name: 'paragraph',
                        groups: ['list', 'indent', 'blocks', 'align', 'bidi']
                    },
                    {
                        name: 'styles'
                    }
                ],
                removePlugins: 'uploadimage,uploadwidget,uploadfile,filetools,filebrowser',
                removeDialogTabs: 'image:advanced;link:advanced',
                height: 320,
                extraAllowedContent: mathElements.join(' ') + '(*)[*]{*};img[data-mathml,data-custom-editor,role](Wirisformula);h3{clear};h2{line-height};h2 h3{margin-left,margin-top}; div{border,background,text-align}'
            });
        }());
    </script>
</body>
</html>

Math tooll

Math type

OK