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 .

Comments

One of the simpliest and

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

Thanks

Thanks franckbenoit for your kind words .

agreed :)

Clean and simple. Very nice.

I've added something

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.

Thank you for sharing your code , but

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 .

thanks

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

You mean uploading image using Zend_Form ?

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 ?

Solution to multiple elements

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;
}
}

Thank you Jan Keller Catalan

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.

hi can you please give me

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

complete example of ckeditor

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

A little mistake & request.

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.

Thanks a lot for this useful

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.

Parabens

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

I changed some, and only what

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 .'" );
';
}
}

Does the js only loads once ?

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.

Yes but i made more changes,

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

hi do you know how now to add

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

What's the trouble integrating ckfinder ?

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 .

Yes we will by very gratefull

Sure I will make it for you

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 .

Great job

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.'" } ); }; '; }

better implementation

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 !

thank about your post, how do

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

Why bother this much?

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

You are not wrong . You can

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 :).

I am newbie here and like you

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

class

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.

Multi ckeditor

thanks for your brilliant post :)

I want to add multi ckeditor on a single page. How can I do that?

Also I want to remove some fields from the ckeditor like form block? Any idea for doing this.

Thanks,
Lalit

Have not looked for a while ,

Have not looked for a while , but some suggestions . So you can try it out .

In the view try to pass the values as comma separated ones .If it didn't worked out , change the function setupEditor( $textareaId ) to get an array and make the necessary changes in the function .

It will work .

Hi, I am using your code to

Hi,

I am using your code to integrate CKEditor in a web site.
Many thanks. It works fine.
But now i have tried a few modifications to it in order to integrate CKFinder. Unfortunately nothing happens, that is, I don't get the Browse Server button at all.
Did you get round to making CKFinder work within your code?
Be most grateful if you could help.
Regards,

very good information

Very simple and effective coding given by you.nice to read and analysis of the program is given.

Save in database

The implementation of the editor is working well, but now I want to save the coded text into my database. But I guess I've got to much security on zend to add all the html tags as well. Cause it's saving just the text, is there a solution to save the code into a database? Or are there a few things a certainly may not add in the form or in the controller when i get the value of the textarea?