Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/imaxwen/yii2-ckeditor-widget
CKEditor widget for yii2, with ckfinder&elfinder integrated
https://github.com/imaxwen/yii2-ckeditor-widget
ckeditor ckfinder elfinder yii2
Last synced: about 1 month ago
JSON representation
CKEditor widget for yii2, with ckfinder&elfinder integrated
- Host: GitHub
- URL: https://github.com/imaxwen/yii2-ckeditor-widget
- Owner: imaxwen
- License: mit
- Created: 2016-09-28T09:20:10.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-03-28T03:12:48.000Z (over 7 years ago)
- Last Synced: 2024-08-11T05:05:10.916Z (4 months ago)
- Topics: ckeditor, ckfinder, elfinder, yii2
- Language: JavaScript
- Homepage:
- Size: 4.39 MB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# yii2-ckeditor-widget
CKEditor widget for yii2, support ckfinder,elfinder
This repo was forked from [2amigos/yii2-ckeditor-widget](https://github.com/2amigos/yii2-ckeditor-widget).
I made some customization.
## Installation
```
composer require maxwen/yii2-ckeditor-widget
```
## Configuration
Inorder to add your custom configure,
you need to add an controllerMap to you config/main.php:
```
'controllerMap' => [
'ckeditor' => [
'class' => 'maxwen\ckeditor\controllers\EditorController',
'viewPath' => '@vendor/maxwen/yii2-ckeditor-widget/views/editor'
]
]
```
Then add you custom configure into params.php:
see [CKEditor.config](http://docs.ckeditor.com/#!/api/CKEDITOR.config)
```
// CKEditor config rewrite
'ckeditorConfig' => [
// custom options
'language' => 'en',
'font_names' => 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana',
'toolbar' => 'Full',
'skin' => 'your skin name here'
// etc...
],
```
Usage
-----
The library comes with two widgets: `CKEditor` and `CKEditorInline`. One is for classic edition and the other for inline
editing respectively.
Using a model with a basic preset:
```
use maxwen\ckeditor\CKEditor;
= $form->field($model, 'text')->widget(CKEditor::className(), [
'options' => ['rows' => 6],
'editorConfig' => [
'customConfig' => 'http://yourdoman.com/ckeditor/config.js',
// etc ...
]
]) ?>
```
Using inline edition with basic preset:
```
use maxwen\ckeditor\CKEditorInline;
[
// ...
]
]);?>
This text can be edited now :)
```
How to add custom plugins
-------------------------
This is the way to add custom plugins to the editor. Since version 2.0 we are working with the packagist version of the
CKEditor library, therefore we are required to use its configuration API in order to add external plugins.
Lets add the popular [Code Editor Plugin](http://ckeditor.com/addon/pbckcode) for example. This plugin would allow us to
add a button to our editor's toolbar so we can add code to the content we are editing.
Assuming you have downloaded the plugin and added to the root directory of your Yii2 site. I have it this way:
+ frontend
+ -- web
+ -- pbckcode
We can now add it to our CKEditor widget. For this example I am using `CKEditorInline` widget. One thing you notice on
this example is that we do not use the preset attribute; this is highly important as we want to add a customized toolbar to our
widget. No more talking, here is the code:
```php
registerJs("CKEDITOR.plugins.addExternal('pbckcode', '/pbckcode/plugin.js', '');");
// ...
// Using the plugin
'custom', 'clientOptions' => [
'extraPlugins' => 'pbckcode',
'toolbarGroups' => [
['name' => 'undo'],
['name' => 'basicstyles', 'groups' => ['basicstyles', 'cleanup']],
['name' => 'colors'],
['name' => 'links', 'groups' => ['links', 'insert']],
['name' => 'others', 'groups' => ['others', 'about']],
['name' => 'pbckcode'] // <--- OUR NEW PLUGIN YAY!
]
]]) ?>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
```
About CKFinder
--------------
[CKFinder](https://cksource.com/ckfinder) is a commercial software, this repo just contains a demo version, you can [purchase the full version here](https://cksource.com/ckfinder/buy).
Further Information
-------------------
Please, check the [CKEditor plugin site](http://www.ckeditor.com) documentation for further information about its configuration options.