Thu, 09/17/2009 - 11:31

Add WYSIWYG ckeditor to Zend_Textarea element of Zend_Form

Adding a WYSIWYG editor to Zend_Textarea element of zend framework . I don't know whether this is the right way to this . Anyway I would love to share the piece of code to you . I am using the ckeditor the opensource WYSIWYG editor which was previously called fckeditor. I love the new look of it than the tiny mce . So switched to it .

Extract the files of ckeditor and upload to public folder . I am keeping this in the /js/ckeditor .

Add the below piece of code to the layout . As we dont need to load the js of the ckeditor every time we can add a flag.

<?php 
    if ( $this->ckeditor ) { 
        echo $this->headScript()->appendFile( $this->baseUrl().'/js/ckeditor/ckeditor.js');
     }
?>

Now you need a helper . Keep the below code in /application/views/helpers/SetupEditor.php .

<?php
class Zend_View_Helper_SetupEditor {

    function setupEditor( $textareaId ) {
        return "<script type=\"text/javascript\">
    CKEDITOR.replace( '". $textareaId ."' );
        </script>";
    }
}
?>

I have used a baseUrl helper also . So if you are new I am keeping it for those .

<?php
class Zend_View_Helper_BaseUrl {
    function baseUrl() {
        $fc = Zend_Controller_Front::getInstance();
        return $fc->getBaseUrl();
    }
}
?>

Now you can include the small piece of code in the view script where you are printing the form . For this eg: I am using the application/views/scripts/index/edit.phtml

<?php
    $this->ckeditor = 'ckeditor'; //To tell the layout ckeditor must be loaded . 
?>
<h2>Edit Post</h2>
<div><?php echo $this->postForm; ?></div>
<!-- Description is the id of the textarea -->
<?php echo $this->setupEditor( 'Description' ); ?>

You must know the name of the id of the textarea to pass to the setupEditor . I have used the name Description when creating the textarea element . You must have atleast tried the Zend framework quickstart to understand how it works . I hope I have not missed any .

Anonymous's picture

One of the simpliest and efficient way of implementing it I've seen so far.

Submitted by franckbenoit (not verified) on Fri, 09/18/2009 - 11:37.

hari's picture

Thanks franckbenoit for your kind words .

Submitted by hari on Fri, 09/18/2009 - 11:56.

Anonymous's picture

Clean and simple. Very nice.

Submitted by c_girl (not verified) on Tue, 10/06/2009 - 22:50.

Anonymous's picture

I like the simplicity of this solution, but I didn't like having to manually add the js in the headscript.
I added:

public function setView(Zend_View_Interface $view){

$this->view = $view;

}

and then included the js in the setupEditor method

echo $this->view->headScript()->appendFile( $this->baseUrl().'/js/ckeditor/ckeditor.js');

Now there is only a single line of code in my views, and nothing in my layout.Very nice.

Again, thankyou.

Submitted by c_girl (not verified) on Sat, 11/21/2009 - 00:01.

hari's picture

I don't think your method of doing is correct . Let me say why .
When you add this code in setupEditor()

echo $this->view->headScript()->appendFile( $this->baseUrl().'/js/ckeditor/ckeditor.js');

ie in the below code

function setupEditor( $textareaId ) {
return "
CKEDITOR.replace( '". $textareaId ."' );
";
}

When there is only one text area your solution may be good .
But think when there are two or three or n-number of text area . This js will be printed each time the call to setupEditor. Which is an unwanted call and which makes a lot of additional load without any use. Sometimes may come with a bug too :) .

I think I am right . Did you get me ?

I have not tested it , but you may be able to do this in another way. Add another method to print the js in the view . Call it on the start of view .

Submitted by hari on Sat, 11/21/2009 - 03:24.

Anonymous's picture

hi

first, this is great. can you write about how to use the image upload options? and how to add or remove tool bars?

best regards

ron

Submitted by ron (not verified) on Sun, 10/25/2009 - 14:57.

hari's picture

If you can tell me something more I will try to work on it .
What I recognised from the question is you need a form to upload image right ?

Submitted by hari on Sat, 12/12/2009 - 10:56.

Anonymous's picture

I did it like this:

A form element like the Textarea element in the framework:

class MyLibrary_Form_Element_Wysiwyg extends Zend_Form_Element_Xhtml
{
/**
* Use formWysiwyg view helper by default
* @var string
*/
public $helper = 'formWysiwyg';
}

and a view helper, subclassing the Zend_View_Helper_FormTextarea:

