Saturday, June 16, 2018

Laravel 5.5 and CKEditor Options

Leave a Comment

I want to use some of the optional extras, specifically video embedding, in CKEditor.

I have downloaded the entire thing to ckeditor in the public area, and in the plugins directory there is the video.

I start with the CDN of CKeditor:

<script src="//cdn.ckeditor.com/4.7.3/full-all/ckeditor.js"></script> 

and then I add the option for the video plugin:

<script>  CKEDITOR.plugins.addExternal( 'video', '{{ public_path('\ckeditor\plugins\video\ ') }}', 'video.js' ); </script> 

(The video.js actually is in a subdirectory dialogs which I have tried as well).

I can see the CKEditor which appears on my page but no video button.

Anyone any ideas please?

1 Answers

Answers 1

First of all, you need to upload the contents of the plugin archive to any folder on your website. Although, it is a good idea to name the folder so that you knew it holds CKEditor plugins. Let’s name it as ckeditor/plugins for the sake of our example. You should end up with the following path then:

ckeditor/plugins/jsplus_image_editor 

Now, we need to tell CKEditor to load the plugin from the above folder. Add the following code to your HTML code above the line where CKEditor replaces the standard control:

<textarea name="editor1"></textarea> ... <script> CKEDITOR.plugins.addExternal( 'yourpluginname',  '/ckeditor/plugins/yourpluginname', 'plugin.js' ); CKEDITOR.replace('editor1'); ... </script> 

Normally you install plugins trough the config.js but since you are using a cdn we need to replace the config. Update the above replace with the following code:

CKEDITOR.replace('editor1', { customConfig: '/ckeditor/custom_config.js'}); 

make the above mentioned custom_config.js and place the following code CKEDITOR.editorConfig = function( config ) {

CKEDITOR.editorConfig = function( config ) {  config.language = 'en';  config.extraPlugins = 'PLUGINNAME';  config.toolbar = 'custom'; config.toolbar_custom = [     { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },     { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Scayt' ] },     { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },     { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] },     { name: 'tools', items: [ 'Maximize' ] },     { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source' ] },     { name: 'others', items: [ '-' ] },     '/',     { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Strike', '-', 'RemoveFormat' ] },     { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },     { name: 'styles', items: [ 'Styles', 'Format' ] },     { name: 'about', items: [ 'About' ] },     { name : 'new_group', items: ['PLUGINNAME'] } ];} 

hope this helps!

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment