Need to add extra plugin (layoutManager) under CKeditor

Divya Mawar asked on July 10, 2018 14:32

I am kentico developer, I need to add extra feature (layoutmanager plugin) into CKeditor into Kentico 11.

I download the package from the below link: https://ckeditor.com/cke4/addon/layoutmanager

and also download dependencies folder.

Now followed the steps using refer (example) the below link : https://devnet.kentico.com/articles/adding-a-bootstrap-button-plugin-to-the-ckeditor-in-kentico-10

and added the below code under the config.js file of the CKeditor : config.plugins += ",layoutmanager"; config.layoutmanager_loadbootstrap = true; config.layoutmanager_allowedContent; config.layoutmanager_buttonboxWidth = 500

May I request to please suggest me, how can I show the layout manager button into CKeditor?

Correct Answer

vasu yerramsetti answered on July 10, 2018 16:13

@Divya,

I have configured in my local as per Kentico documentation and I am able to see the Layout manager (#Screenshot) icon in my CKEditor from Editable text web pat (You may missed the dependency plugins, verify).

Try this:

Download plugins and keep in Plugins folder i.e., \CMS\CMSAdminControls\CKEditor\plugins

btbutton,widget,lineutils,widgetselection --> btbutton
basewidget,layoutmanager ---> Layoutmanager (Rename from ckeditor-layoutmanager to layoutmanager)

1.Add below code snippet into \CMS\CMSAdminControls\CKEditor\config.js file.

config.extraPlugins = 'widget';
config.extraPlugins = 'lineutils';
config.extraPlugins = 'widgetselection';
config.extraPlugins = 'basewidget';
config.plugins += ",btbutton,layoutmanager";
config.layoutmanager_loadbootstrap = false;
config.layoutmanager_allowedContent;
config.layoutmanager_buttonboxWidth = 58;

2.I added the plugin to the Full toolbar.

config.toolbar_Full = [
    [sourceName, '-'],
    ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', 'Scayt', '-'],
    ['Undo', 'Redo', 'Find', 'Replace', 'RemoveFormat', '-'],
    ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-'],
    ['NumberedList', 'BulletedList', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv', '-'],
    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-'],
    '/',
    ['InsertLink', 'Unlink', 'Anchor', '-'],
    ['InsertImageOrMedia', 'QuicklyInsertImage', 'Table', 'HorizontalRule', 'SpecialChar', '-'],
    ['InsertForms', 'InsertPolls', 'InsertRating', 'InsertYouTubeVideo', 'InsertWidget', '-'],
    ['Styles', 'Format', 'Font', 'FontSize'],
    ['TextColor', 'BGColor', '-'],
    ['InsertMacro', '-'],
    ['Maximize', 'ShowBlocks'], ['btbutton'], ['AddLayout']
];

You can also troubleshoot using F12 from CMSDesk if any js errors.

I hope this will helps you.

0 votesVote for this answer Unmark Correct answer