class Zend_View_Helper_FormWysiwyg extends Zend_View_Helper_FormTextarea
{
/**
* How many instances of the wysiwyg editor is set in the form
*
* @var int
*/
static $instances = 0;

/**
* Generates a 'wysiwyg' textarea element.
*
* @access public
*
* @param string|array $name If a string, the element name. If an
* array, all other parameters are ignored, and the array elements
* are extracted in place of added parameters.
*
* @param mixed $value The element value.
*
* @param array $attribs Attributes for the element tag.
*
* @return string The element XHTML.
*/
public function formWysiwyg($name, $value = null, $attribs = null)
{
$info = $this->_getInfo($name, $value, $attribs);
extract($info); // name, value, attribs, options, listsep, disable

$xhtml = $this->formTextarea($name, $value, $attribs);
$xhtml .= '
CKEDITOR.replace( "'. $this->view->escape($id) .'" );
';
$this->instances += 1;
if ($this->instances == 1) {
$this->view->headScript()->appendFile( $this->view->baseUrl().'/js/ckeditor/ckeditor.js');
}
return $xhtml;
}
}

Submitted by Jan Keller Catalan (not verified) on Thu, 12/10/2009 - 03:33.

hari's picture

Thanks for sharing . I didn't get enough time to try out your trick .
I hope some one can try out this too .

Have a great day.

Submitted by hari on Sat, 12/12/2009 - 11:00.

Anonymous's picture

hi can you please give me full integration with zend framework with ckeditor..
with example is good prefered

Submitted by Mehul (not verified) on Fri, 12/25/2009 - 14:14.

hari's picture

Yes I do have a full integration of ckeditor with zend framework. Checkout the link below which uses ckeditor for textarea field, to add new posts and edit.
http://harikt.com/content/simple-blog-using-zend-framework-19

Submitted by hari on Fri, 12/25/2009 - 23:58.

Anonymous's picture

in the last part
$this->ckeditor = 'ckeditor'; //To tell the layout ckeditor must be loaded

should be

$this->layout()->ckeditor = ckeditor;

and in layout.phtml

$this->layout()->ckeditor

shd be used.

how will you make this work with zend_form can post an tutorial for that too??

Thanks in Adance.

Submitted by Anonymous (not verified) on Thu, 12/10/2009 - 16:10.

Anonymous's picture

Thanks a lot for this useful post, the code is great, thanks for share with us, because all of us are not than skilful and this kind of help is always welcomed.

Submitted by Sperma (not verified) on Thu, 12/10/2009 - 22:47.

Anonymous's picture

ótima dica realmente me surpreendeu a praticidade de integrar o ckeditor com zend framework Parabéns!

Submitted by Jonathas Zeferino (not verified) on Thu, 01/07/2010 - 16:21.

Anonymous's picture

I changed some, and only what we need it's only create view helper (and download ckeditor):


class Zend_View_Helper_SetupEditor extends Zend_View_Helper_Abstract{

function setupEditor($textareaId) {
$ctrl = Zend_Controller_Front::getInstance();
$this->view->headScript()->appendFile( $ctrl->getBaseUrl().'/js/ckeditor/ckeditor.js');

return '
CKEDITOR.replace( "'. $textareaId .'" );
';
}
}

Submitted by matlas (not verified) on Mon, 01/11/2010 - 00:54.

hari's picture

First of all Thanks for the all the comments.
Have you tested with more than one textarea ? Does this js adds only once?
As I am not working on zend framework now a days, so didn't get enough time to explore more.

Submitted by hari on Mon, 01/11/2010 - 10:52.

Anonymous's picture

Yes but i made more changes, good helper (and load once js library) is:


<?php
class Zend_View_Helper_SetupEditor extends Zend_View_Helper_Abstract{

function setupEditor($textareaIdArray) {
$ctrl = Zend_Controller_Front::getInstance();
$this->view->headScript()->appendFile( $ctrl->getBaseUrl().'/js/ckeditor/ckeditor.js');

$script = '';
foreach($textareaIdArray as $textareaId)
$script .= 'CKEDITOR.replace("' . $textareaId . '");';

return $script . '';
}
}

so in view, you can use:

<?= $this->setupEditor(array('name1','name2')); ?>

but i have one problem, how add in zend framework to CKeditor, CKFinder http://ckfinder.com/ ?

Submitted by matlas (not verified) on Wed, 01/13/2010 - 05:45.

Anonymous's picture

hi do you know how now to add ckfinder to zend?

Submitted by Anonymous (not verified) on Wed, 03/10/2010 - 20:52.

hari's picture

I am not sure what's the trouble you guys are having integrating with Zend framework .
Let me know if you are not able to do so . I will write a post soon about it if needed .

Submitted by hari on Wed, 03/10/2010 - 21:04.

