ckeditor5-classic-with-mathtype v1.0.0

This is CKeditor 5 build with MathType integration.

CKEditor 5 editor generated with the online builder

This repository presents a CKEditor 5 editor build generated by the Online builder tool

Quick start

First, install the build from npm:

npm install ckeditor5-classic-with-mathtype

And use it in your website:

<div id="editor">
    <p>This is the editor content.</p>
</div>
<script src="./node_modules/ckeditor5-classic-with-mathtype"></script>
<script>
    BalloonEditor
        .create( document.querySelector( '#editor' ) )
        .then( editor => {
            window.editor = editor;
        } )
        .catch( error => {
            console.error( 'There was a problem initializing the editor.', error );
        } );
</script>

Or in your JavaScript application:

import ClassicEditor from 'ckeditor5-classic-with-mathtype';
 
// Or using the CommonJS version:
// const ClassicEditor = require( 'ckeditor5-classic-with-mathtype' );
 
ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        window.editor = editor;
    } )
    .catch( error => {
        console.error( 'There was a problem initializing the editor.', error );
    } );

Here's an example of using it with react:

import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from 'ckeditor5-classic-with-mathtype';

...

render() {
		return (
				<CKEditor
					editor={ClassicEditor}
                    config={{
						toolbar: {
							items: [
								'heading', 'MathType', 'ChemType',
								'|',
								'bold',
								'italic',
								'link',
								'bulletedList',
								'numberedList',
								'imageUpload',
								'mediaEmbed',
								'insertTable',
								'blockQuote',
								'undo',
								'redo'
							]
						},
					}}
					data="<p>Hello from CKEditor 5 with MathType!</p>"
					onInit={editor => {
						// You can store the "editor" and use when it is needed.
						// console.log( 'Editor is ready to use!', editor );
					}}
				/>
		);
	}

Note: If you are planning to integrate CKEditor 5 deep into your application, it is actually more convenient and recommended to install and import the source modules directly (like it happens in ckeditor.js). Read more in the Advanced setup guide.

Note: You can configure the block toolbar items using the config.blockToolbar option.