CodeIgniter & SPAW Editor Tabs

A few months ago, I updated a great SPAW editor plug-in for CodeIgniter to use the most recent version of SPAW at the time, that included Safari Browser fixes and some CSS tweeks.

Well over the weekend I look at getting multiple tabs working.
It was pretty easy, with a couple of modifications to the SPAW wrapper class, I have create some sample usage, and examples for you to download.
I have made the CSS fixes from my previous post, and included some sample usage.

SPAW and CodeIgniter

SPAW and CodeIgniter

I am only going to explain how to create the SPAW instance within CodeIgniter, If you are unfamiliar with CI, you should first follow the Online Code Igniter Tutorial Videos.

Creating the SPAW instance

In my download, you will find a ‘pages’ controller.

function index() {
 
	// Define our first tab
	// 'name' == field name,
	// 'caption' == button caption,
	// 'content' == editor content
	$config = array(
		'name'    => 'content',
		'caption' => 'Content',
		'content' => !empty($_POST['content'])?$_POST['content']:'<h1>CodeIgniter &amp; SPAW Tabs</h1><p>SPAW Editor Class for CodeIgniter, <a href="http://sheldon.lendrum.co.nz/">Sheldon Lendrum</a></p>'
	);
 
	// start our SPAW instance
	$this->load->library('spaw', $config);
 
	// Add our secondary tabs
	$this->spaw->addTab('description', 'Description', !empty($_POST['description'])?$_POST['description']:'');
	$this->spaw->addTab('summary', 'Summary', !empty($_POST['summary'])?$_POST['summary']:'');
 
	// load our view
	$this->load->view('template');
 
}

SPAW Class

I have modified the SPAW class with 3 functions.

function Spaw($config) {}

The Spaw function initiates the Spaw editor. you pass in an array of the default Tab.

function show() {}

This returns the SPAW instance in to your view. It will return a string, so you will need to echo this in your layout.
EG;
< ?php echo($this->spaw->show()); ?>
You must call this ONLY IF SPAW is called in your controller previous.

function addTab($name, $caption, $value) {}

This is to add additional tabs to your spaw instance.
Your default tab is defined when you create your SPAW instance, so this is how you can call additional tabs.
$name == your field/$_POST name
$caption == your button title
$value == the SPAW editor default value.

Installing SPAW & CodeIgniter

I have included a full copy of CodeIgniter 1.7.1 with SPAW 2.0.8.1,
If you want to move the SPAW plugin to your own copy of CI, move the;
'system/application/libraries/spaw2' directory and the
'system/application/libraries/spaw.php' file.

If you are on an APACHE server and using MOD REWRITE url rules, make sure you have the included .htaccess file in the spaw2/ dir.
'system/application/libraries/spaw2/.htaccess'

Download and Install

CodeIgniter and Spaw Tabs (672)
This entry was posted in Code, fun, Life, Technology, work and tagged , . Bookmark the permalink.

12 Responses to CodeIgniter & SPAW Editor Tabs

  1. Pingback: Sheldon Lendrum» CodeIgniter & Spaw Editor

  2. Rohit Wagdarikar says:

    how to change the values of drop down list i.e the values of Style & Paragraph. in which file we need to make a changes.

    Thanks
    Rohit Wagdarikar

  3. francis says:

    after moving the files to my Codeigniter 1.7.1. It’s not working. Only the names of buttons (ex:UndoRedo Ordered) appears on the view. Do you have an idea?
    thanks

  4. Sheldon says:

    Hi Rohit,

    You can alter those values in the SPAW config file.

    it should be located in /system/application/libraries/spaw2/config/config.php

  5. Sheldon says:

    Hi Francis,

    When you moved the spaw dir, did you also move the .htaccess file inside thats spaw dir?

  6. reneegate says:

    Hi sheldon,

    I have integrated spaw CI and everything works well.
    But now I need 2 instances and it does not work well. Could you help me?

    here the code :
    $config = array(
    ‘name’ => ‘textegalm’,
    ‘caption’ => ‘texte galerie’,
    ‘content’ => $data["infos_gal"]->textegal
    );
    $this->load->library(‘spaw’, $config);
    $data["contenu"]=$this->spaw->getHtml();
    $data["modif_gal_form"]=$this->load->view(‘modif_gal_form_view’,$data,true); // formulaire modif galerie dans $data
    $config=array();

    $config = array(
    ‘name’ => ‘textegaln’,
    ‘caption’ => ‘texte galerie new’,
    ‘content’ => “”
    );
    $this->load->library(‘spaw’, $config);
    $data["contenu"]=$this->spaw->getHtml();
    $data["new_gal_form"]=$this->load->view(‘new_gal_form_view’,$data,true); // formulaire nouvelle galerie dans $data

    $data["upload_form"]=$this->load->view(‘upload_form_view’,$data,true); // formulaire d’identification dans $data

  7. Hi sheldon,

    thanks for that nice ci library.
    Could you help me to solve that problem:
    with 2 instances the first one is not editable and the second one shows the content of the first one.
    It looks like an extend problem.
    (note : everything ok with tabs but i need distinct object).
    thank you in advance for your help

    Francis

  8. Sheldon says:

    Hi Francis,

    can you email me your code ? and possible a link – sheldon@lendrum.co.nz

  9. Sheldon says:

    Hi Francis,

    I see what your trying to do, but SPAW itself wont allow you to have multiple instances in the same page, this is due to the Javascript.
    You should try with multiple tab’s or dare I say it, an iFrame.

  10. thank you for your quick answer. I will go to the iframe solution as this is for a back office purpose.

  11. Costa says:

    Hi Sheldon,

    big thanks for the spaw-mod, it really works nicely.I just got difficulties getting two small things solved, i hope you dont mind me asking, but maybe you got an idea?

    First one: if i add a tab, the added one is visually displayed as active (just the tab button, editor content correctly corresponds to default tab).
    So if i want to edit tab2, i first have to click on tab1 (default) to be able to click tab2 (and get tabs2 content displayed).

    Second thing is:
    my tabs content get prefilled with an line break although there is no content. is there any way to prevent this?

    I would be glad if you got any idea. Keep up the cool work & have a good time!

    Regards
    Costa

  12. Sheldon says:

    Hi and thanks,

    I have no idea why the gets inserted, but am going to be figuring that out soon for more than one reason.

    As with selecting the tab, that is something I need to look at in the Javascript, and will release a fix soon.
    Subscribe to my feed for future updates

    Thanks