Part of the EllisLab Network
   
1 of 2
1
CKeditor and CI implementation
Posted: 26 August 2009 07:58 AM   [ Ignore ]  
Summer Student
Total Posts:  26
Joined  08-18-2009

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

Profile
 
 
Posted: 04 September 2009 12:50 PM   [ Ignore ]   [ # 1 ]  
Grad Student
Avatar
Rank
Total Posts:  71
Joined  01-09-2009

I would love to knw this too. I have FCKeditor up and running but would love to replace it.

Profile
 
 
Posted: 04 September 2009 01:53 PM   [ Ignore ]   [ # 2 ]  
Summer Student
Avatar
Total Posts:  26
Joined  09-08-2008

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

<?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 <HEAD...
    
'< script type="text/javascript" src="'.base_url().'application/plugins/ckeditor/ckeditor.js"></ script>' .

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


To use:

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.

 Signature 

Retro Invaders : Ungoliante blog : Glest Free Open Source RTS

Profile
 
 
Posted: 04 September 2009 02:07 PM   [ Ignore ]   [ # 3 ]  
Summer Student
Avatar
Total Posts:  26
Joined  09-08-2008

Humm… here a minimized version raspberry

ckeditor_helper.php

<?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:

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

Retro Invaders : Ungoliante blog : Glest Free Open Source RTS

Profile
 
 
Posted: 05 September 2009 06:23 AM   [ Ignore ]   [ # 4 ]  
Summer Student
Total Posts:  26
Joined  08-18-2009

Wow that’s great. Thanks for your contributions. I’m about to try them out soon..

Regards,

Martin

Profile
 
 
Posted: 05 September 2009 05:04 PM   [ Ignore ]   [ # 5 ]  
Summer Student
Total Posts:  29
Joined  07-02-2009

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.

 Signature 

Webcoding.pl - Tworzenie stron WWW

Profile
 
 
Posted: 14 September 2009 05:53 PM   [ Ignore ]   [ # 6 ]  
Summer Student
Total Posts:  5
Joined  09-14-2009

Sorry, I don’t get this uploader and browser file, is there some example or smth.

thnx in advance

Profile
 
 
Posted: 08 November 2009 04:44 AM   [ Ignore ]   [ # 7 ]  
Lab Assistant
RankRank
Total Posts:  140
Joined  10-19-2009

how could i fix this.. it says:

Fatal errorCall 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

Profile
 
 
Posted: 08 November 2009 06:51 PM   [ Ignore ]   [ # 8 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  455
Joined  03-28-2008
basty_dread - 08 November 2009 09:44 AM

how could i fix this.. it says:

Fatal errorCall 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

Well… did you load the helper?

 Signature 

———————————————————————————————————————————-
Imac 27” Core i7 / 12GB RAM
Macbook Pro 15” C2D 2.53Ghz / 4GB RAM / NVIDIA GeForce 9400M + 9600M GT 512MB
iPhone 4 16Gb Black

http://www.rockkarusellen.se

Profile
 
 
Posted: 08 November 2009 09:31 PM   [ Ignore ]   [ # 9 ]  
Lab Assistant
RankRank
Total Posts:  140
Joined  10-19-2009

i fix my integration using the new ckeditor version 3.0.1. 

by using this code::::

<s+c+r+i+p+ttype="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.

<textarea name="nf_editor"><p>Initial value.</p></textarea>
                       <
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)

Profile
 
 
Posted: 15 February 2010 11:04 PM   [ Ignore ]   [ # 10 ]  
Summer Student
Total Posts:  8
Joined  08-03-2009

first copy CKEditor folder to your web root
simply just add javascript for CKEditor

//For PHP
<?=script('ckeditor/ckeditor.js');?>
<?
=script('ckeditor/adapters/jquery.js');?>

//For Javasctipt
$(function()
{
    
var configFull {
        toolbar
:
        
[
            [
'Source','-','Save','NewPage','Preview','-','Templates'],
            
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print''SpellChecker''Scayt'],
            
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
            
['Form''Checkbox''Radio''TextField''Textarea''Select''Button''ImageButton''HiddenField'],
            
'/',
            
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
            
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
            
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
            
['Link','Unlink','Anchor'],
            
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
            
'/',
            
['Styles','Format','Font','FontSize'],
            
['TextColor','BGColor'],
            
['Maximize''ShowBlocks','-','About']
        ]
,
        
filebrowserBrowseUrl '<?=base_url()?>index.php/ajax/browse',
        
filebrowserUploadUrl '<?=base_url()?>index.php/ajax/upload',
        
filebrowserImageBrowseUrl '<?=base_url()?>index.php/ajax/imageBrowse',
        
filebrowserFlashBrowseUrl '<?=base_url()?>index.php/ajax/flashBrowse',
        
filebrowserImageUploadUrl '<?=base_url()?>index.php/ajax/imageUpload',
        
filebrowserFlashUploadUrl '<?=base_url()?>index.php/ajax/flashUpload',

        
    
};
    
    var 
configBasic {
        toolbar
:
        
[
            [
'Bold''Italic''-''NumberedList''BulletedList''-''Link''Unlink']
        ]
    }

    
// Initialize the editor.
    // Callback function can be passed and executed after full instance creation.
    
$('body')
        .
find('textarea.ckfull')
            .
ckeditor(configFull)
        .
end()
        .
find('textarea.ckbasic')
            .
ckeditor(configBasic);
}); 
Profile
 
 
Posted: 23 February 2010 06:32 AM   [ Ignore ]   [ # 11 ]  
Lab Assistant
RankRank
Total Posts:  140
Joined  10-19-2009

Hi there i need a simple image upload/ flash upload sample

because i dont know how it could get uploaded

just simple upload for the image and flash

using ckeditor.

Thanks

Profile
 
 
Posted: 23 March 2010 04:29 PM   [ Ignore ]   [ # 12 ]  
Summer Student
Avatar
Total Posts:  1
Joined  03-23-2010

check the Wiki:
http://codeigniter.com/wiki/CKEditor/

I put how to install and config with FCK 3.2 .

Regards,

Profile
 
 
Posted: 26 March 2010 04:55 PM   [ Ignore ]   [ # 13 ]  
Summer Student
Total Posts:  2
Joined  03-26-2010
Nicolas Rios - 23 March 2010 08:29 PM

check the Wiki:
http://codeigniter.com/wiki/CKEditor/

I put how to install and config with FCK 3.2 .

Regards,

Can you also show how to integrate ckfinder in it?
Thanks.

Profile
 
 
Posted: 03 May 2010 10:41 AM   [ Ignore ]   [ # 14 ]  
Summer Student
Avatar
Total Posts:  16
Joined  07-15-2009

The post is very nice and works like a charm, BUT can you also explain how to set up the CKFinder integration with CKEditor?

Thanks,

Carlos

 Signature 


Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning…

Profile
 
 
Posted: 27 October 2010 03:14 AM   [ Ignore ]   [ # 15 ]  
Summer Student
Total Posts:  19
Joined  02-19-2009
basty_dread - 23 February 2010 11:32 AM

Hi there i need a simple image upload/ flash upload sample

because i dont know how it could get uploaded

just simple upload for the image and flash

using ckeditor.

Thanks

first off all i downloaded the ckeditor then exctract it all into folder static.
thats just because i dont know which file that ckeditor will use.

this is my only image upload.
i don’t use the filebrowser plugin.

VIEW
[CODE]
<_script type=“text/javascript” src=”<?php echo base_url() . “/static/ckeditor/ckeditor.js” ?>”>[removed]
<?php print form_textarea(‘keterangan’,’‘,‘id=“keterangan” class=“textarea”’)?>
CKEDITOR.replace( ‘keterangan’,
{
  fullPage : true,
  filebrowserUploadUrl : ‘<?php echo base_url() . index_page() ?>/drainase/upload_saluran_ckeditor/’,
  filebrowserImageUploadUrl : ‘<?php echo base_url() . index_page() ?>/drainase/upload_saluran_ckeditor/keterangan/1/en’
});
<_/script>
[/CODE]

CONTROLLER
[CODE]
class Drainase extends Controller {

  function Drainase()
  {
}
 
  function index()
  {
 
  }

function upload_saluran_ckeditor(){
      $upload_gambar = $this->common->upload_image_file(‘upload’);
      if(isset($upload_gambar[‘data’][‘upload_data’][‘file_name’]) && trim($upload_gambar[‘data’][‘upload_data’][‘file_name’]) != ‘’) {
        $funcNum = $this->uri->segment(‘4’);
        $CKEditor = $this->uri->segment(‘3’);
        $langCode =$this->uri->segment(‘5’);

      // Check the $_FILES array and save the file. Assign the correct path to some variable ($url).
        $url = base_url() . ‘/file/images/’ . $upload_gambar[‘data’][‘upload_data’][‘file_name’];
      // Usually you will assign here something only if file could not be uploaded.
      $message = ‘’;
     
      echo “<_script type=‘text/javascript’>window.parent.CKEDITOR.tools.callFunction($funcNum, ‘$url’, ‘$message’);<_/script>”;
      } else {
        echo $upload_gambar[‘message’][‘error’];
      }

  }
}

[/CODE]
UPLOAD IMAGE FUNCTION [its just basic codeigniter upload file]

[CODE]
function upload_image_file($fieldnames) {
      $image_path = “” . BASE_FILE_IMAGE_PATH;
      $config[‘upload_path’] = $image_path;
      $config[‘allowed_types’] = ‘gif|jpg|png’;
      $config[‘max_size’]  = ‘300’;
      $config[‘max_width’]  = ‘1024’;
      $config[‘max_height’]  = ‘768’;
     
      $this->load->library(‘upload’, $config);
      $result[‘sukses’] = 0;
      $result[‘message’] = ‘gagal’ ;
      $result[‘data’] = array();
      if ( ! $this->upload->do_upload($fieldnames))
      {
        $error = array(‘error’ => $this->upload->display_errors());
        $result[‘message’] = $error ;
      } 
      else
      {
        $data = array(‘upload_data’ => $this->upload->data());
        $result[‘sukses’] = 1;
        $result[‘message’] = ‘Upload Sukses’ ;
        $result[‘data’] = $data;
      }
      return $result;
  }
[/CODE]
if you wanna read a full documentation. go to this link

http://docs.cksource.com/CKEditor_3.x/Developers_Guide/File_Browser_(Uploader)/Custom_File_Browser

 Signature 

my blog
my other blog

Profile
 
 
   
1 of 2
1