PrimeFaces Extensions CKEditor: cannot access custom config

Question

I need my pe:ckEditor to load custom config, but I have been unsuccessful in this matter for some time, I will welcome any suggestions how to make it work.

(I need it functional because I have this problem: PrimeFaces Extensions CKEditor: attempts to set encoding to UTF-8 unsuccessful, which might be solved by this https://ckeditor.com/old/forums/CKEditor-3.x/utf-8-ckeditor or something like this https://ckeditor.com/old/forums/Support/Change-charset-UTF-8)

The custom config file is in the same folder as my XHTML file in which the pe:ckEditor is.

The custom config content:

CKEDITOR.editorConfig = function( config ) {
    config.uiColor = '#AADC6E';
    config.toolbar = [
        { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
        { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
        '/',
        { name: 'links', items: [ 'Link', 'Unlink' ] },
        { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
        '/',
        { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
        { name: 'insert', items: [ 'Table', 'HorizontalRule',  'SpecialChar'] },
        { name: 'tools', items: [ 'ShowBlocks' ] },
        { name: 'document', items: [ 'Source' ] },
    ];
};

I tried:

<h:outputScript name="ckEditor.js" library="js"></h:outputScript>
<pe:ckEditor id="editor" customConfig="ckEditor.js"></pe:ckEditor>
<script type="text/javascript">
    CKEDITOR.config.customConfig = 'ckEditor.js'; 
    CKEDITOR.replace('editor'); 
 </script>

And:

<h:outputScript name="ckEditor.js" library="js"></h:outputScript>
<pe:ckEditor id="editor" customConfig="ckEditor.js"></pe:ckEditor>

And:

<pe:ckEditor id="editor"></pe:ckEditor>
    <script type="text/javascript">
        CKEDITOR.config.customConfig = 'ckEditor.js'; 
        CKEDITOR.replace('editor'); 
     </script>

And:

<pe:ckEditor id="editor" customConfig="ckEditor.js"></pe:ckEditor>

And:

<pe:ckEditor id="editor" customConfig="./ckEditor.js"></pe:ckEditor>

And (full path of the files is project/WebContent/pages/inc/ckEditor.js and project/WebContent/pages/inc/emailEditor.xhtml):

<pe:ckEditor id="editor" customConfig="project/WebContent/pages/inc/ckEditor.js"></pe:ckEditor>

And:

<pe:ckEditor id="editor" customConfig="/project/WebContent/pages/inc/ckEditor.js"></pe:ckEditor>

And (because of https://forum.primefaces.org/viewtopic.php?t=31334):

<pe:ckEditor id="editor" customConfig="#{request.contextPath}/ckEditor.js"></pe:ckEditor>

When I entered the details from the custom config file into the <script> below the <pe:ckEditor>, it worked, but that is unfortunately not a solution for my case as I use the editor on many pages and need its settings to be stored at one place only.

Also, when I was googling, I found some suggestion that I should place the directions for the custom config into the default config file, but I have not found any default config file in my project, so that is unfortunately not an option for me.

I did google, read documentation at PrimeFaces Extensions page and CKEditor page, read similar questions at PrimeFaces forum, CKEditor forum and here, but nothing has worked yet.

PrimeFaces Extensions - version 7.0.2
PrimeFaces - version 7.0.7

score 3 · Accepted Answer · answered Jan 06 '20 at 19:49

3

The customConfig attribute on pe:ckEditor is a URL.
So just put your JS somewhere, where it's a accessible via the browser.
If its accessible (for example) as localhost:8080/myfolder/ckeditor.js, it should work correctly when you set customConfig to '#{request.contextPath}myFolder/ckeditor.js'

answered Jan 06 '20 at 19:49

tandraschko

2,291
13
13

I made the file accessible via browser, but it still did not work when I set the `customConfig` to `#{request.contextPath}myPath/theCustomConfigFile.js`. I tried to set the `customConfig` to the full URL, via which I accessed the file by browser, `http://localhost:8093/myPath/theCustomConfigFile.js.xhtml?ln=js`and it worked! Thank you so much for help, @tandraschko ! – A.Alessio Jan 07 '20 at 09:36

PrimeFaces Extensions CKEditor: cannot access custom config

1 Answers1

Linked