Building a CKEditor in with plugins in application

[nitish1986]

I'm trying to build an application on Vuejs where I'm using CKEditor as mark down editor. I went through the docs and installed accordingly, I can see my editor is working fine. In my component I'm having something like this:

<template>
	<div class="col-md-6">
		<ckeditor :editor="editor" v-model="description" :config="editorConfig"></ckeditor>
	</div>
</template>
<script>
	import {getHeader} from './../../config.js'
	import CKEditor from '@ckeditor/ckeditor5-vue';
	import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
	Vue.use( CKEditor );
	export default {
		data(){
			return{
				description: '',
				editor: ClassicEditor,
				editorConfig: {
					// The configuration of the editor.
				}
			}
		}

	}
</script>

But when try to load plugins something like this:

editorConfig: {
	// The configuration of the editor.
	extraPlugins: 'mathjax',
	mathJaxLib: 'http://cdn.mathjax.org/mathjax/2.6-latest/MathJax.js?config=TeX-AMS_HTML',
}

It throws error and my CKEditor is not loaded, I know that depending plugin resources are not loaded hence it throws error. Previously I used to get this in:

<script src="{{asset('text_editor/ckeditor.js')}}"></script>

And in my text-editor folder I had build-config.js which configures the plugins and its resources to my repository:

/**
 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

/**
 * This file was added automatically by CKEditor builder.
 * You may re-use it at any time to build CKEditor again.
 *
 * If you would like to build CKEditor online again
 * (for example to upgrade), visit one the following links:
 *
 * (1) http://ckeditor.com/builder
 *     Visit online builder to build CKEditor from scratch.
 *
 * (2) http://ckeditor.com/builder/6e09ffa6274b8112e909b3c03ca1f1e6
 *     Visit online builder to build CKEditor, starting with the same setup as before.
 *
 * (3) http://ckeditor.com/builder/download/6e09ffa6274b8112e909b3c03ca1f1e6
 *     Straight download link to the latest version of CKEditor (Optimized) with the same setup as before.
 *
 * NOTE:
 *    This file is not used by CKEditor, you may remove it.
 *    Changing this file will not change your CKEditor configuration.
 */

var CKBUILDER_CONFIG = {
	skin: 'bootstrapck',
	preset: 'full',
	ignore: [
		'bender-err.log',
		'bender-out.log',
		'bender.ci.js',
		'bender.js',
		'dev',
		'gruntfile.js',
		'less',
		'node_modules',
		'package.json',
		'tests'
	],
	plugins : {
		'div' : 1,
		'elementspath' : 1,
		'enterkey' : 1,
		'entities' : 1,
		'eqneditor' : 1,
		'filebrowser' : 1,
		'find' : 1,
		'flash' : 1,
		'floatingspace' : 1,
		'font' : 1,
		'format' : 1,
		'forms' : 1,
		'liststyle' : 1,
		'magicline' : 1,
		'mathedit' : 1,
		'mathjax' : 1,
		'maximize' : 1,
		'newpage' : 1,
		'pagebreak' : 1,
		'pastefromword' : 1,
		'pastetext' : 1,
		'preview' : 1,
		'print' : 1,
		'removeformat' : 1,
		'resize' : 1,
		'save' : 1,
		'scayt' : 1,
		'selectall' : 1,
		'wysiwygarea' : 1
	},
	languages : {
		'en' : 1
	}
};

How can I achieve this in my component locally?

[oleq]

You mixed CKEditor 4 and CKEditor 5 in your code and they are completely different ecosystems and this is definitelly not gonna work. You should just pick one.

Here you used CKEditor 5:

// ...
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
Vue.use( CKEditor );
// ...

but this is a CKEditor 4 configuration:

editorConfig: {
	// The configuration of the editor.
	extraPlugins: 'mathjax',
	mathJaxLib: 'http://cdn.mathjax.org/mathjax/2.6-latest/MathJax.js?config=TeX-AMS_HTML',
}

so is this one

// ...
var CKBUILDER_CONFIG = {
// ...

The mathjax plugin is a CKEditor 4 feature, not available in CKEditor 5 at this moment (but please thumbs up if you want it).