1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Making the most of the CKEditor Plugin using the oEmbed CKEditor plugin

Discussion in 'How-To and Troubleshooting' started by nothingman, Jun 14, 2013.

  1. nothingman

    nothingman Active Member

    What you will be able to do after following this tutorial
    1. Post/Embed content on your HotaruCMS web site from over 140 Web sites!
    2. Configure the CKEditor toolbar

    What you must first do
    1. Follow the instruction of enabling the iframe HTML tag here.
    2. Follow seekyt's instructions of uploading images via CKEditor here.

    First off, the CKEditor javascript folder that comes along with the CKEditor Plugin is quite outdated. So first, download the latest version of CKEditor - I chose the one with 'Full' Features.

    1. Once you have downloaded CKEditor, upload all the files to the /content/plugins/ckeditor/javascript/ folder
    Tip:
    - Before uploading the CKEditor files, delete the languages you will not need from the lang folder located at /javascript/lang/
    - I like my toolbar to be simple. So, delete the plugins you will not need located at /javascript/plugins/. I believe the folder names are quite self-explanatory.

    2. Go to http://ckeditor.com/addon/oembed and download the oEmbed plugin.
    3. Upload the oembed folder to /content/plugins/ckeditor/javascript/plugins/
    4. Open config.js located at /content/plugins/ckeditor/javascript and paste the following lines of code.

    PHP:
    /**
     * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
     * For licensing, see LICENSE.html or http://ckeditor.com/license
     */

    CKEDITOR.editorConfig = function( config )
    {
        
    config.toolbar 'MyToolbar';
        
    //for Oembed
        //Enable the plugin by changing or adding the extraPlugins line in your configuration (config.js):
        
    config.extraPlugins 'oembed';
        
    config.oembed_maxWidth '560';
        
    config.oembed_maxHeight '315';
        
    // Load the English interface.
        
    config.language 'en';
        
    // In CKEditor 4.1 or higher you need to disable ACF (Advanced Content Filter) in the config.js file:
        
    config.allowedContent true;
        
    config.removePlugins 'elementspath,save,font,preview,find,forms,iframe,liststyle,magicline,div,pagebreak,pastefromword,colordialog,a11yhelp,wsc,clipboard,scayt,print,templates';
        
    config.toolbar_MyToolbar =
        [
            { 
    name'document'items: [ 'Source' ] },
            
    // { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
            
    name'basicstyles'items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
            { 
    name'clipboard'items : [ 'Undo','Redo' ] },
            
    //{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
            //{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
            
    name'paragraph'items : [ 'NumberedList','BulletedList','-','Blockquote' ] },
            
    //{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] },
            
    name'insert'items : [ 'Image','oembed','youtube','HorizontalRule','Smiley'] },
            { 
    name'links'items : [ 'Link','Unlink' ] },
            { 
    name'tools'items : [ 'Maximize','-','About' ] }
        ];
    }; 

    An explanation of some of the code above.
    The following code loads ONLY the language of your choice. So, your CKEditor will load faster.
    PHP:
        // Load the English interface.
        
    config.language 'en';
    If you haven't deleted some of the plugins from the CKEditor plugin folder, the follow line of code disables the said plugins. Again, this makes CKEditor load faster.
    PHP:
        // In CKEditor 4.1 or higher you need to disable ACF (Advanced Content Filter) in the config.js file:
        
    config.removePlugins 'elementspath,save,font,preview,find,forms,iframe,liststyle,magicline,div,pagebreak,pastefromword,colordialog,a11yhelp,wsc,clipboard,scayt,print,templates'
    The following lines of code define the way I want the toolbars to be arranged in my CKEditor.
    PHP:
    config.toolbar_MyToolbar =
        [
            { 
    name'document'items: [ 'Source' ] },
            
    // { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
            
    name'basicstyles'items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
            { 
    name'clipboard'items : [ 'Undo','Redo' ] },
            
    //{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
            //{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
            
    name'paragraph'items : [ 'NumberedList','BulletedList','-','Blockquote' ] },
            
    //{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] },
            
    name'insert'items : [ 'Image','oembed','youtube','HorizontalRule','Smiley'] },
            { 
    name'links'items : [ 'Link','Unlink' ] },
            { 
    name'tools'items : [ 'Maximize','-','About' ] }
        ];
    5. Save the file
    6. Open ckeditor.php located at /content/plugins/ckeditor/
    7. Look for public function pre_close_body($h) and paste the following i.e. replace the whole pre_close_body function with the following lines of code.
    Notice that MyToolbar is the toolbar that we had declared in the config.js file - we're just calling it.
    PHP:
        public function pre_close_body($h)
        {
            
    // Exit if this page name does not contain 'submit' and isn't edit_post
            
    if ((strpos($h->pageName'submit') === false) && ($h->pageName != 'edit_post')) {return false;}
            
            echo 
    "<script type='text/javascript'> window.onload = function() {CKEDITOR.replace( 'post_content',{toolbar : 'MyToolbar'});this.dataProcessor.writer.setRules( 'br',{indent : false,breakBeforeOpen : true,breakAfterOpen : false,breakBeforeClose : false,breakAfterClose : true}); };</script>";
        }
    8. Save the file

    Further stuff:
    I've enabled uploading files using CKEditor as posted by seekyt. Follow the steps and you can allow users to upload images using CKEditor
     
    Last edited: Jun 14, 2013
    valMETNG, angolanmade and Nick like this.

Share This Page