Yii引入Ueditor編輯器

Ueditor是百度開發出來的富文本編輯器,平時也比較喜歡用這個,感覺比國外的CKEditor,FCKEditor樣式看起來好多了。Yii中引入ueditor有很多種方法,Yii中也有專門的擴展供使用,下面說下我是怎麼使用的。

1.Ueditor Download(下載地址:http://ueditor.baidu.com/build/build_down.php?t=1_2_1_0-utf8-php),下載後解壓到對應的項目的根目錄下,比如項目是admin,那麼就將ueditor解壓到admin/ueditor


2.Ueditor extension download,下載ueditor擴展,這是Yii引入ueditor所需要的,下載地址:http://www.yiiframework.com/extension/ueditor-extension-for-yii/files/UEditor-with-default-config.zip

下載完成後解壓到Yii的protected/extension下面,即解壓後的路徑爲admin/protected/extension/ueditor


3.視圖中引入:

<?php $this->widget('ext.ueditor.UEditor',
            array(
                'id'=>'editor',
                'model'=>$content,
                'attribute'=>'content',
                'UEDITOR_CONFIG'=>array(
                    'UEDITOR_HOME_URL'=>Yii::app()->baseUrl.'/ueditor/', //ueditor的路徑
                    'p_w_picpathUrl'=>Yii::app()->baseUrl.'/ueditor/php/p_w_picpathUp.php', //上傳的圖片提交給的處理程序路徑
                    'p_w_picpathPath'=>Yii::app()->baseUrl.'/ueditor/php/', //上傳圖片保存路徑
                    'emotionLocalization'=>true,
                    'pageBreakTag'=>'[page]',
                    'width'=>'800px',
                    'height'=>'400px',
                    'initialContent'=>'',
                    'toolbars'=>array( //這裏是自定義工具條
                        array(
                            'fontfamily', 'fontsize', 'forecolor', 'backcolor','|',
                'directionalityltr', 'directionalityrtl', '|', '', 'indent', '|',
                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
                            'fullscreen', 'source', '|', 'undo', 'redo', '|',
                             'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch','autotypeset', '|',
                      'blockquote', '|', 'pasteplain', '|', 'insertorderedlist', 'insertunorderedlist','selectall', 'cleardoc', '|', 'customstyle',
                'paragraph', '|','rowspacingtop', 'rowspacingbottom','lineheight', '|',
                'link', 'unlink', 'anchor', '|', 'p_w_picpathnone', 'p_w_picpathleft', 'p_w_picpathright',
                'p_w_picpathcenter', '|', 'insertp_w_picpath', 'emotion', 'insertvideo', 'p_w_upload',),
                    ),
                                     
                                   
))); ?>

注:有時候一個頁面需要引入多個ueditor,這樣的話只需要修改對應的id就行了。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章