We Keep Coding

Add a non-breaking space button to the toolbar in CKeditor

I'm facing a problem with CKeditor (V4.17.0). I'm using it in a Symfony (V5) project. I installed the WYSIWYG with this doc. Then I downloaded the Non-breaking space plugin, I placed it in the path public/bundles/fosckeditor/plugins and I configured my yaml file:
twig:
form_themes:
- '#FOSCKEditor/Form/ckeditor_widget.html.twig'
fos_ck_editor:
default_config: config
configs:
config:
allowedContent: true
extraPlugins: 'nbsp'
removePlugins: 'elementspath,exportpdf,image,media, about'
toolbar:
- { name: "styles", items: [ 'Bold', 'Italic', 'Strike' ] }
- { name: "plugins", items: ['insertNbsp'] }
- { name: "paragraph", items: ['NumberedList'] }
plugins:
nbsp:
path: 'ckeditor/plugins/nbsp/'
filename: 'plugin.js'
My webpack.config.js :
.copyFiles([
{
from: './assets/images',
to: 'images/[path][name].[ext]',
},
{
from: './node_modules/ckeditor4/',
to: 'ckeditor/[path][name].[ext]',
pattern: /\.(js|css)$/,
includeSubdirectories: false,
},
{
from: './node_modules/ckeditor4/adapters',
to: 'ckeditor/adapters/[path][name].[ext]'
},
{
from: './node_modules/ckeditor4/lang',
to: 'ckeditor/lang/[path][name].[ext]'
},
{
from: './node_modules/ckeditor4/skins',
to: 'ckeditor/skins/[path][name].[ext]'
},
{
from: './node_modules/ckeditor4/vendor',
to: 'ckeditor/vendor/[path][name].[ext]'
},
{
from: './public/bundles/fosckeditor/plugins',
to: 'ckeditor/plugins/[path][name].[ext]'
},
])
The editor appear on the page, in my toolbar I've got everything I asked except the Non-breaking space plugin.
How can I insert into it ?

I don't think this plugin is used that way. You can't, if I'm not mistaken, load that into the toolbar.
Would it be possible for you to use this source code instead of the original plugin.js
CKEDITOR.plugins.add( 'nbsp',
{
init : function( editor )
{
editor.ui.addButton('Insert &nbsp', {
label: 'Insert ',
command: 'insertNbsp',
toolbar: 'insert',
icon: this.path + 'icons/icon.png'
});
// Insert if Ctrl+Space is pressed:
editor.addCommand( 'insertNbsp', {
exec: function( editor ) {
editor.insertHtml( ' ', 'text' );
}
});
editor.setKeystroke( CKEDITOR.CTRL + 32 /* space */, 'insertNbsp' );
}
} );
think about creating an icons folder as well as an icon of your choice to see a button in your toolbar.

How to add browser server to upload images in CKEditor

