Изменение высоты ckeditor из формы Zend - PullRequest
Новая
       12

Изменение высоты ckeditor из формы Zend

1 голос
/ 08 сентября 2011

Я пытаюсь установить высоту используемого кедитора. Вот что у меня сейчас есть: 

      $this->addElement('textarea', 'text_field', array(
        'filters'    => array('StringTrim'),
        'validators' => array(
            array('StringLength', true, array(0, 3000)),
        ),
        'decorators' => array('ViewHelper'),
        'required'   => false,
        'attribs'    => array('class' => 'ckeditor'),
        'label'      => 'Please enter text below',
        'value'      => isset($this->_text_data[0]['text']) ? $this->_text_data[0]['text'] : ''
    ));

Это происходит из моей формы, затем вызывается в моем .phtml-файле следующим образом: 

<?=$this->element->getElement('text_field')?>

Я посмотрел везде и попытался добавить: 

'height' => '100px',

и 

'config' => array(
          'toolbar' =>  'Full',     
          'width'   =>  '550px',    
          'height'  =>  '100px',
 ),

Но ни один из них не сработал. Основная причина, по которой мне это нужно, заключается в том, что у меня есть текстовая область (использующая ckeditor для того, чтобы разрешить форматирование входной информации определенным образом), которая довольно длинная (высота по умолчанию, я предполагаю), но это всего несколько строки вводятся в поле, поэтому я хочу, чтобы он был меньше, поскольку он занимает слишком много места на странице.

Заранее спасибо

Иэн

Ответы [ 2 ]

1 голос
/ 09 сентября 2011

Я создал элемент формы и помощник, используя ZendX_JQuery_View_Helper_UiWidget для создания CKEditor с адаптером jQuery. Вот код обоих файлов:

ZendExt_Form_Element_CKEditor: 

class ZendExt_Form_Element_CKEditor extends ZendX_JQuery_Form_Element_UiWidget
{
    /**
     * Use formCKeditor view helper by default
     * @var string
     */
    public $helper = 'formCKEditor';

    /**
     * Default ckeditor options
     *
     * @var array
     */
    public $jQueryParams = array(
        'toolbar' => 'Basic'
    );
}

И ZendExt_View_Helper_FormCKEditor: 

class ZendExt_View_Helper_FormCKEditor extends ZendX_JQuery_View_Helper_UiWidget
{
    static $set = false;

    public function formCKEditor($name, $value = null, $params = null, $attribs = null)
    {
        $hTextA = new Zend_View_Helper_FormTextarea();
        $hTextA -> setView($this -> view);
        $xhtml = $hTextA -> formTextarea($name, $value, $attribs);
        $xhtml .= '<script type="text/javascript">$(document).ready(function(){$("#' . $this->_normalizeId($name) . '").ckeditor(' . (!is_null($params) ? 'function(){},' . Zend_Json_Encoder::encode($params) : '') . ')});</script>';
        if (self::$set == false) {
            $this -> view -> headScript() -> appendFile($this -> view -> baseUrl() . '/js/ckeditor/ckeditor.js');
            $this -> view -> headScript() -> appendFile($this -> view -> baseUrl() . '/js/ckeditor/adapters/jquery.js');
            self::$set = true;
        }
        return $xhtml;
    }
}

Вы можете использовать его как любой другой элемент формы ZF после того, как скопировали эти 2 файла в:
* libraries/ZendExt/Form/Element/ для ZendExt_Form_Element_CKEditor класс
* libraries/ZendExt/View/Helper/ для ZendExt_View_Helper_FormCKEditor класс
и добавил пространство имен ZendExt в файл конфигурации (или, если у вас уже есть библиотека, и вы хотите ее использовать, просто поместите в нее оба файла и измените имя классов, чтобы оно соответствовало вашему). Затем вы получите tel ZF, что ZendExt/View/Helper - это каталог для поиска помощников вида (в конфигурационном файле .ini он будет выглядеть так: resources.view.helperPath.ZendExt_View_Helper = "ZendExt/View/Helper").

Затем в своем коде просто позвоните $ckEditor = new ZendExt_Form_Element_CKEditor();, чтобы создать новый CKEditor. Затем вы можете добавить все необходимые параметры к элементу, используя $ckEditor -> setJQueryParam($key, $value);, как указано в документации здесь: http://framework.zend.com/manual/fr/zendx.jquery.html. Например: $ckEditor -> setJQueryParam('height', '100px');. Я понимаю, что это не компонент jQuery, но это был самый простой способ сделать это, поскольку там есть все необходимое.

Чтобы отобразить его, просто наберите <?=$this -> ckEditor?>, и все хорошо.

Убедитесь, что вы поместили ckeditor.js и adapters/jquery.js в ваш публичный каталог в / js / ckeditor / или измените путь в помощнике соответственно.

0 голосов
/ 08 сентября 2011

Вам нужно будет указать размеры редактора при его создании (т. Е. В части Javascript). CKEditor заменяет исходный элемент формы собственным кодом, поэтому ваши изменения в размерах будут потеряны.

Например, если вы создадите его с помощью интерфейса jQuery, это будет примерно так: 

var config = {
    width: '550px',
    height: '100px'
};

// Initialize the editor.
$('.jquery_ckeditor').ckeditor(config);

Надеюсь, это поможет ...

...