Zend Framework with JavaScript libraries

StackOverflow https://stackoverflow.com/questions/11117003

题

I have been working with Zend Framework for a few months now. I have so far been succesfully using some view helpers, action helpers and partials. Now i have come across some javascript libraries i want to use in my project such as TinyMCE and others.

My question is, what is the best way to implement these in a Zend Project? Preferably i would like to be able to add or enable these javascript libraries on a view level. So for example when i go to my addSomething.phtml wich contains a zend_form, one of my text area's becomes a TinyMCE editor field. However i do not want this on all my forms or even all my text area elements.

So what is the best way to implement and then approach these libraries under ZF 1.11.11?

Thanks in advance for any advice given :)

有帮助吗？

解决方案

You can use a view helper to load javascript and css files on a per controller/view basis. This is something I have experimented with and I find it quite helpful, although I haven't taken the step of putting it into a live project yet, I'm still assessing it.

Here is the devzone article I got the idea from. All credit to Andy Baird for posting the technique.

Basically you setup two view helpers, one for javascript:-

class Zend_View_Helper_JavascriptHelper extends Zend_View_Helper_Abstract
{   
    function javascriptHelper() {
        $request = Zend_Controller_Front::getInstance()->getRequest();
        $file_uri = 'media/js/' . $request->getControllerName() . '/' . $request->getActionName() . '.js';

        if (file_exists($file_uri)) {
            $this->view->headScript()->appendFile('/' . $file_uri);
        }
    }
}

and one for css:-

class Zend_View_Helper_CssHelper extends Zend_View_Helper_Abstract 
{ 
    function cssHelper() { 
        $request = Zend_Controller_Front::getInstance()->getRequest(); 
        $file_uri = 'media/css/' . $request->getControllerName() . '/' . $request->getActionName() . '.css'; 

        if (file_exists($file_uri)) { 
            $this->view->headLink()->appendStylesheet('/' . $file_uri); 
        } 

        return $this->view->headLink(); 

    } 
}

Then you call them from your layout script:-

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>My app title</title> 
    <? $this->headLink()->appendStylesheet('/media/css/global.css') ?> 
    <? $this->headLink()->appendStylesheet('/media/css/iefix.css','screen','lt IE 7') ?>     
    <?= $this->cssHelper() ?>    
    <? $this->headScript()->appendFile('/media/js/jquery-1.3.2.min.js') ?> 
    <? $this->headScript()->appendFile('/media/js/global.js') ?> 

    <? $this->javascriptHelper() ?> 
    <?= $this->headScript() ?> 
</head>

You then store your javascript and css files in folders that reflect the name of the action they are used with, for example:-

media/js/index/index.js
media/css/index/index.css

to load css and javascript for you index action.

In practice I have found it preferable to put javascript and css in the same folder, so I miss out the js & css parts of the paths above and adjust the $file_url variable in both helpers accordingly.

其他提示

To add JS files at a view level, I usually use the inlineScript() view helper.

So, to add TinyMCE to a given field of your form in a given view, you might write something like the following:

$this->inlineScript()->appendFile(
    $this->baseUrl('js/yourTinyMCEScript.js'),
    'text/javascript', array('charset' => 'UTF-8')
);

and then, at the end of the view (or in the layout), 

echo $this->inlineScript();

Like that, you'll be able to activate TinyMCE only for certain fields of certain forms.

Hope that helps,

I prefer ckeditor

This my solution:

Download ckeditor library and copy files into /public/scripts/ckeditor/

application.ini

; load jquery from google cdn with jquery ui
resources.jquery.version    = 1.7
resources.jquery.ui_enable  = true
resources.jquery.ui_version = 1.8
resources.jquery.stylesheets[] = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css"

form.php

/** @var $jq ZendX_JQuery_View_Helper_JQuery_Container */
$jq = $this->getView()->jQuery();

// Add Library CKEditor
$jq->addJavascriptFile('/scripts/ckeditor/ckeditor.js');
$jq->addJavascriptFile('/scripts/ckeditor/adapters/jquery.js');
$jq->addOnload("$('#text').ckeditor();");

//textarea
$this->addElement('textarea', 'text', array('label' => 'Testo', 'required' => true));

In the file /public/scripts/ckeditor/config.js you can set your favorite tools in WYSIWYG.

If you must use tinymce read here

I think the best approach is to extends zend_form_textarea and then create decaorator and view helper.

You could also write only decorator & viewhelper, but for me first option is cleaner because you avoid inject decorator each time when you creates form element.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top