Develop Reference

Custom config.js for ckeditor and displaying inside a fancybox

I am trying to use a custom config toolbar of ckeditor in Rails 5 but getting the following error.
Error:
ActionController::RoutingError (No route matches [GET] "/ckeditor/config.js"):
my /app/assets/javascripts/ckeditor/config.js
config.extraPlugins = 'divarea,s3FileUploader';
config.allowedContent = true;
config.disallowedContent = 'script';
config.dragdropConfig = {
backend: 's3',
settings: {
credentialUrl: '/r3_files/presigned_post',
region: 'us-west-2',
}
}
config.toolbar_mini = [
['-', 'Table', 'Link', 'Smiley', 'TextColor', 'BGColor', 'HorizontalRule'],
['Undo', 'Redo', '-', 'Cut', 'Copy', 'Paste', 'Find', 'Replace', '-', 'Outdent', 'Indent', 'NumberedList', 'BulletedList', '-'],
['Format', 'Font', 'FontSize', 'Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'Image']
];
config.toolbar = 'mini';
}```
file where ckeditor instance is called.
CKEDITOR.replace('email_body',{
customConfig: '/app/assets/javascripts/ckeditor/config.js'
});
the following are also included in my code
1. mount Ckeditor::Engine => '/ckeditor' in routes.rb
2. ckeditor/config.js in assets.rb
**Update:**
I changed the path to 'config.js' which used the custom toolbar BUT now the problem I am facing is shift+spacebar gives a space.So now I would like to use spacebar only for spaces. This same thing is also occuring while using backspace. Backspace only closes the editor but shift + backspace, does the actual function of Backspace.
Thank you in advance.

Summernote onImageUpload doesn't work when i get code content from server

When i create a post my images upload work correctly, but the callbacks get broke on the edit page
Here is my summernote config:
$('#summernote').summernote({
focus: false,
lang: 'pt-BR',
codemirror: { // codemirror options
theme: 'monokai'
},
toolbar: [
// [groupName, [list of button]]
['font', ['style','fontname', 'fontsize' ]],
['style', ['color','bold', 'italic', 'underline', 'clear']],
['para', ['ul', 'ol', 'paragraph', 'height']],
['insert', ['picture', 'link', 'hr']],
['misc', ['codeview']]
],
callbacks: {
onImageUpload: function (files, editor, welEditable) {
console.log('oi');
for (var i = files.length - 1; i >= 0; i--) {
sendFile(files[i], this)
}
},
onMediaDelete: function ($target, editor, $editable) {
let url = $target[0].src.split('/imgs/post/')[1]
$.post({
url: `http://${window.location.hostname}:3000/remove/foto/${url}`,
cache: false,
contentType: false,
processData: false
})
$target.remove()
}
}
})
The content fill the editor correctly, but when its setted the callbacks stop working.
Getting the content from server:
let content = String({{ data.content | dump | safe }})
if(content.length) $('#summernote').summernote('code', content)

Found a solution
Getting from server before:
let content = String({{ data.content | dump | safe }})
Then initializing with method chain:
$('#summernote').summernote({
focus: false,
lang: 'pt-BR',
code: 'asdpokaposdk',
codemirror: { // codemirror options
theme: 'monokai'
},
toolbar: [
// [groupName, [list of button]]
['font', ['style','fontname', 'fontsize' ]],
['style', ['color','bold', 'italic', 'underline', 'clear']],
['para', ['ul', 'ol', 'paragraph', 'height']],
['insert', ['picture', 'link', 'hr']],
['misc', ['codeview']]
],
callbacks: {
onImageUpload: function (files, editor, welEditable) {
console.log('oi');
for (var i = files.length - 1; i >= 0; i--) {
sendFile(files[i], this)
}
},
onMediaDelete: function ($target, editor, $editable) {
let url = $target[0].src.split('/imgs/post/')[1]
$.post({
url: `http://${window.location.hostname}:3000/remove/foto/${url}`,
cache: false,
contentType: false,
processData: false
})
$target.remove()
}
}
}).summernote('code', content)

Froala editor image edit option now showing

I was using Froala edit as rich text editor ,
$(notesSelector).on('froalaEditor.initialized', function (e, editor) {
//set original html after loading
froalaInitialHtml = $(notesSelector).froalaEditor('html.get');
});
$(notesSelector).froalaEditor({
key: 'XXXXXXXXXX',
toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', '|', 'color', 'emoticons', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', 'insertHR', '-', 'insertLink', 'insertImage', 'insertVideo', 'insertFile', 'insertTable', 'undo', 'redo', 'clearFormatting', 'selectAll', 'html'],
toolbarButtonsXS: ['undo', 'redo' , '-', 'bold', 'italic', 'underline','insertImage'],
imageEditButtons:['imageInfo', 'imageAlign' ],
toolbarSticky: true, });`
i was expecting image context menu , but they don't appear when image is selected

There are 2 possible reasons why the image popup is not showing:
You are not including the image plugin. Make sure you include the plugins/image.min.js file and plugins/image.min.css file.
There are other elements on the page which have a higher zIndex. This is likely to happen when you are using the editor inside a modal. To overcome it, set the editor zIndex option to a higher value.

Summernote dialog not display properly

I have a problem with my Summernote that the dialogs/modals are not fit it in exactly . Here's the pic.
And here my summernote code.
$('#summernote_new_post').summernote({
dialogsInBody: true,
height: 400,
minHeight: null,
maxHeight: null,
focus: false,
callbacks: {
onImageUpload: function(files, editor, welEditable) {
for (var i = files.length - 1; i >= 0; i--) {
sendFile(files[i], this);
}
},
},
dialogsFade: true,
toolbar: [
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'clear']],
['fontname', ['fontname']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['table', ['table']],
['insert', ['link', 'picture', 'hr', 'video']],
['view', ['codeview']],
['help', ['help']]
],
popover: {
image: [
['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
['float', ['floatLeft', 'floatRight', 'floatNone']],
['custom', ['imageAttributes', 'imageShape']],
['remove', ['removeMedia']]
],
link: [
['link', ['linkDialogShow', 'unlink']]
],
air: [
['color', ['color']],
['font', ['bold', 'underline', 'clear']],
['para', ['ul', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture']]
]
},
});
Can anyone help me with this? I think there is conflicts with my code. Thank you.

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!).