Question

我正在尝试设置我正在使用的ckeditor的高度。这是我现在拥有的：

      $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以允许输入信息以特定方式格式化）这是很长的（我假设的默认高度）但它只是一些输入到框中的行，因此我希望它变小，因为它占用了页面上太多的空间。

提前致谢

伊恩

Answer 1

我使用ZendX_JQuery_View_Helper_UiWidget创建了一个表单元素和一个帮助器来创建一个带有jQuery适配器的CKEditor。这是两个文件的代码：

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表单元素：
* libraries/ZendExt/Form/Element/类ZendExt_Form_Element_CKEditor * libraries/ZendExt/View/Helper/类ZendExt_View_Helper_FormCKEditor 并在配置文件中添加了ZendExt命名空间（或者如果您已经拥有自己的库并希望使用它，只需将两个文件放入其中并更改类的名称以反映您的名称）。然后，你将有一个电话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 /下的公共目录中，或者在帮助程序中相应地更改路径。

Answer 2

您需要在创建编辑器时指定编辑器的尺寸（即，在Javascript部分中）。 CKEditor使用自己的代码替换原始表单元素，因此您的维度更改将丢失。

例如，如果使用jQuery接口创建它，它将类似于以下内容：

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

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

希望有帮助...

从zend形式改变ckeditor的高度

2 个答案: