I have integrated ckeditor with ckfinder. I want to remove the upload button from tool bar. When u click images/links from ckeditor, a file browser opens and then click "browse server" button. It opens another browser when you can browse the folders. On the top there is a tool bar section where we can find "Settings, Help and upload" buttons. I have to remove that upload button. i am using javascript. Please help
For removing ckfinder upload button then you need to add some code in ckfinder config.js
CKFinder.config.toolbar_Full = [['Refresh', 'Settings', 'Maximize']];
hope it is works
Set on main config.js (ckfinder 3 root folder):
config.removeModules = 'UploadFileButton';
Use this way of customizing toolbars
editor_edit = CKEDITOR.replace( 'e_notification', {
uiColor: '#888888',
height: '250px',
filebrowserBrowseUrl : 'http://localhost/SUServer1/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : 'http://localhost/SUServer1/ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl : 'http://localhost/SUServer1/ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl : 'http://localhost/SUServer1/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : 'http://localhost/SUServer1/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : 'http://localhost/SUServer1/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash',
filebrowserWindowWidth : '1000',
filebrowserWindowHeight : '700',
toolbar :
[
{ name: 'document', items : [ 'Source','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
'-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Table','HorizontalRule','Smiley','SpecialChar','Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] }
]
});
Related
I am using CKEDITOR with an Inline Setup.
I have defined my own config like that:
config.toolbar_Content =
[
['Undo','Redo','-','PasteText','-','Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink']
];
But the Buttons for NumberedList and BulletedList are not showing up.
If I use the local configuration page for setting up my config, the buttons are there, but not in my inline version.
What can I do?
Thanks
kay899
Your code is not working, the syntax is not correct.
This code should work for you. You have just to choose the right buttons.
CKEDITOR.editorConfig = function( config ) {
config.toolbar_Tiny =
[
{ name: 'clipboard', items : [ 'Paste','PasteText','Undo','Redo' ] },
{ name: 'basicstyles', items : [ 'Bold','Italic' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
];
};
Best regards.
I added the files provided in the zip download for the Simple Plugin (Part 1) example to a web site with a working CKEDITOR setup. I made no changes to any of the files. A plugin called abbr is supposed to be defined by this code. After reloading the page containing CKEDITOR, I did not see the icon for the plugin appear after I added the plugin to extraPlugins. I then added a reference to the plugin in the insert toolbar but that also did not work.
I can get the plugin dialog to appear by binding to a keystroke, so at least that much works:
config.keystrokes = [
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 32 /*space*/, 'abbr' ]
];
Here is my ckeditor.js, after removing the Play Framework view markup (hopefully I did not miss any):
<script>
function createEditor() {
var editor = CKEDITOR.instances.BLAH;
if (editor) {
try { editor.destroy(true) ; } catch ( e ) { }
}
editor = CKEDITOR.replace("BLAH", {
height: $(window).height() / 2 - 30,
"extraPlugins": "imagebrowser,abbr,codemirror",
on: {
instanceReady: function(evt) {
var maximized = $.cookie("maximized");
var me = maximized=="true";
if (me)
editor.execCommand('maximize');
},
save: function(evt) {
var scaytEnabled = CKEDITOR.plugins.scayt.state[evt.editor.name];
$.cookie("scayt_enabled", scaytEnabled.toString(), { path: '/' });
var maximized = evt.editor.commands.maximize.state==1;
$.cookie("maximized", maximized.toString(), { path: '/' });
}
}
});
}
</script>
Here is the JavaScript that launches CKEDITOR. abbr is the last plugin mentioned in insert toolbar:
CKEDITOR.editorConfig = function(config) {
config.allowedContent = true;
config.tabSpaces = 2;
config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';
config.toolbarCanCollapse = true;
config.toolbar = [
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] },
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps',/*'Preview',*/'Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
//{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
{ name: 'insert', items : [ 'Image',/*'Flash',*/'Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe', 'abbr' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
'/',
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'/*,'-','BidiLtr','BidiRtl'*/ ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker','Scayt' ] }
];
};
I noticed that the instructions had a difference from the code; this code was shown in the instructions:
editor.ui.addButton( 'Abbr', {
label: 'Insert Abbreviation',
command: 'abbrDialog',
toolbar: 'insert'
});
But the code in the download has a different value for command: abbr. Neither value worked. I tried adding abbrDialog to the insert section of config.toolbar but that did not work either. Perhaps there is still another problem.
There's a small bug in this tutorial - in the code you can download the command is named abbr when in the code samples it is abbrDialog.
But name of the button is all the time the same - Abbr (it's case sensitive!). So basically, your config.toolbar setting is incorrect, because you used lower cased name.
I 'd like to ask this small but very important question i got: (I Downloaded CKeditor 4.3.2, and believe me i've been looking for this over the internet for ssooooooo long without any success.)
I've tried to show the 'Smiley' icon in my toolbar, but it doesn't show it, and that happens with some others like 'Save', 'Print', 'NewPage' for instance and i don't know why. Also when i insert a link of a video isn't show either in order people watch it once is posted... Everything works just fine with the others but not with these i just mentioned! Please! thanks for reply!
PS: I've found in some forums that icons in these version 4.3.2 have change theirs names, u think that is the reason?
here is my code:
CKEDITOR.editorConfig = function( config )
{
uiColor: '#14B8C4',
config.toolbar = 'Full';
`config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-', 'Save','NewPage','DocProps','Preview','Print','-','Templates', 'Emoticons' ] },//solo Source
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo', 'clipboard' ] },//BIen
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt', 'TextColor' ] },//Solo SpellChecker
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', //nada
'HiddenField' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },//Todas
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv', 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },//Todas hasta Bloquiote
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] }, //Todas
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule',"Smiley",'SpecialChar','PageBreak','Iframe' ] }, //Falta flash, smiley, ifame
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] }, //ninguno
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-' ] }
];
//ToolBar groups configuration
config.toolbarGroups = [
{ name: 'document', groups: ['mode', 'document', 'doctools']},
{ name: 'clipboard', groups: ['clipboard', 'undo']},
{ name: 'editing', groups: ['find', 'selection', 'spellchecker']},
{ name: 'forms'},
'/',
{ name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
{ name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi']},
{ name: 'links'},
{ name: 'insert'},
'/',
{ name: 'styles'},
{ name: 'colors'},
{ name: 'tools'},
{ name: 'others'},
];
};
`
Finally I got the solution which was very simple. But, before I tell you the solution I'll tell you the reason:
CKEditor has been updated. So, some plugins' names have been changed, you're not going to find them with the same name as you used to.
Solution is: go to Download CKEditor with plugins selected by you, and there you're going to find three different packages to download and below there's another one: "Or let me customize my CKEditor" click on it and "download & customize editor".
After that you'll be redirected to another page on which you'll see two columns, the left one shows you all the plugins that come with the package by default (you can also eliminate some plugins if you don't want them) and the right column shows you some plugins that can be added to the package().
Hope you find this solution helpful.
Do you have the plugins installed to support those missing buttons?
I was seeing that in the CKeditor we've been using for a while now, all of the sudden, it lost some of it's toolbar buttons.
They were configured to be there, yet did not display. Buttons like TextColor, the Justifieds, etc..
What our problem turned out to be was that we were missing the plugins for these buttons. We must have switched from a compilation that included some plugins to the base code or something.
I am showing a ckeditor in my webpage using class="ckeditor" way. How can I configure my ckeditor to just show a basic toolbar. Here I found the sample page for showing a basic toolbar but not getting from documentation how to show that.
http://ckeditor.com/demo
check the Custom toolbar tab and see the first sample which has a very basic type of toolbar, how can I show it?
here is my code
<body>
<textarea class="ckeditor" id="description" rows="5" cols="15"></textarea>
</body>
I want to show basic toolbar for all instances of ckeditor of my website.
If you use Basic it will show all Toolbar, So use this
CKEDITOR.config.toolbar = [
['Styles','Format','Font','FontSize'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Undo','Redo','-','Cut','Copy','Paste','Find','Replace','-','Outdent','Indent','-','Print'],
'/',
['NumberedList','BulletedList','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Image','Table','-','Link','Flash','Smiley','TextColor','BGColor','Source']
] ;
If you put the two previous answers together, you will have the full solution. The first thing is to add the options in the 'config.js' file in your 'ckeditor' folder.
CKEDITOR.editorConfig = function( config ) {
config.skin = 'bootstrapck';
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
'HiddenField' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
'-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];
config.toolbar_Basic =
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];
};
Then add the call to the 'Basic' config in the HTML file.
<textarea id="ckeditor"></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'ckeditor',
{
toolbar : 'Basic', /* this does the magic */
uiColor : '#9AB8F3'
});
</script>
That should be all you need, and obviously do not forget to call the 'ckeditor.js' file in your html file.
You need to set a specific configuration on launch.
<script type="text/javascript">
CKEDITOR.replace( 'description',
{
toolbar : 'Basic', /* this does the magic */
uiColor : '#9AB8F3'
});
</script>
description is refering to the id of the editor on your website.
Interesting links:
Configuration settings
Toolbar configuration
General CK Docs
UPDATED FOR 2018:
Those helpful tykes at CKEditor have only gone and created an online editor that you can customise to your hearts content! It's a nightly build so a static URL is of no use to you - navigate from http://nightly.ckeditor.com to the basic configurator option then select the TOOLBAR CONFIGURATOR button.
Copy and paste the generated content in to the ivoryckeditor bundle's config.js file (Web folder) and it should work without needs any of other file changes.
I built the following simple layout to show cut & paste operations and :
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
];
config.removeButtons = 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript';
};
I was also stuck in this issue but after so many trials i got solution of my problem:
use this in ckeditor.rb:-
Ckeditor.setup do |config|
require "ckeditor/orm/active_record"
config.cdn_url = "//cdn.ckeditor.com/4.12.1/full/ckeditor.js"
end
you can also change full to basic, standard or classic as per your requirement
best of luck
I want to change the width and height of the Ckeditor but am not able to change it.
Please know that I want to change it when call CKeditor , I dont want to hard code it inside the config.js...
The bottom code is not working, what do you suggest ?
var editor = CKEDITOR.replace('editorToday',
{
toolbar :
[
{ name: 'document', items : [ 'Preview' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
{ name: 'insert', items : [ 'Image','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'] },
'/',
{ name: 'styles', items : [ 'Styles','Format' ] },
{ name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'tools', items : [ 'Maximize','-','About' ] }
]
});
CKEDITOR.instances.editor.resize(500, 400);
Try this:
var editor = CKEDITOR.replace('editorToday',
{
toolbar :
[
{ name: 'document', items : [ 'Preview' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
{ name: 'insert', items : [ 'Image','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'] },
'/',
{ name: 'styles', items : [ 'Styles','Format' ] },
{ name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'tools', items : [ 'Maximize','-','About' ] }
],
width: "400px",
height: "500px"
});
The following was taken from How to change or set width of Ckediotr TextBox area using ASP .Net.
Step1
Create a new ASP.NET webite and name it as Demo_application.
Step 2
Download Ckeditor from here and add Ckeditor to the root Folder of your Application.
Step 3
Call the Ckeditor Scripts in your .aspx page like below
<script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/adapters/jquery.js"></script>
Step 4
Add Ckeditor TextBox to your .aspx file with id txtCkEditor
<asp:TextBox ID="txtCkEditor" runat="server" TextMode="MultiLine"></asp:TextBox>
Step 5.
Call the Below JavaScript function to change the default width of Ckeditor TextBox area.
<script type="text/javascript">
$(function () {
CKEDITOR.replace('<%=txtCkEditor.ClientID %>');
CKEDITOR.config.width = 200;
});
</script>
Step 6
Test Your Application.
I suggest bracket notation as well as using the ID of the instance:
Try using
CKEDITOR.instances['editorToday'].resize(500, 400);
Simply use this :
CKEDITOR.replace('descCKEditor',{ width: "800px",height: "500px"});