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.
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
v0.0.4
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/
Sep 10, 2012
Aug 10, 2012
Aug 8, 2012
Aug 8, 2012
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 -->
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
$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',), ), ));
Created By jinmmd@gmail.com Based on Joe Chu's KindEditor
Todos:
Total 20 comments
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.
@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.
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.
php notice:
it wroking!
@JCJ
Thanks for your support and solution! ^_^
Using the widget as provided it (with the example implementation) it complains that $script it undefined at
As a quick test, I appended
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!
@unity Well, it's not a bug, what's wrong with it?
$script = $script.'KindEditor.ready(function(K){var editor=K.create("textarea[id='.$this->id.']", {'.$this->renderItems($this->items).'})});
this $script is a bug?
@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.
@WebDevPT
I'm very glad to hear that! ^^
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:
and after:
Thank you again!
@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.
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?
@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:
That means "langType" must nested once. I hope you can make it, and sorry for replied you late.
I can't view the english translation, any idea of what i'm missing here?
Code:
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.
@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.
@aleksdj
You can write a js file under the folder /assets/lang/ named [langType].js reference on en.js, then passed two parameters called langType and language to the editor widget, like this:
The first parameter is for register script file, the second is for invoke.You can have a try!
I have downloaded 0.3 and 0.2 version and there is nothing but a simple and corrupt .txt file, could you please try to upload a correct one?
This editor looks like very very nice... overall for the in-built upload image addon. But, how can I translate to Spanish? is there any guide? thanks
I am very honored to receive your appreciation!
Leave a comment
Please login to leave your comment.