Yii 1.1: yii-kindeditor

This widget provide a richtext input box replace textarea, and support upload image and zip files.
16 followers

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

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

Total 20 comments

#18213 report it
jinmmd at 2014/09/27 06:03am
Re: download links are corrupt

@Mr.amin

Well, you can leave your email address so that I can send it to you.

Or you can write me a mail, jinmmd@gmail.com

#18212 report it
Mr.amin at 2014/09/27 05:22am
download links are corrupt

i cant download nethere download links

#16304 report it
ELVIS_LIM at 2014/02/08 03:04am
fix multiple image upload issue

If the upload action is access only for authentic user, then you may encounter multiple image upload failure issue. Generally speaking, it's a swfupload plugin issue.
Add 'options' => array('action' => $this->action->id, 'id' => $this->id,'PHPSESSID'=>session_id()) parameter when create this widget should fix this problem.

#14276 report it
qingyue at 2013/08/01 03:19am
two errors

(1)In IE7 show error: SCRIPT1028: 缺少标识符、字符串或数字 create, 行686 字符770

modify KindEditorWidget.php, at line 107, add codes before return: $script = substr($script, 0, strlen($script) - 3) . ']';

(2)can not save data on create and update. In form use submit button it can save data. If i use a button outside the form with jquery submit, it cannot save data.

#12371 report it
Andrew Starlike at 2013/03/16 03:58pm
Great work

Great extension man, + 1 for the good work!

I needed a rich text area to work with bootstrap out of the box and this is it.

#11125 report it
jinmmd at 2012/12/18 10:14pm
Re:handle iframe and iobject

@WebDevPT

Well, this extension can't handle iframes or objects. But I know a way to include youtube videos in any editor, maybe it can help you.

For example, youtube video's url is :http://www.youtube.com/watch?v=mIA0W69U2_Y, then changed like this:http://www.youtube.com/v/mIA0W69U2_Y

My English is poor, so I hope you can find their difference. In other word, you should replace "watch?v=" to "v/", and you can get video's real url.

Have a try! Maybe it can works.

#11120 report it
WebDevPT at 2012/12/18 11:03am
handle iframe and iobject

This extension works great, but is there a way to handle iframes? The tags are replaced when we save our code.

Any button or function in this extension can handle iframes without tweaking the code? Anyone is using this to include youtube videos for example?

Thanks in advance.

#10900 report it
unity at 2012/12/01 03:27am
how about $script?
$script = $script.'KindEditor.ready(function(K){var editor=K.create("textarea[id='.$this->id.']", {'.$this->renderItems($this->items).'})});';

php notice:

Undefined variable: script
 
D:\www\yonghui\protected\extensions\kindeditor\KindEditorWidget.php(84)
 
if remove $script, like this:
$script = 'KindEditor.ready(function(K){var editor=K.create("textarea[id='.$this->id.']", {'.$this->renderItems($this->items).'})});';

it wroking!

#10892 report it
jinmmd at 2012/11/30 01:32am
Re:Re:Undefined variable: script

@JCJ

Thanks for your support and solution! ^_^

#10891 report it
JCJ at 2012/11/30 01:23am
Re:Undefined variable: script

Using the widget as provided it (with the example implementation) it complains that $script it undefined at

$script = $script.'KindEditor.ready(function(K){var editor=K.create("textarea[id='.$this->id.']", {'.$this->renderItems($this->items).'})});';

As a quick test, I appended

$script = '';

at the beginning of the run() function and it loaded the editor properly. I'm sure that breaks something though. Haven't really looked into it further.

I noticed the upload_json and file manager have Chinese strings hard coded. I may translate all of that since this looks like an excellent editor. Thanks for giving us the extension!

#10716 report it
jinmmd at 2012/11/19 12:16am
Re:Undefined variable: script

@unity Well, it's not a bug, what's wrong with it?

#10697 report it
unity at 2012/11/16 05:21am
Undefined variable: script

$script = $script.'KindEditor.ready(function(K){var editor=K.create("textarea[id='.$this->id.']", {'.$this->renderItems($this->items).'})});

this $script is a bug?

#9802 report it
aleksdj at 2012/09/11 10:34am
Re:It's working

@WebDevPT the same happened to me, there is an innapreciate string 'en' at the end of the javascript file.

@jinmmd you could maybe include this appreciation in your translations instructions.

#9799 report it
jinmmd at 2012/09/11 09:43am
Re:It's working

@WebDevPT

I'm very glad to hear that! ^^

#9797 report it
WebDevPT at 2012/09/11 07:07am
It's working

Thank you it's working now. I realize that I had the parameter in the wrong location and nested in the wrong place.

Also I had another problem because I forgot to change at the very end of my new language file the id for the new language.

in my case, before:

}, 'en');

and after:

}, 'pt');

Thank you again!

#9794 report it
jinmmd at 2012/09/10 07:11pm
Re:A little more elegant?

@aleksdj

Well, I just make the Kindeditor can be easily used as an extension for yii framework, I really dot't know how to include the creation of the text area inside my code, But I will take a time to work out it, let the code more elegant.

Thanks for your suggestion.

#9785 report it
aleksdj at 2012/09/10 11:42am
A little more elegant?

Why don't you include the creation of the text area inside your code? it would be much more elegant (just as others editor extensions). This way you don't have to write the visibility stuff, etc. what do you think?

#9776 report it
jinmmd at 2012/09/10 12:43am
Re:Language issue

@WebDevPT

Thank you for letting me know this issue, and I had fixed this problem now. You can update the file named KindEditorWidget.php and make sure the file en.js is under /extensions/kindeditor/assets/lang/.

By the way, you should write the code like this:

<?php $this->widget('ext.kindeditor.KindEditorWidget',array(
    'id'=>'Post_content',   //Textarea id
    'language'=>'en', // example: spanish (REGISTER SCRIPT FILE)
    // Additional Parameters (Check http://www.kindsoft.net/docs/option.html)
    'items' => array(
        'langType'=>'en', // example: spanish  (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',),
    ),
)); ?>

That means "langType" must nested once. I hope you can make it, and sorry for replied you late.

#9737 report it
WebDevPT at 2012/09/07 12:06pm
Language issue

I can't view the english translation, any idea of what i'm missing here?

Code:

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

The only way i can see english language is when I force the JS files to use as default the english language, but then i try to add a new js file with a new language i see all the time the "Undefined" on the tooltip's. Any help of fix for this so i can use as a parameter instead.

#9428 report it
jinmmd at 2012/08/09 11:15pm
Re:Extension content is missing

@aleksdj

Thank you for letting me know, I have found the problem and recompressed files with 7-zip. Maybe you can try a again to download it, I'm very sorry.

Leave a comment

Please to leave your comment.

Create extension