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 .
- php /
- zendframework /
- Zend_Form /
- Zend_Textarea /
One of the simpliest and efficient way of implementing it I've seen so far.
Thanks franckbenoit for your kind words .
Clean and simple. Very nice.
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.
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 .
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
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 ?
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;
}
}
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 full integration with zend framework with ckeditor..
with example is good prefered
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
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 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.
ótima dica realmente me surpreendeu a praticidade de integrar o ckeditor com zend framework Parabéns!
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 .'" );
';
}
}
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, 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/ ?
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.'" } ); }; ';
}
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 i customize toolbar option?
Post new comment