This is a quick guide about integrating CKEditor<\/p>\n
Download CKEditor from here – https:\/\/ckeditor.com\/ckeditor-4\/download\/<\/a> I downloaded the full version. The above will replace the plain textarea with the CKEditor.<\/p>\n The number of toolbars and tools depends on the version of CKEditor (full or basic etc).<\/p>\n For a customizing the toolbar<\/p>\n <\/p>\n For making the file upload and drag drop uploads working with album view<\/p>\n Download the CKFinder from here\u00a0 https:\/\/ckeditor.com\/ckfinder\/download\/<\/a>\u00a0 I used the PHP version Open the config.php<\/span> file (under root of the ckfinder folder) and modify the following highlighted lines with suitable values<\/p>\n Enable the PHP adapter (we used the default PHP adapter that comes with the CKFinder)<\/p>\n Add the required plugins and enable them in the config.js<\/span> of the CKEditor<\/p>\n The PHP connector comes with the CKFinder<\/p>\n Here are the files used above (latest versions as of time of writing)<\/p>\n filetools_4.11.2<\/a><\/p>\n notificationaggregator_4.11.2<\/a><\/p>\n notification_4.11.2<\/a><\/p>\n ckfinder_php_3.4.5<\/a><\/p>\n ckeditor_4.11.2_full<\/a><\/p>\n uploadwidget_4.11.2<\/a><\/p>\n uploadimage_4.11.2<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" This is a quick guide about integrating CKEditor Download CKEditor from here – https:\/\/ckeditor.com\/ckeditor-4\/download\/ I downloaded the full version. Call the scripts in your code <script src=”ckeditor_full\/ckeditor.js”><\/script> … … <textarea required id=”content” name=”content”><?php echo strlen($content) ? $content : “” ?><\/textarea><br\/> <script> var editor = CKEDITOR.replace(‘content’); \/\/CKEDITOR.instances[‘content’].setData(“”); CKFinder.setupCKEditor(editor); \/\/see below – this is for the CKFinder… Continue reading CKEditor – WYSIWYG Editor for Web<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[161,163,162,160],"class_list":["post-648","post","type-post","status-publish","format-standard","hentry","category-php","tag-ckeditor","tag-cms-edit-rich-text-editor","tag-rich-text-editor","tag-wysiwyg","entry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/posts\/648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/comments?post=648"}],"version-history":[{"count":4,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/posts\/648\/revisions"}],"predecessor-version":[{"id":660,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/posts\/648\/revisions\/660"}],"wp:attachment":[{"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/media?parent=648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/categories?post=648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/tags?post=648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nCall the scripts in your code<\/p>\n<script src=\"ckeditor_full\/ckeditor.js\"><\/script>\r\n...\r\n...\r\n<textarea required id=\"content\" name=\"content\"><?php echo strlen($content) ? $content : \"\" ?><\/textarea><br\/> \r\n<script>\r\n var editor = CKEDITOR.replace('content');\r\n \/\/CKEDITOR.instances['content'].setData(\"\");\r\n CKFinder.setupCKEditor(editor);<\/span> \/\/see below - this is for the CKFinder and can be omitted if file uploading is not needed\r\n<\/script>\r\n...\r\n...\r\n...\r\n<script> \r\n\/\/validation if needed\r\n if(document.getElementById(\"content\").value.length == 0)\r\n {\r\n CKEDITOR.instances[0].updateElement(); \/\/Updates the <textarea><\/code> element that was replaced by the editor with the current data available in the editor. This is to ensure that it is updated before doing the check alert(\"Provide the mail body\"); return false; } <\/script><\/pre>\nCKEDITOR.editorConfig = function( config ) {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Define changes to default configuration here.<\/span>\r\n\u00a0\u00a0\u00a0\u00a0 \u00a0 \u00a0\u00a0 \/\/ For complete reference see:<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ http:\/\/docs.ckeditor.com\/#!\/api\/CKEDITOR.config<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ The toolbar groups arrangement, optimized for two toolbar\r\n<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 rows.<\/span>config.toolbarGroups = [\r\n\r\n\r\n{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },\r\n{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },\r\n{ name: 'links' },\r\n{ name: 'insert' },\r\n{ name: 'forms' },\r\n{ name: 'tools' },\r\n{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },\r\n{ name: 'others' },\r\n'\/',\r\n{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },\r\n{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },\r\n{ name: 'styles' },\r\n{ name: 'colors' },\r\n{ name: 'about' }\r\n];<\/pre>\n
\nCall the script in the code<\/p>\n<script src=\"ckfinder\/ckfinder.js\"><\/script><\/pre>\n
$config['backends'][] = array(\r\n\u00a0\u00a0 'name' => 'default',\r\n\u00a0\u00a0 'adapter' => 'local',\r\n\u00a0\u00a0\u00a0 'baseUrl' => 'https:\/\/xxxxxxxxxx.com\/projectname\/ckfinder\/userfiles\/', \/* note - I have used an URL but folder names and paths can be used also*\/<\/span>\r\n\u00a0\u00a0\u00a0 \/\/ 'root' => '', \/\/ Can be used to explicitly set the CKFinder user files directory.\r\n\u00a0\u00a0\u00a0 'chmodFiles' => 0644, \/\/this by default was 777 I changed that to 644<\/span>\r\n\u00a0\u00a0\u00a0 'chmodFolders' => 0755,\r\n\u00a0\u00a0 'filesystemEncoding' => 'UTF-8',\r\n);<\/pre>\n$config['authentication'] = function () {\r\n\u00a0\u00a0 return true;\u00a0 \/\/ by default this is false<\/span>\r\n};<\/pre>\nCKEDITOR.editorConfig = function( config ) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Define changes to default configuration here. For example:\r\n\u00a0\u00a0\u00a0\u00a0 \/\/ config.language = 'fr';\r\n\u00a0\u00a0\u00a0 \/\/ config.uiColor = '#AADC6E';\r\n\r\n\u00a0\u00a0\u00a0 config.extraPlugins = 'notification';\u00a0 \/\/https:\/\/ckeditor.com\/cke4\/addon\/notification -- required by Notification Aggregator plugin<\/span><\/span>\r\n\u00a0\u00a0\u00a0 config.extraPlugins = 'notificationaggregator'; \/\/https:\/\/ckeditor.com\/cke4\/addon\/notificationaggregator\u00a0 -- -- required by Upload<\/span><\/span>\r\n\r\n\u00a0\u00a0\u00a0 config.extraPlugins = 'filetools';\u00a0\u00a0 \/\/https:\/\/ckeditor.com\/cke4\/addon\/filetools -- required by Upload<\/span><\/span>\r\n\u00a0\u00a0\u00a0 config.extraPlugins = 'uploadwidget'; \/\/https:\/\/ckeditor.com\/cke4\/addon\/uploadwidget -- required by uploadimage<\/span><\/span>\r\n\u00a0\u00a0\u00a0 config.extraPlugins = 'uploadimage'; \/\/<\/span>\r\n};<\/pre>\n