1. Overview
2. Requirements
3. Current Version
4. What's included?
5. Changes
6. Usage
7. Resources

Overview ¶

KindEditor is an open-source HTML editor, developers can replace the traditional multi-line text input box (textarea) with the visualization of richtext entry box through KindEditor.

Requirements ¶

Yii 1.1 or above

This extension have to be installed into: ~~~ WebRoot/WebApp/proected/extensions/kindeditor ~~~

Make a directory named attached to put your upload files: ~~~ WebRoot/WebApp/attached ~~~

Current Version ¶

v0.0.4

What's included? ¶

kindeditor/
   KindEditorWidget.php
   assets/
      kindeditor.js
      kindeditor-min.js
      lang/
         en.js
         zh_CN.js
      php/
         file_manager_json.php
         JSON.php
         upload_json.php
      plugins/
         ...
         anchor/
         filemanager/
         ...
      themes/
         common/
         default/
         simple/

Changes ¶

Sep 10, 2012

• Release 0.0.4
  • Fixed Language issue, details.
  • Added ar.js, zh_TW.js.

Aug 10, 2012

• Release 0.0.3
  • Repaired the compressed files, upload a new zip file.

Aug 8, 2012

• Release 0.0.3
  • Added en.js, supported English Language.

Aug 8, 2012

• Release 0.0.2
  • Added file_manager_json.php, JSON.php, upload_json.php, supported upload single or multiple image(jpg, png) and compressed file(zip, rar).

Usage ¶

How to use ¶

Before code

<div class="form">
<?php $form=$this->beginWidget('CActiveForm', array(
	'id'=>'post-form',
)); ?>
	...
	<div class="row">
		<?php echo $form->labelEx($model,'content'); ?>
		<?php echo $form->textArea($model,'content',array('rows'=>6, 'cols'=>50)); ?>
		<?php echo $form->error($model,'content'); ?>
	</div>
	...
	<div class="row buttons">
		<?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save'); ?>
	</div>
<?php $this->endWidget(); ?>
</div><!-- form -->

After code

// Add anywhere in this page(Example:<Yii-Application>/proected/views/post/_form.php)
<?php $this->widget('ext.kindeditor.KindEditorWidget',array(
	'id'=>'Post_content',	//Textarea id
	// Additional Parameters (Check http://www.kindsoft.net/docs/option.html)
	'items' => array(
		'width'=>'700px',
		'height'=>'300px',
		'themeType'=>'simple',
		'allowImageUpload'=>true,
		'allowFileManager'=>true,
		'items'=>array(
			'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic',
			'underline', 'removeformat', '|', 'justifyleft', 'justifycenter',
			'justifyright', 'insertorderedlist','insertunorderedlist', '|',
			'emoticons', 'image', 'link',),
	),
)); ?>

<div class="form">
<?php $form=$this->beginWidget('CActiveForm', array(
	'id'=>'post-form',
)); ?>
	...
	<div class="row">
		<?php echo $form->labelEx($model,'content'); ?>
		<?php echo $form->textArea($model,'content',array('visibility'=>'hidden')); ?>
		<?php echo $form->error($model,'content'); ?>
	</div>
	...
	<div class="row buttons">
		<?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save'); ?>
	</div>
<?php $this->endWidget(); ?>
</div><!-- form -->

Make your own Language file ¶

You can write a js file under the folder /assets/lang/ named [langType].js reference on en.js, remeber to change at the end of your new language file the id for the new language, then passed two parameters called langType and language to the editor widget, like this:

.js file ~~~ [javascript] KindEditor.lang({

source : 'Source',
preview : 'Preview',
undo : 'Undo(Ctrl+Z)',
redo : 'Redo(Ctrl+Y)',
uploadError : 'Upload Error',
'plainpaste.comment' : 'Use keyboard shortcut(Ctrl+V) to paste the text into the window.',

}, 'your langType filename'); // example:en ~~~

.php file

<?php $this->widget('ext.kindeditor.KindEditorWidget',array(
    'id'=>'Post_content',   //Textarea id
    'language'=>'your langType filename', // example: en (REGISTER SCRIPT FILE)
    // Additional Parameters (Check http://www.kindsoft.net/docs/option.html)
    'items' => array(
        'langType'=>'your langType filename', // example: en  (INVOKE)
        'width'=>'700px',
        'height'=>'300px',
        'themeType'=>'simple',
        'allowImageUpload'=>true,
        'allowFileManager'=>true,
        'items'=>array(
            'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic',
            'underline', 'removeformat', '|', 'justifyleft', 'justifycenter',
            'justifyright', 'insertorderedlist','insertunorderedlist', '|',
            'emoticons', 'image', 'link',),
    ),
)); ?>

Resources ¶

Created By jinmmd@gmail.com Based on Joe Chu's KindEditor

• KindEditor Documentation
• KindEditor Demo
• KindEditor on Github

Todos:

• Support for KindEditor's API