Anonymous's picture

Yes we will by very gratefull

Submitted by Anonymous (not verified) on Thu, 03/11/2010 - 13:59.

hari's picture

Sure I will make it for you . But don't expect it today or tomorrow . Little busy with some of the reviewing and all.
But you can see it soon .

Submitted by hari on Thu, 03/11/2010 - 21:00.

Anonymous's picture

I wrote simple viewer helper with second arg that allow me to set a type of toolbar:

function setupEditor( $field, $toolbar )
{
return 'window.onload = function() { CKEDITOR.replace( "'.$field.'", { toolbar : "'.$toolbar.'" } ); }; ';
}

Submitted by Przemek Nowicki (not verified) on Tue, 02/09/2010 - 18:42.

Anonymous's picture

I read carefully this thread.
Really interesting !

In fact, a better implementation should contain 3 elements :
- a form element
- a view helper
- a decorator

adding javascript isn't a job for the helper ! A decorator can do it fine and using options on the decorator makes you able to give parameters to CKEDITOR.replace !

Submitted by openbsdiste (not verified) on Tue, 02/23/2010 - 04:01.

Anonymous's picture

thank about your post,
how do i customize toolbar option?

Submitted by ulduz (not verified) on Fri, 02/26/2010 - 11:08.

Anonymous's picture

This is a great solution but there is a better way to do it. I might be wrong please correct me if I am wrong. This CKEditor editor is mostly needed by the administration side of the project. So instead of runing it in the view, we can run it directly inside the admin layout. This works very good for me...

Let create a text area with Zend Form

class Application_Form_BugReportForm extends Zend_Form {

public function init(){

$description = $this->createElement('textarea', 'description');
$description->setLabel('Issue description:');
$description->setRequired(true);
$this->addElement($description);
}
}

And then call it in admin layout.

window.onload = function()
{
CKEDITOR.replace( 'description' );
};


Thats it.

Cheers

Submitted by Erdal YAZICIOGLU (not verified) on Sat, 06/12/2010 - 17:26.

hari's picture

You are not wrong . You can also do like that . What I want to is just load the js only when I am using the ckeditor, else why I need to send this whole stuff and loose my bandwidth. The other one,

window.onload = function() { CKEDITOR.replace( 'description' ); };

Good it will load the description . What will you do when you want to load the ckeditor in more than one place in the same page ?
You want to go and edit the layout right ? So I opted for this , although this is a small stuff I tried for learning , I thought for sometime to make it :) .
Also Thanks for your comments and I never say this is the only way you can do . There many techniques other than this :).

Submitted by hari on Sat, 06/12/2010 - 22:43.

Anonymous's picture

I am newbie here and like you post. I have try your method but when i try to edit existing post, my form replace the content and I have to type it again. Please advice me how to solve my problem

Submitted by Jabangtutuka (not verified) on Tue, 07/06/2010 - 07:19.

Anonymous's picture

class Ckeditor_Form_Decorator_Ckeditor extends Zend_Form_Decorator_Abstract implements Zend_Form_Decorator_Interface
{
/**
* @var Ckeditor_Ckeditor
*/
protected $_editor;
/**
* @param Zend_Form_Element
* @return Ckeditor_FOrm_Decorator_Ckeditor
*/
public function setElement( $element )
{
if( !$element instanceof Zend_Form_Element_Textarea )
{
throw new Zend_Form_Decorator_Exception( 'Invalid type passed into decorator must be of type Zend_Form_Element_Textarea' );
}
$this->_element = $element;
return $this;
}

/**
* @return Ckeditor_Ckeditor
*/
public function getEditor()
{
if( !$this->_editor instanceof Ckeditor_Ckeditor )
{
$editor = new Ckeditor_Ckeditor();
$this->setEditor( $editor );
$this->_editor->basePath= $this->getOption('basePath');
}
return $this->_editor;
}

/**
* @param Ckeditor_Ckeditor
* @return Ckeditor_Form_Decorator_Ckeditor
*/
public function setEditor( Ckeditor_Ckeditor $editor)
{
$this->_editor = $editor;
return $this;
}

public function render( $content )
{

$this->getEditor()->returnOutput = true;
$js = $this->getEditor()->replace($this->getElement()->getName(), $this->getOption('config'), $this->getOption('events') );
return $content. $js;

}

}

I have CKEditor implemented using Zend_Form_Decorators

And using the CKEditor class with comes with CKEditor him self But I renamed it to Ckeditor_Ckeditor.

Submitted by Adri Korpershoek (not verified) on Tue, 07/13/2010 - 16:02.

Post new comment

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account, used to display your avatar.
Powered by Drupal, an open source content management system