CKEditor include in Your page only 4 Steps

[eluser]Rocky Mehta[/eluser]
1. Download the FCKEditor form the http://ckeditor.com/download web page and extract to your folder.
2. Open ckeditor folder and rename or remove the .htaccess page.
3. In ckeditor folder ckeditor.js file use in your page.(like language="javascript" type="text/javascript" src="your_website_base_path/ckeditor/ckeditor.js")
4.And last steps in your body <textarea class="ckeditor" name="editor1"></textarea>.
CKEditor is on your Browser.

i am try this steps and it's work really. so i put this post for my new codeigniter friends.
In my website it's done very well.
Thank x Codeigniter.

[eluser]srpurdy[/eluser]
You might also want to do something like this.

For images ckeditor likes using inline css style which if you use xss filtering or have security rules on the webserver it messes the images up. This would go in the config.js file. I also reversed the enter key press so it makes br's instead of paragraphs. No sense in having 17 paragraph tags in the markup every time someone uses the enter key. If you want a paragraph this should be the shift+enter. No clue why ckeditor designed it that way.

The code below also adds an image class "img_margin" to images. So you can add your own css margin

Code:

/*
Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config )
{
config.enterMode = CKEDITOR.ENTER_BR
config.shiftEnterMode = CKEDITOR.ENTER_P
config.resize_maxWidth = '100%';
};
CKEDITOR.on('instanceReady', function (ev) {
// Ends self closing tags the HTML4 way, like <br>.
ev.editor.dataProcessor.htmlFilter.addRules(
    {
        elements:
        {
            $: function (element) {
                // Output dimensions of images as width and height
                if (element.name == 'img') {
                    var style = element.attributes.style;
    
                    if (style) {
                        // Get the width from the style.
                        var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec(style),
                            width = match && match[1];

                        // Get the height from the style.
                        match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec(style);
                        var height = match && match[1];
      
      match = /(?:^|\s)margin-left\s*:\s*(\d+)px/i.exec(style);
                        var m_left = match && match[1];
      
      match = /(?:^|\s)margin-right\s*:\s*(\d+)px/i.exec(style);
                        var m_right = match && match[1];
      
      match = /(?:^|\s)float\s*:\s*(left|right)/i.exec(style);
                        var floating = match && match[1];

                        if (width) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)width\s*:\s*(\d+)px;?/i, '');
                            element.attributes.width = width;
                        }

                        if (height) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, '');
                            element.attributes.height = height;
                        }
      
      if (floating) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)float\s*:\s*(left|right);?/i, '');
                            element.attributes.align = floating;
                        }
      
      if (m_left) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)margin-left\s*:\s*(\d+)px;?/i, '');
       element.attributes.style = element.attributes.style.replace(/(?:^|\s)margin-right\s*:\s*(\d+)px;?/i, '');
                            element.attributes.class = 'img_margin';
                        }
      
      if (m_right){
          element.attributes.style = element.attributes.style.replace(/(?:^|\s)margin-left\s*:\s*(\d+)px;?/i, '');
       element.attributes.style = element.attributes.style.replace(/(?:^|\s)margin-right\s*:\s*(\d+)px;?/i, '');
                            element.attributes.class = 'img_margin';
      }
                    }
    
     if (element.attributes.class)
     {
     }
     else
     {
     element.attributes.class = 'img_margin';
     }
    
                }



                if (!element.attributes.style)
                    delete element.attributes.style;

                return element;
            }
        }
    });
});