I'm using CKEditor in my web, I have intergated CKeditor and want to upload my image from pc to server
I refer this link:
http://devture.com/projects/ckeditor-imagebrowser/demo/
this is my code:
<div class="container">
<!-- <h2><label for="editor1">Developer Site Editor</label></h2> -->
<textarea name="ir1" id="ir1" rows="1" cols="10" style="width:580px; height:600px; min-width:400px; min-height:50px; display:none;"> </textarea>
</div>
<script>
CKEDITOR.replace( 'ir1', {
// Define the toolbar: http://docs.ckeditor.com/#!/guide/dev_toolbar
// The standard preset from CDN which we used as a base provides more features than we need.
// Also by default it comes with a 2-line toolbar. Here we put all buttons in a single row.
toolbar: [
{ name: 'document', items: [ 'Source' ] },
{ name: 'basicstyles', items: [ 'Bold', 'Italic' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },
{ name: 'links', items: [ 'Link', 'Unlink' ] },
{ name: 'insert', items: [ 'CodeSnippet', 'Image', 'Mathjax', 'EmbedSemantic', 'Table' ] },
{ name: 'tools', items: [ 'Maximize' ] },
{ name: 'styles', items: [ 'Format', 'Styles' ] }
],
...
</script>
When I run and icon image display but it is not include 'browsers server' button
How to add 'Browsers Server' button in CKEditor ? Thank so much !!

Please see this link as well as other links from that section.
Basically you should set at minimum these two settings: filebrowserBrowseUrl and filebrowserUploadUrl advanced file manager like e.g. CKFinder or to some custom code which will handle uploads and file browsing for you.
Please also note that File Browser plugin is required (it is available by default in standard and full packages).

CKEditor is stripping a tags when copying and pasting from microsoft word. How can I diagnose why this is happening?

I am tasked with fixing a problem with my company's CMS. We use CKEditor. When users cut from microsoft word and paste into the editor, tags are removed. This was done intentionally by someone who no longer works at the company, and now we want to allow a tags.
I am able to find the editor by going into the javascript console. When I inspect the object, I find that editor.config.allowedContent is set to "p[*](*){*}; h1[*](*){*}; h2[*](*){*}; em; b; u; ul[*](*){*}; ol[*](*){*}; li[*](*){*}; img[*](*){*}; iframe[*](*){*}; a[*](*){*}; object[*](*){*}; param[*](*){*}; embed[*](*){*}; video[*](*){*}; i; table[*](*){*}; tr[*](*){*}; td[*](*){*}; script[*](*){*}; h3[*](*){*}; span[*](*){*}; br[*](*){*}; div[*](*){*}; strong; blockquote[*](*){*} which contains an a tag.
What other possible causes could their be for the link tags being stripped on copy + paste?
Thanks!
Edit:
Here is config.js:
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];
config.removeButtons = 'Underline,Subscript,Superscript';
config.format_tags = 'p;h1;h2;h3;pre';
config.removeDialogTabs = 'image:advanced;link:advanced';
config.fillEmptyBlocks = false;
config.baseFloatZIndex = 100001;
config.extraAllowedContent = 'a';
};
CKEDITOR.config.fillEmptyBlocks = false;
Furthermore it seems some config options are set dynamically:
this.editorObject = CKEDITOR.inline(this.$editable[0],{
forcePasteAsPlainText: true,
title: this.label,
customConfig: '',
removePlugins: 'autocorrect,format,stylescombo',
removeButtons: 'PasteText,Flash,Anchor,ShowBlocks,About',
extraPlugins: extraPlugins,
linkShowAdvancedTab: false,
linkShowTargetTab: true,
youtube_responsive: true,
youtube_related: false,
scayt_autoStartup: true,
readOnly: this.disabled,
floatSpacePinnedOffsetY: 100,
floatSpaceDockedOffsetY: 25,
toolbar: this.toolbarDefinitions[this.variant],
allowedContent: allowedContent,
blockedKeystrokes: blockedKeystrokes,
keystrokes: keystrokes,
on: {
instanceReady: _.bind(function(e) {
if (this.fieldname == 'inc_clean_text' && this.area) {
this.area.generateInlineVideoPlayers();
var area = this.area;
async.nextTick(function() {
_.each(area.inlineVideoPlayers, function(player) {
player.menu && player.menu.show();
});
});
}
this.$editable.focus();
// When triggerred will focus on the editor.
this.$editable.on('focusCursor', (function() {
var range = this.editorObject.createRange();
range.moveToElementEditablePosition(this.editorObject.editable(), true);
this.editorObject.getSelection().selectRanges([range]);
}).bind(this));
if (this.editorObject.document.$.getElementById('caret-position-placeholder')) {
// When there is a caret placeholer present will put the cursor there and
// remove the placeholder element.
var node = new CKEDITOR.dom.element(this.editorObject.document.$.getElementById('caret-position-placeholder'));
var range = new CKEDITOR.dom.range(this.editorObject.document);
range.selectNodeContents(node);
this.editorObject.getSelection().selectRanges([range]);
$(this.editorObject.document.$.getElementById('caret-position-placeholder')).remove();
}
if (this.$editable.hasClass('pancaption_override')) {
// ! TODO Move elsewhere.
// Code specific to the main feature image caption editor.
if (this.$editable.data('reshow')) {
this.$editable.data('reshow', false);
$('.pancaption_default').hide();
this.$editable.attr('contenteditable', true);
this.$editable.show().focus().trigger('click');
this.editorObject.setReadOnly(this.disabled);
}
if (this.$editable.html() == '') this.$editable.trigger('focusCursor');
}
// When on the new article page and clicking on a field with default text then empty
// the editable text.
//this.editorObject.setData('');
//this.$editable.trigger('focusCursor');
//this.$editable.toggleClass('empty', true);
}, this),
change: _.bind(this.contentChanged, this)
}
});
Let me know if I should trace any of these variables.

Controlling which tags are allowed or disallowed is done through the config.js file usually located in the root of the CKEditor directory. http://docs.ckeditor.com/#!/guide/dev_configuration
As you've discovered through the console you can either allow or disallow certain tags through config.allowContent or config.disallowedContent respectively. http://docs.ckeditor.com/#!/guide/dev_acf

Can't place extraPlugin to right place in toolbar of CKEDITOR

After adding extra plugin in CKEditor: config.extraPlugins = 'syntaxhighlight'; I can't put it on navigation bar at place I wanted.
config.toolbarGroups = [
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'styles' },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks' ] },
{ name: 'insert' },
{ name: 'links' },
{ name: 'spellchecker' },
];
config.extraPlugins = 'syntaxhighlight';
When I load CKEditor my syntax plugin is placed in insert group, and I don't know how to get it out of there or how to place it any where else.
I'm using version 4.3

