Develop Reference

PrimeFaces Extensions CKEditor: cannot access custom config

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'

Dangerous behavior disallowedcontent let me insert js in some case

I'm trying to let my user can paste some html tag in their post by using ckeditor.
But I have blacklisted some of them like script for example for avoiding XSS attack.
Here is part of my config.js
'...'
config.allowedContent = {
$1: {
elements: CKEDITOR.dtd,
attributes: true,
styles: true,
classes: true
}
};
config.disallowedContent = 'script;';
'...'
config.toolbar_mini = [
{ name: 'paragraph', groups: ['blocks', 'align', 'bidi' ], items: ['Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
{ name: 'styles', items: [ 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat' ] },
{ name: 'insert', items: [ 'Imgur', 'tliyoutube2', 'linkfile', 'Source'] },
];
When I click on Source for adding html tag and add
<script>alert('test')</script then I click on Source for adding non-html content and submit my post. CKEDITOR will remove the script tag correctly as I expected.
But if do the same:
Click on Source then add my script tag
<script>alert('test')</script> and submit the post without being out of Source mode. The script is saved in my DB and executed.
Also if I try to edit this message and go on Source mode CKEDITOR disable this script tag.
Obviously I have to create validator on my backend for avoiding this. But I don't think this the correct behavior of disallowedContent or if it is then I don't understand why.
Did I missconfigure my CKEDITOR or is it the correct behavior ?

It seems that Source mode doesn't implement filtering: https://github.com/ckeditor/ckeditor-dev/issues/2326
I would disable Source plugin or prevent the submission while in Source mode.

Remove "Source" from CKEditor UI Source Dialog plugin

I'm using CKEditor (v4.7.0 - custom build) and I have added the Source Dialog plugin (http://ckeditor.com/addon/sourcedialog).
What is the best way remove the word "Source" from the toolbar UI?
e.g. from this:
To this:
I'm using the jQuery adaptor and initialising the editor like this:
$(el).ckeditor({
removePlugins: 'maximize,floatingspace,resize',
extraPlugins: 'autogrow,sharedspace,sourcedialog',
autoGrow_onStartup: true,
toolbarGroups: { name: 'main', groups: [ 'mode', 'document', 'doctools', 'find', 'selection', 'spellchecker', 'editing', 'clipboard', 'undo', 'forms', 'links', 'insert', 'basicstyles', 'cleanup', 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph', 'styles', 'tools', 'colors' ] },
autoGrow_maxHeight: 800,
sharedSpaces: {
top: 'editorActions',
bottom: 'editorFooter'
},
on: {
blur: function(evt) {
// blur functions
},
instanceReady: function (evt) {
// initial functions
},
change: function(evt) {
// save functions
}
}
});
Currently I am simply deleting the text by targeting the element on load.
$('#cke_[id]_label').html(' ');
But this feels somewhat hacktastic and I'd like to not load it rather than removing it.

You can hide the label and leave only the icon with CSS:
.cke_button__source_label {
display: none !important;
}
or
.cke_button_label.cke_button__source_label {
display: none;
}
See also this answer: https://stackoverflow.com/a/8487229/4708866

Just include this line in your config.js
config.removeButtons = 'Source';
or from the replace method as follows:
CKEDITOR.replace('exampleEditor1', {
removeButtons: 'Source',
extraPlugins: 'sourcedialog'
});

I can't add the Source button to CKEditor 4's toolbar

I'm having trouble adding the Source button to CKEditor 4's toolbar. I just downloaded the new CKEditor today.
I'm using a config object named oConfig:
oConfig.toolbar = 'Custom';
oConfig.toolbar_Custom = [
['Bold', 'Source', 'Italic']
];
The toolbar shows up with only the Bold and Italic buttons. This example from CKEditor's docs tells me it should be working.

There are two reasons why it may be happening:
You have downloaded the basic package, where the sourcearea plugin is not included.
You are using CKEditor in inline mode. Source mode isn't available in inline mode yet.

Future googlers, for CKEditor v4.2 now there is a plugin to view source code in inline editing mode.
http://ckeditor.com/addon/sourcedialog

Here is a plugin I've made:
First of all, inside ckeditor/plugins/ create a new folder called "htmlSource", inside it create a file called "plugin.js" and inside this file paste the code below:
//-----------------------------Start Plugin Code-------------------------
plugInName = 'htmlSource';
CKEDITOR.plugins.add(plugInName,
{
init: function (editor) {
editor.addCommand('htmlDialog', new CKEDITOR.dialogCommand('htmlDialog'));
editor.ui.addButton(plugInName, {
label: 'Html Source',
icon: 'http://www.example.com/images/btn_html.png',
command: 'htmlDialog'
});
CKEDITOR.dialog.add('htmlDialog', function (editor) {
return {
title: 'Fuente Html',
minWidth: 600,
minHeight: 400,
contents: [
{
id: 'general',
label: 'Settings',
elements:
[
// UI elements of the Settings tab.
{
type: 'textarea',
id: 'contents',
rows: 25,
onShow: function () {
this.setValue(editor.container.$.innerHTML);
},
commit: function (data) { //--I get only the body part in case I paste a complete html
data.contents = this.getValue().replace(/^[\S\s]*<body[^>]*?>/i, "").replace(/<\/body[\S\s]*$/i, "");
}
}
]
}
],
onOk: function () {
var data = {};
this.commitContent(data);
$(editor.container.$).html(data.contents);
},
onCancel: function () {
// console.log('Cancel');
}
};
});
}
});
//--------------------Plugin Code Ends Here--------------------
Please notice that there is a parameter called icon where you must set the url of the Plugin Button Image, I just put an example url ('http://www.example.com/images/btn_html.png') you must use a valid one to see the plugin button.
To set this plugin in the ckeditor toolbar, you must configure it inside the config.js file, for example:
CKEDITOR.editorConfig = function (config) {
config.plugins =
'htmlSource,' + //Here is the plugin
'about,' +
'a11yhelp,' +
'basicstyles,' +
'bidi,' +
.....;
config.toolbar = 'Full'; //Add the plugin to the full toolbar
config.toolbar_Full = //Note that our plugin will be the first button in the toolbar
[
['htmlSource', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'],
['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'],
['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
['BidiLtr', 'BidiRtl'],
'/',
['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
['Link', 'Unlink', 'Anchor'],
['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
'/',
['Styles', 'Format', 'Font', 'FontSize'],
['TextColor', 'BGColor'],
['Maximize', 'ShowBlocks', '-', 'About']
];
};
I know this is working, so if you have some trouble please tell me.

For me, it helped to use:
config.extraPlugins = 'htmlSource';

For CKEditor 4.1.1, a combination of the above two answers worked for me, although I had to make some minor tweaks. The portion that says "--- Start Plugin here ---" I was able to copy as-is. For the configuration options, I had to use
CKEDITOR.config.extraPlugins = 'htmlSource'; // Notice: "extraPlugins".
CKEDITOR.config.toolbar = 'Full';
CKEDITOR.config.toolbar_Full = ...;
instead of
CKEDITOR.editorConfig = function (config) { ...
Finally, this was all done in inline mode with a plain vanilla installation, i.e. I did not have to download any extra plugins to make this work.

I'm using Julio's plugin with version 4, and needed to make an adjustment to avoid this JS error:
TypeError: $(...).html is not a function
I swapped this line:
$(editor.container.$).html(data.contents);
with this:
// See http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData
editor.setData(
data.contents,
function() {
this.checkDirty();
}
);
My guess is Julio's solution requires jQuery, and my approach is the CKEditor approach (or at least closer to it!).

How to use config with ckeditor and jeditable?

I use jeditable : http://www.appelsiini.net/projects/jeditable
with the ckeditor http://ckeditor.com/
I found a plugin that works fine : http://blog.amps211.com/this-is-me-professing-my-love-for-jquery-and-how-i-got-ckeditor-working-with-jeditable/
But I have a problem, I can't add a customConfig.
My code :
var config = {
toolbar: [
['Source'],['ShowBlocks'],
['PasteText'],
['Image','HorizontalRule','SpecialChar'],
'/',
['Bold','Italic','Underline','Strike','-','Superscript','Format'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink']
],
toolbarStartupExpanded: true,
toolbarCanCollapse: false,
toolbarLocation: 'top',
startupShowBorders: false,
forcePasteAsPlainText: true,
skin: 'office2003',
filebrowserBrowseUrl : 'mylinkbrowse',
filebrowserUploadUrl : 'mylinkupload',
resize_enabled: 'true',
resize_dir: 'vertical',
height: '300px',
width: '100%',
uiColor: '#123456',
language: 'en'
}
$('.editreply').click(function(){
var editor = $(this).parent().find('.replyeditor');
editor.editable('mylink',{
type:'ckeditor',
cancel:'Cancel',
submit: 'OK',
rows:3,
onblur: 'ignore'
}); // END OF EDITABLE
CKEDITOR.replace(editor.find("textarea"),{customConfig:config});
editor.click();
//alert(editor.attr('id'));
}); // ENF editreply CLICK
The aim is to click on edit button to render the ckeditor. I add editor.click() to simulate the click.
How can pass the config to the ckeditor?
Thanks a lot

I think that CKEditor function is looking for a URL to the config, not the config itself. e.g. CKEDITOR.replace( 'myfiled', { customConfig : '/myconfig.js' } );
I'm pretty sure if you update "config.js", it will be used during every init. (I don't use that approach)
Because I have a simple setup (all my editors use the same config) I update the base CKEditor first...
function initializeCKEditor() {
var customToolBar =
[
['LocalSave','NewPage','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-', 'Scayt'],
['Undo','Redo','-','SelectAll','RemoveFormat','-','About','Preview'],
['Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', ...];
//Enable Spell as you Type
CKEDITOR.config.scayt_autoStartup = true;
CKEDITOR.config.extraPlugins = 'localSave';
CKEDITOR.config.removePlugins = 'elementspath';
CKEDITOR.config.toolbar = customToolBar;
then as needed i create/destroy editor instances
function initializeEditor(orientation) {
//ckeditor config
var ckeditor_config = {
sharedSpaces : {
top : 'editor-toolbar'
},
width : (scrnWidth+ckeditor_width_border),
height: scrnHieght};
//this is why we're here
$('.editor').ckeditor(ckeditor_config);
I hope that helps. I don't see any reason why you can't use the same approach. If you set the base CKEditior once, I perceive you'll have less overhead during instance creation but never bench marked.

The trick is to send the config from jEditable via the "ckeditor"-parameter. This is how mine config looks and it works great.
$(".editable_textarea").editable("<?php echo $_SERVER['PHP_SELF'] ?>", {
indicator : "<img src='img/indicator.gif'>",
type : 'ckeditor',
submitdata: { _method: "post" },
select : true,
submit : 'OK',
cancel : 'cancel',
cssclass : "editable",
onblur: "ignore",
ckeditor : {
toolbar:
[
['Source', '-', 'Bold', 'Italic', 'Format', 'Styles', '-', 'NumberedList', 'BulletedList', 'Blockquote', 'HorizontalRule', '-', 'Link', 'Unlink', '-', 'Image', '-', 'Maximize'],
['UIColor']
],
filebrowserBrowseUrl: baseUrl + 'admin/assets/?target=ckeditor',
contentsCss : baseUrl + 'media/css/custom_styles.css',
stylesSet : []
}
});