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
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'