CKeditor and CI implementation

[eluser]MaartenDeGroote[/eluser]
Dear CI-community,

Since a few weeks the follow-up of FCKeditor, called CKeditor, has been released. Does anyone already have any experience on installing this one in CI? I'm kinda struggling with it here since I'm fairly new to php frameworks...

Thanx!

Martin

[eluser]spmckee[/eluser]
I would love to knw this too. I have FCKeditor up and running but would love to replace it.

[eluser]Josepzin[/eluser]
There are not PHP option in CKEditor, but i am making a helper for me:

*** delete the space of the script tag after the "<" ***

ckeditor_helper.php

Code:

<?php
if(!defined('BASEPATH')) exit('No direct script access allowed');

function form_ckeditor($data)
{
    $data['language'] = isset($data['language']) ? $data['language'] : 'es';
    
    $size    = isset($data['width']) ? 'width: "'.$data['width'].'", ' : '';
    $size  .= isset($data['height']) ? 'height: "'.$data['height'].'", ' : '';
    
    $options = '{'.
            $size.
            'language: "'.$data['language'].'",
            
            stylesCombo_stylesSet: "my_styles",
            
            startupOutlineBlocks: true,
            entities: false,
            entities_latin: false,
            entities_greek: false,
            forcePasteAsPlainText: false,
            
            filebrowserImageUploadUrl : "filexplorers/fckeditor_upload/image", // << My own file uploader
            filebrowserImageBrowseUrl : "filexplorers/inlinebrowse/image", // << My own file browser
            filebrowserImageWindowWidth : "80%",
            filebrowserImageWindowHeight : "80%",  

            
            toolbar :[
                ["Source","-","FitWindow","ShowBlocks","-","Preview"],
                ["Undo","Redo","-","Find","Replace","-","SelectAll","RemoveFormat"],
                ["Cut","Copy","Paste","PasteText","PasteWord","-","Print","SpellCheck"],
                ["Form","Checkbox","Radio","TextField","Textarea","Select","Button","ImageButton","HiddenField"],
                ["About"],
                    
                "/",
                
                ["Bold","Italic","Underline"],
                ["OrderedList","UnorderedList","-","Blockquote","CreateDiv"],
                
                ["Image","Flash","Table"],
                
                ["Link","Unlink","Anchor"],
                ["Rule","SpecialChar"],
                ["Styles"]
            ]
        }';
    
    
    $my_styles = 'CKEDITOR.addStylesSet("my_styles",
        [
            // Block Styles
            { name : "H3", element : "h3"},
            { name : "Heading 4", element : "h4"},
            { name : "Heading 5", element : "h5"},
            { name : "Heading 6", element : "h6"},
            { name : "Document Block", element : "div"},
            { name : "Preformatted Text", element : "pre"},
            { name : "Address", element : "address"},
        
            // Inline Styles
            { name: "Centered paragraph", element: "p", attributes: { "class": "center" } },
            
            { name: "IMG bordered", element: "img", attributes: { "class": "bordered" } },
            
            { name: "IMG left", element: "img", attributes: { "class": "left" } },
            { name: "IMG right", element: "img", attributes: { "class": "right" } },
            
            { name: "IMG left bordered", element: "img", attributes: { "class": "left bordered" } },
            { name: "IMGright bordered", element: "img", attributes: { "class": "right bordered" } },
        ]);';
    
    
    

    return
    // fix: move to &lt;HEAD...
    '&lt; script type="text/javascript" src="'.base_url().'application/plugins/ckeditor/ckeditor.js"&gt;&lt;/ script&gt;' .

    // put the CKEditor
     '&lt; script type="text/javascript"&gt;' .
            $my_styles .
            'CKEDITOR.replace("'.$data['id'].'", ' . $options . ');&lt;/ script&gt;';
}

To use:

Code:

echo form_ckeditor(array(
            'id'              => 'textarea_id',
            'width'           => '500',
            'height'          => '300',
            'value'         => htmlentities($textarea_value)
        ));

There is not finished, it works but i dont know if is the best way to do it.

[eluser]Josepzin[/eluser]
Humm... here a minimized version

ckeditor_helper.php

Code:

<?php
if(!defined('BASEPATH')) exit('No direct script access allowed');

function form_ckeditor($data)
{
    return '< script type="text/javascript" src="'.base_url().'application/plugins/ckeditor/ckeditor.js"></ script>' .
     '< script type="text/javascript">CKEDITOR.replace("'.$data['id'].'");</ script>';
}

To use:

Code:

echo form_ckeditor(array('id'=>'textarea_id'));

[eluser]MaartenDeGroote[/eluser]
Wow that's great. Thanks for your contributions. I'm about to try them out soon..

Regards,

Martin

[eluser]Piter[/eluser]
Hello, I have problem:

Błąd: uncaught exception: [CKEDITOR.editor.replace] The element with id or name "text" was not found.

Unfortunately I can not resolve it. With JavaScript on me heavily.

[eluser]goran_zg[/eluser]
Sorry, I don't get this uploader and browser file, is there some example or smth.

thnx in advance

[eluser]basty_dread[/eluser]
how could i fix this.. it says:

Code:

Fatal error: Call to undefined function form_ckeditor() in /home/myproject/public_html/system/application/views/step5view.php on line 175

i follow the steps above..
please help.. i want to integrate this new version of CKeditor. thanks

[eluser]Johan André[/eluser]
[quote author="basty_dread" date="1257691497"]how could i fix this.. it says:

Code:

Fatal error: Call to undefined function form_ckeditor() in /home/myproject/public_html/system/application/views/step5view.php on line 175

i follow the steps above..
please help.. i want to integrate this new version of CKeditor. thanks[/quote]

Well... did you load the helper?

[eluser]basty_dread[/eluser]
i fix my integration using the new ckeditor version 3.0.1.

by using this code::::

Code:

<s+c+r+i+p+t+ type="text/javascript" src="../../javascript/ckeditor/ckeditor.js"></s+c+r+i+p+t+> // include this on head tag... edit it for the path of your ckeditor.

&lt;textarea name="nf_editor"&gt;&lt;p&gt;Initial value.&lt;/p&gt;&lt;/textarea&gt;
                       <s+c+r+i+p+t type="text/javascript">
                             CKEDITOR.replace( 'nf_editor' );
                    </s+c+r+i+p+t>

and thats it... no more configs.
(remove the + sign on the script.. because the forum put [remove] [remove] on javascripts)