Installing a CKEditor plugin in Liferay

Question

I have followed these steps to add CKEditor YouTube plugin in Liferay 6.2 GA4 and I could able to add a plugin in Content section editor.

CKEditor YouTube plugin: http://ckeditor.com/addon/youtube

All plugins are located in ${LIFERAY_HOME}\tomcat-7.0.42\webapps\ROOT\html\js\editor\ckeditor\plugins folder.

1) Place the youtube plugin folder in plugins folder.

2) Add following change in the config.js file located in ${LIFERAY_HOME}\tomcat-7.0.42\webapps\ROOT\html\js\editor\ckeditor folder

CKEDITOR.editorConfig = function( config ) {
            // Define changes to default configuration here. For example:
            // config.language = 'fr';
            // config.uiColor = '#AADC6E';
            config.extraPlugins = 'youtube';
};

3) Add following 'youtube' entries in the ckconfig.jsp file located in ${LIFERAY_HOME}\tomcat-7.0.42\webapps\ROOT\html\js\editor\ckeditor folder

config.extraPlugins = 'ajaxsave,media,restore,scayt,wsc,youtube';

config.toolbar_liferayArticle = [
['Styles', 'FontSize', '-', 'TextColor','BGColor'],
['Bold', 'Italic', 'Underline', 'Strike'],
['Subscript', 'Superscript'],['Youtube'],
'/',['Undo', 'Redo', '-', 'Cut', 'Copy', 'Paste',
'PasteText',  'PasteFromWord', '-', 'SelectAll','RemoveFormat'],

4) Restart the Liferay.

I know that this can be achieved by using Liferay Hook project.

However when I am using Liferay Structures and Templates this plugin is not appeared in the CKEditor. What are the other changes need to do in Liferay server?

Sampath T Sampath T · Accepted Answer · 2015-10-16T10:14:06

When using Structures and Templates in Liferay, it is consisted with different types of CKEditor toolbars.Those different toolbars are defined in ckconfig.jsp and you need to change all the toolbar sections.

config.toolbar_email = [
    ['FontSize', 'TextColor', 'BGColor', '-', 'Bold', 'Italic', 'Underline', 'Strike'],
    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
    ['SpellChecker', 'Scayt'],
    ['Youtube'],
    '/',
    ['Undo', 'Redo', '-', 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'SelectAll', 'RemoveFormat'],
    ['Source'],
    ['Link', 'Unlink'],
    ['Image']
];

config.toolbar_liferay = [
    ['Bold', 'Italic', 'Underline', 'Strike'],

    <c:if test="<%= inlineEdit %>">
        ['AjaxSave', '-', 'Restore'],
    </c:if>

    ['Undo', 'Redo', '-', 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', ],
    ['Styles', 'FontSize', '-', 'TextColor', 'BGColor'],
    ['Youtube'],
    '/',
    ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'],
    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
    ['Image', 'Link', 'Unlink', 'Anchor'],
    ['Flash', <c:if test="<%= XugglerUtil.isEnabled() %>"> 'Audio', 'Video',</c:if> 'Table', '-', 'Smiley', 'SpecialChar'],
    ['Find', 'Replace', 'SpellChecker', 'Scayt'],
    ['SelectAll', 'RemoveFormat'],
    ['Subscript', 'Superscript']

    <c:if test="<%= !inlineEdit %>">
        ,['Source']
    </c:if>
];

config.toolbar_liferayArticle = [
    ['Styles', 'FontSize', '-', 'TextColor', 'BGColor'],
    ['Bold', 'Italic', 'Underline', 'Strike'],
    ['Subscript', 'Superscript'],
    ['Youtube'],
    '/',
    ['Undo', 'Redo', '-', 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'SelectAll', 'RemoveFormat'],
    ['Find', 'Replace', 'SpellChecker', 'Scayt'],
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
    '/',
    ['Source'],
    ['Link', 'Unlink', 'Anchor'],
    ['Image', 'Flash', <c:if test="<%= XugglerUtil.isEnabled() %>">'Audio', 'Video',</c:if> 'Table', '-', 'Smiley', 'SpecialChar', 'LiferayPageBreak']
];

Installing a CKEditor plugin in Liferay

1 Answers