You need to locate place where button is defined within plugin.js file, so in your case that will be:
ckeditor/plugins/syntaxhighlight/plugin.js
Usually button definitions are passed to editor.ui.addX method, i.e.
editor.ui.addButton( 'MyButton',
{
label : 'My button label',
toolbar : 'insert,100'
} );
You need to adjust toolbar property:
- string part insert tells which group will receive button.
- number 100 stands for its position. The lower number is, the higher priority your button will have.
You may update property into following value:
toolbar : 'insert,5'

How do I pass in config info to CKEditor using the jQuery adapter?

I'm using the latest CKeditor with jQuery adapter.
I have successfully got it to work, and display.
However, as I am completely new to CKeditor, how do I pass in config variables using the jQuery method?
This is what I've got
$( '#input-content' ).ckeditor('', {
toolbar: 'basic'
});
I think from what I've read, the first argument is meant to be a callback, and the 2nd the config. But doing this has not changed the editor at all.
How do I use these config properties etc using the jQuery adapter?

I have accomplished this using this code. Hopefully this helps.
Here is the html:
<textarea id="txtMessage" class="editor"></textarea>
and here is the javascript:
try {
var config =
{
height: 180,
width: 515,
linkShowAdvancedTab: false,
scayt_autoStartup: true,
enterMode: Number(2),
toolbar_Full: [['Styles', 'Bold', 'Italic', 'Underline', 'SpellChecker', 'Scayt', '-', 'NumberedList', 'BulletedList'],
['Link', 'Unlink'], ['Undo', 'Redo', '-', 'SelectAll']]
};
$('textarea.editor').ckeditor(config); }

I passed an empty function...
$('textarea#my').ckeditor($.noop, {
property: 'value'
});

jQuery(function(){
var config = {
toolbar:
[
['Bold', 'Italic', 'Underline', '-', 'NumberedList', 'BulletedList', '-', 'Undo', 'Redo', '-', 'SelectAll'],
['UIColor']
]
};
jQuery('#textAreaElement').ckeditor(config);
});

var config = {
toolbar:
[
['Source','-','Save','NewPage','Preview','-','Templates'],
['Maximize', 'ShowBlocks','-','About']
],
coreStyles_bold: { element : 'b', overrides : 'strong' }
};
Simply add the respective config object, above I added coreStyles_bold, All I did is change the "=" from the CK API documentation to a ":"

$(document).ready(function(){
$('.reply').click(
function(event){
// Event click Off Default
event.preventDefault();
// CKEditor
$(function(){
var config = {toolbar:[['Bold', 'Italic', '-', 'Link', 'Unlink']]};
//<?php /*echo"var config = {toolbar:[['Bold', 'Italic', '-', 'Link', 'Unlink']]};" ;*/ ?>
// DOM class = "cke"
$('textarea.cke').ckeditor(function(){}, config);
});
return false;
});
});

There is an official documentation for it, see jQuery Adapter
The ckeditor() method accepts two optional parameters:
A callback function to be executed when the editor is ready.
Configuration options specific to the created editor instance:
$( 'textarea' ).ckeditor({
uiColor: '#9AB8F3'
});

Not sure if this is a new feature of CKEDITOR, but just want to share my solution (in case it helps anyone looking for this now):
$("textarea.youreditor").ckeditor
(
{
customConfig: "/path/to/custom/config.js"
}
);
... and my config looks like this (simply copied the default config.js):
CKEDITOR.editorConfig = function(config)
{
config.toolbar_Full =
[
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] }
];
};