Integrating CK editor to your web

From Urandom
Jump to: navigation, search

First i want to say that the CK editor is used by people who work with word and are not web developers or geeks. It is used to enter content into a webpage. This configurations aims to make it limited but not usless, also as safe as possible, so the user couldn't scre up the webpage design.

Basic configuration

Nothing special here. I would point out that forcing paste as plaintext might seem like a bad idea, but trust me, it will f**k up your web site sooner or later, or just create a mayhem of hundrets of fonts and colors.

config.resize_minWidth = 597; 
config.resize_minHeight = 150;
config.width = '99%';
config.height = '330';
config.defaultLanguage = 'en';

config.toolbarStartupExpanded = true;
config.resize_enabled = true;
config.startupFocus = true;
config.menu_subMenuDelay = 100;
config.undoStackSize = 50;
//config.shiftEnterMode = CKEDITOR.ENTER_BR;
//config.enterMode = CKEDITOR.ENTER_BR;

config.protectedSource.push( /<\?[\s\S]*?\?>/g );   // PHP Code
config.protectedSource.push( /<%[\s\S]*?%>/g );   // ASP Code
config.protectedSource.push( /(]+>[\s|\S]*?<\/asp:[^\>]+>)|(]+\/>)/gi );   // ASP.Net Code
config.pasteFromWordPromptCleanup = false;
config.pasteFromWordRemoveStyles = true;
config.pasteFromWordRemoveFontStyles = true;
config.emailProtection = 'encode';
config.forcePasteAsPlainText = true;
config.pasteFromWordNumberedHeadingToList = true;

Style integration

Define your own styles, make sure the classes are available to the editor and site!

CKEDITOR.addStylesSet( 'my_styles',
[
    { name : 'Heading 1', element : 'h1' },
    { name : 'Heading 2', element : 'h2' },
    { name : 'Heading 3', element : 'h3' },
    { name : 'Tabel 1', element : 'table', attributes : { 'class' : 'yldine_tabel' }  },
    { name : 'Tabel 2', element : 'table', attributes : { 'class' : 'yldine2_tabel' }  },
    { name : 'Tabel borderless', element : 'table', attributes : { 'class' : 'jooneta_tabel' }  },
    { name : 'Image on Left', element : 'img', attributes : { 'style' : 'padding: 5px; margin-right: 5px', 'border' : '2', 'align' : 'left' }  },
    { name : 'Image on Right', element : 'img', attributes : { 'style' : 'padding: 5px; margin-left: 5px', 'border' : '2', 'align' : 'right'}  }
]);
* Set up the default colorpicker colors to match the web page design.
* I use a total of 3 css files: 
** style.css (common for editor and website, has the classes defined in the my_stiles), 
** style_ck.css (contains the body, html css for editor font/background), 
** style_web.css(only site specifics, like body or other classes that are in no interest to the editor)
config.colorButton_colors = '940c05,609405,056d94,947e05,000000,ffffff';
config.contentsCss = ['style_ck.css', 'style.css'];
config.stylesCombo_stylesSet = 'my_styles';


Toolbar

* This is more of a taste thing, but here is a toolbar that I use in my websites.
config.toolbar_Full =
[
    ['Undo','Redo','Find','Replace'],
    ['Cut','Copy','Paste','PasteText','PasteFromWord','RemoveFormat'],
    ['Maximize','Source','Templates'],
    ['Styles'],
    '/',
    ['TextColor','BGColor','Bold','Italic','Underline','Strike','Subscript','Superscript'],
    ['NumberedList','BulletedList','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    ['Link','Unlink','Anchor','Image','Flash','Table','HorizontalRule','SpecialChar']
];
};

Filemanager

* Since CKFind (default filemanager of CKeditor) is not free, i found a very nice hack that will use FCKeditors filemanager.
* Read about how-to do it here http://www.mixedwaves.com/2010/02/integrating-fckeditor-filemanager-in-ckeditor/
* Since CK is always launched from index.php i use this configuration to make paths and hostname irrelevant.
var ex=window.location.href.split('index.php');
config.filebrowserBrowseUrl ='ckeditor/filemanager/browser/default/browser.html?Connector='+ex[0]+'ckeditor/filemanager/connectors/php/connector.php';
config.filebrowserImageBrowseUrl = 'ckeditor/filemanager/browser/default/browser.html?Type=Image&Connector='+ex[0]+'ckeditor/filemanager/connectors/php/connector.php';
config.filebrowserFlashBrowseUrl ='ckeditor/filemanager/browser/default/browser.html?Type=Flash&Connector='+ex[0]+'ckeditor/filemanager/connectors/php/connector.php';
config.filebrowserUploadUrl  =ex[0]+'ckeditor/filemanager/connectors/php/upload.php?Type=File';
config.filebrowserImageUploadUrl = ex[0]+'ckeditor/filemanager/connectors/php/upload.php?Type=Image';
config.filebrowserFlashUploadUrl = ex[0]+'/ckeditor/filemanager/connectors/php/upload.php?Type=Flash';