Yii Framework eXtension: KEditor-a visual editor that perfectly integrates the Yii Framework and KindEditor

Yii Framework eXtension: KEditor-a visual editor that perfectly integrates the Yii Framework and KindEditor

I have been using the Yii Framework as a content collection and distribution platform in my spare time recently. this naturally involves collecting and publishing articles. Generally, the collection software is an all-in-one solution from collection to release, however, since I have used it myself, sometimes I still need to ensure the quality of the article. therefore, between collection and publishing, I want to create an intermediate layer to optimize and process the content of the article, the visual editor is used to edit the article content. the popular visual editors in foreign countries mainly include CKEditor and TinyMCE (wordpress uses this editor ), however, they have a disadvantage that they are charged for image Upload processing and browsing. Therefore, if they are switched to China, KindEditor and Baidu editor UEditor will be used in China, I have used Baidu editor before (refer to Baidu editor integration Yii Framework). This time I am going to play KindEditor. it is acceptable to integrate it according to the document (see the kindeditor editor usage), but the scalability is poor, it is better to write an extension directly based on KindEditor.

In the Yii Framework, it is relatively simple to write an extension. The following describes how to write and use the extension:

1. download kindeditor (: http://pan.baidu.com/s/1pJsIth5) and unzip it to the protected/extensions directory of the Yii Framework, for example, my path is protected/extensions/kindeditor.

2. create a php class file KEditorWidget. php in the kindeditor Directory. the content is as follows:

 Widget ('ext. kindeditor. KEditorWidget ', array (* 'id' => 'item _ content', # Textarea id *);?> */Class KEditorWidget extends CInputWidget {public $ id; public $ language = 'zh _ cn'; public $ paramOptions = '{}';/*** initialize the component. */public function init () {// prevents execution from the command line. if (Yii: app () instanceof CConsoleApplication) return;/** @ var CClientScript $ cs */$ cs = Yii: app ()-> getClientScript (); $ cs-> registerScriptFile ($ this-> assetsUrl. '/kindeditor-min.js', CClientScript: POS_HEAD);}/*** run the component. */publi C function run () {$ script = "KindEditor. ready (function (K) {window. editor = K. create ('#". $ this-> id. "',". $ this-> paramOptions. ");});";/** @ var CClientScript $ cs */$ cs = Yii: app ()-> getClientScript (); $ cs-> registerScript ($ this-> id, $ script, CClientScript: POS_HEAD); $ cs-> registerScriptFile ($ this-> assetsUrl. '/lang /'. $ this-> language. '. JS', CClientScript: POS_HEAD);} public function getAssetsUrl () {$ SetsPath = Yii: getPathOfAlias ('ext. kindeditor '); $ assetsUrl = Yii: app ()-> assetManager-> publish ($ assetsPath, false,-1, YII_DEBUG); return $ assetsUrl; }}?>

3. use this component to display the kindeditor editor interface in the _ form. php file, which is also relatively simple:

1) simple call:

    
 labelEx($model,'content'); ?>    
 textArea($model,'content',array('rows'=>6, 'cols'=>50)); ?>    
 error($model,'content'); ?>
 widget('ext.kindeditor.KEditorWidget',array('id'=>'Post_content'))?>

2) advanced call (set editor parameters). sometimes we want more custom options, such as height, width, and toolbar options to be displayed:

    
 labelEx($model,'content'); ?>    
 textArea($model,'content',array('rows'=>6, 'cols'=>50)); ?>    
 error($model,'content'); ?>
 widget('ext.kindeditor.KEditorWidget',array('id'=>'Post_content','paramOptions'=>'{    width:"700px",    height:"300px",}'))?>

For more editor settings, refer to this article: KindEditor getting started (2) -- Editor initialization parameters

The editor page is displayed as follows:

Finally, the extended http://pan.baidu.com/s/1kTwUmGZ of KEditor is given.

If you have any questions, please share them with me in the following comments.

Note: the integrated KindEditor version is 4.1.10.