yii-kindeditor This widget provide a richtext input box replace textarea, and support upload image and zip files.

  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

Todos:

  • Support for KindEditor's API
2 0
16 followers
8 571 downloads
Yii Version: 1.1
License: LGPL-3.0
Category: User Interface
Developed by: jinmmd
Created on: Aug 6, 2012
Last updated: 5 years ago

Downloads

show all

Related Extensions