21👍
✅
Finally I get simple dialogs for: including links, attaching images from a link or uploading from the computer and to include Youtube videos in a simple way. To do this I’ve edited the configuration file called config.js and it looks like this for my version CKeditor 4.1.2:
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For the complete reference:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// Comment the following line in DEBUG mode:
config.removePlugins = 'devtools';
// See the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
// Make dialogs simpler.
config.removeDialogTabs = 'image:advanced;image:Link;link:advanced;link:upload';
config.linkShowTargetTab = false;
// In CKEditor 4.1 or higher you need to disable ACF (Advanced Content Filter)
// to make Youtube plugin work:
config.allowedContent = true;
};
CKEDITOR.on('dialogDefinition', function(ev) {
// Take the dialog name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is from the dialog we're
// interested in (the 'link' dialog).
if (dialogName == 'link') {
// Remove the 'Upload' and 'Advanced' tabs from the 'Link' dialog.
// dialogDefinition.removeContents('upload');
// dialogDefinition.removeContents('advanced');
// Get a reference to the 'Link Info' tab.
var infoTab = dialogDefinition.getContents('info');
// Remove unnecessary widgets from the 'Link Info' tab.
infoTab.remove('linkType');
infoTab.remove('protocol');
infoTab.remove('browse');
// Get a reference to the "Target" tab and set default to '_blank'
var targetTab = dialogDefinition.getContents('target');
var targetField = targetTab.get('linkTargetType');
targetField['default'] = '_blank';
} else if (dialogName == 'image') {
// Remove the 'Link' and 'Advanced' tabs from the 'Image' dialog.
// dialogDefinition.removeContents('Link');
// dialogDefinition.removeContents('advanced');
// Get a reference to the 'Image Info' tab.
var infoTab = dialogDefinition.getContents('info');
// Remove unnecessary widgets/elements from the 'Image Info' tab.
infoTab.remove('browse');
infoTab.remove('txtHSpace');
infoTab.remove('txtVSpace');
infoTab.remove('txtBorder');
// infoTab.remove('cmbAlign');
}
});
To do this I’ve read a lot of documentation, but the best pages that have inpired me are the following:
- http://ckeditor.com/ckeditor_4.1rc/samples/plugins/toolbar/toolbar.html
- http://ckeditor.com/forums/Support/Removing-Tabs-Image-Dialog
- http://ckeditor.com/forums/CKEditor/Complete-list-of-toolbar-items
- http://khaledben.wordpress.com/2012/04/28/customize-ckeditor-dialog/
- http://www.question2answer.org/qa/13255/simple-ckeditor-how-to-modify-it-to-be-simple-solution
I hope this helps someone else with the same problem. Cheers!
6👍
Here are a lot of tweaks I did for CKEditor v3.6.1 to make it usable (esp. image dialog and link dialog). They seem to work for CKEditor 4.x as well, just take what you need for your config.js:
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
config.language = 'de';
config.extraPlugins = 'colordialog';
// config.extraPlugins = 'matheeditor';
// config.uiColor = '#AADC6E';
// config.image_previewText = CKEDITOR.tools.repeat('Custom lorem ipsum text here', 8 );
// config.contentsLanguage = 'de';
config.linkShowAdvancedTab = false;
config.linkShowTargetTab = false;
config.height = 350;
config.width = 680;
// change color palette
config.colorButton_colors = 'F00,11C11D,00F,B700B7,FF8C00,008080,808080,D3D3D3';
config.colorButton_enableMore = false;
// smaller editor-width for mobile devices
if (/iPhone|iPod/i.test(navigator.userAgent)) {
config.width = 300;
}
// for resizing the editor window
config.resize_minHeight = 350;
config.resize_maxHeight = 880;
config.resize_maxWidth = 910;
// remove all formatting from pasted text
config.forcePasteAsPlainText = true;
// remove font size, family, bg color from pasted text
config.pasteFromWordRemoveFontStyles = true;
// allow browser's spell checker
config.disableNativeSpellChecker = false;
// disable ckeditor context menu to allow native context menu (works on holding CTRL)
// open: http://stackoverflow.com/questions/2246631/how-to-disable-ckeditor-context-menu/12477378
// shortcuts for firefox and chrome (editor breaks if assigned in IE9)
// if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1 || navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
if ( !(/MSIE (\d+\.\d+);/.test(navigator.userAgent)) ) {
config.keystrokes = [
// [ CKEDITOR.SHIFT + 45, 'pastefromword' ], //INS
[ CKEDITOR.CTRL + 76, 'link' ], //L
[ CKEDITOR.CTRL + CKEDITOR.ALT + 66, 'image' ], //B
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 77, 'specialchar' ], //M
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 188, 'subscript' ], //COMMA
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 109, 'subscript' ], //-
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 191, 'subscript' ], //#
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 190, 'superscript' ], //PERIOD
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 107, 'superscript' ], //+
[ CKEDITOR.CTRL + 66, 'bold' ], //B
[ CKEDITOR.CTRL + 73, 'italic' ], //I
[ CKEDITOR.CTRL + 85, 'underline' ], //U
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 70, 'bold' ], //F
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 75, 'italic' ], //K
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 85, 'underline' ], //U
];
}
};
CKEDITOR.on( 'dialogDefinition', function( ev ) {
// take the dialog name and its definition from the event data
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
//var dialog = CKEDITOR.dialog.getCurrent();
//alert( dialog.getName() );
// check if the definition is from the dialog we are interested in (the 'link' dialog).
if(dialogName == 'link') {
dialogDefinition.onShow = function () {
var dialog = CKEDITOR.dialog.getCurrent();
//dialog.hidePage( 'target' ); // via config
//dialog.hidePage( 'advanced' ); // via config
elem = dialog.getContentElement('info','anchorOptions');
elem.getElement().hide();
elem = dialog.getContentElement('info','emailOptions');
elem.getElement().hide();
var elem = dialog.getContentElement('info','linkType');
elem.getElement().hide();
elem = dialog.getContentElement('info','protocol');
elem.disable();
};
}
else if(dialogName == 'image') {
// get a reference to the 'Link Info' tab.
var infoTab = dialogDefinition.getContents('info');
// remove unnecessary fields
infoTab.remove('ratioLock');
infoTab.remove('txtHeight');
infoTab.remove('txtWidth');
infoTab.remove('txtBorder');
infoTab.remove('txtHSpace');
infoTab.remove('txtVSpace');
infoTab.remove('cmbAlign');
//hide image preview (v2)
//field = infoTab.get( 'htmlPreview' );
//field.style = 'display:none';
// memo: dialogDefinition.onShow = ... throws JS error (C.preview not defined)
dialogDefinition.onLoad = function () {
var dialog = CKEDITOR.dialog.getCurrent();
// hide image preview
var elem = dialog.getContentElement('info','htmlPreview');
elem.getElement().hide();
// hide tabs and show only upload
dialog.hidePage('Link');
dialog.hidePage('advanced');
this.selectPage('Upload');
// hide url on start up, prevent user input external image URLs
// goes in onShow of image.js: dialog.hidePage('info');
// hide ok button so that upload button can only be used
// goes in onShow of image.js: document.getElementById(this.getButton('ok').domId).style.display='none';
// on tab switching or automatic after upload
this.on('selectPage', function (e) {
// show okay button of ckeditor dialog
document.getElementById(this.getButton('ok').domId).style.display='inline';
// after upload the selectPage is fired, show Bild-Info then
dialog.showPage( 'info' );
});
};
}
else if(dialogName == 'table') {
dialogDefinition.removeContents('advanced');
}
});
6👍
If you are using django-ckeditor, you can simply have the following configuration in the settings.py file. You can configure it to your needs. No need to mess with JS.
CKEDITOR_CONFIGS = {
'default': {
'toolbar': 'Custom',
'toolbar_Custom': [
['Bold', 'Italic', 'Underline', 'Strike'],
[
'NumberedList',
'BulletedList',
'Outdent',
'Indent',
'-',
'JustifyLeft',
'JustifyCenter',
'JustifyRight',
'JustifyBlock'
],
['Link', 'Unlink'],
['RemoveFormat', 'Source'],
],
'height': 300,
'width': 695,
'linkShowAdvancedTab': False,
'linkShowTargetTab': True,
},
}
- Found another file with the destination path – where is that other file?
- AttributeError: 'NoneType' object has no attribute 'attname' (Django)
3👍
Regarding links
Feel free to remove “Target” tab:
dialogDefinition.removeContents( 'target' );
Use the power of dataProcessor instead:
CKEDITOR.replace( 'editor1', {
on: {
instanceReady: function() {
this.dataProcessor.htmlFilter.addRules( {
elements: {
a: function( element ) {
element.attributes.target = '_blank';
}
}
});
}
}
} );
This will add target="_blank" to all <a> elements in editor output. See docs to know more.
Regarding images
There’s nothing much beyond CKFinder (commercial), KCFinder, PDW File Browser and Jasfinder. At least I cannot recall any more.
👤oleq
- Django – how to get a queryset based on a count of references to foreign field
- Django-ajax-selects example usage
- Why does python new york time zone display 4:56 instead 4:00?
- Django 1.8 Migrations. Adding DateTimeField after db creation. Best practices?
Source:stackexchange.com