Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/2amigos/yii2-ckeditor-widget
CKEditor WYSIWYG widget for Yii2.
https://github.com/2amigos/yii2-ckeditor-widget
2amigos ckeditor-widget inline-editing widget wysiwyg yii
Last synced: about 1 month ago
JSON representation
CKEditor WYSIWYG widget for Yii2.
- Host: GitHub
- URL: https://github.com/2amigos/yii2-ckeditor-widget
- Owner: 2amigos
- License: other
- Archived: true
- Created: 2014-03-11T12:33:34.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2019-04-30T16:51:39.000Z (over 5 years ago)
- Last Synced: 2024-09-22T22:01:56.253Z (about 1 month ago)
- Topics: 2amigos, ckeditor-widget, inline-editing, widget, wysiwyg, yii
- Language: PHP
- Homepage: https://2amigos.us/open-source/ckeditor-widget
- Size: 1.87 MB
- Stars: 172
- Watchers: 29
- Forks: 112
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
CKEditor Widget for Yii2
========================
[](https://github.com/2amigos/yii2-ckeditor-widget/tags)
[](LICENSE.md)
[](https://travis-ci.org/2amigos/yii2-ckeditor-widget)
[](https://scrutinizer-ci.com/g/2amigos/yii2-ckeditor-widget/code-structure)
[](https://scrutinizer-ci.com/g/2amigos/yii2-ckeditor-widget)
[](https://packagist.org/packages/2amigos/yii2-ckeditor-widget)
Renders a [CKEditor WYSIWYG text editor plugin](http://www.ckeditor.com) widget.
Installation
------------
The preferred way to install this extension is through [composer](http://getcomposer.org/download/).
Either run
```
composer require 2amigos/yii2-ckeditor-widget
```
or add
```json
"2amigos/yii2-ckeditor-widget" : "~2.1"
```
to the require section of your application's `composer.json` file.
Skins & Plugins
---------------
This widget works with default's `dev-full/stable` branch of CKEditor, with a set of plugins and skins. If you wish to
configure a different skins or plugins that the one proposed, you will have to download them separately and configure
the widget's `clientOptions` attribute accordingly.
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 dosamigos\ckeditor\CKEditor;
= $form->field($model, 'text')->widget(CKEditor::className(), [
'options' => ['rows' => 6],
'preset' => 'basic'
]) ?>
```
Using inline edition with basic preset:
```
use dosamigos\ckeditor\CKEditorInline;
'basic']);?>
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.
```
Browse & Upload
---------------
To browse and upload files, the [KCFinder](https://kcfinder.sunhater.com/) plugin is used, which is disabled by default.
To enable it, just use `'kcfinder'=>true`.
See this simple example code:
```php
field($model, 'text')->widget(CKEditor::className(), [
'kcfinder' => true,
]);
```
The upload folder name is `upload` in the root web directory by default.
You can set options for the `kcfOptions` parameter, and can find all KCFinder's options in this link: [https://kcfinder.sunhater.com/install](https://kcfinder.sunhater.com/install)
For change upload directory or change some options you can see this advanced example code:
```php
field($model, 'text')->widget(CKEditor::className(), [
'kcfinder' => true,
'kcfOptions' => [
'uploadURL' => '@web/upload',
'uploadDir' => '@webroot/upload',
'access' => [ // @link http://kcfinder.sunhater.com/install#_access
'files' => [
'upload' => true,
'delete' => true,
'copy' => true,
'move' => true,
'rename' => true,
],
'dirs' => [
'create' => true,
'delete' => true,
'rename' => true,
],
],
'types' => [ // @link http://kcfinder.sunhater.com/install#_types
'files' => [
'type' => '',
],
],
],
]);
```
About extra assets
------------------
You maybe wonder why there is file `dosamigos-ckeditor.widget.js`. The reason is that due to the way Yii2 works with
forms and Cross-Site Request Forgery (csrf). CKEditor does not trigger the on change event nor collects the CSRF token
when using file uploads.
The asset tackles both issues.
Testing
-------
To test the extension, is better to clone this repository on your computer. After, go to the extensions folder and do
the following (assuming you have `composer` installed on your computer):
```bash
$ composer install --no-interaction --prefer-source --dev
```
Once all required libraries are installed then do:
```bash
$ vendor/bin/phpunit
```
Further Information
-------------------
Please, check the [CKEditor plugin site](http://www.ckeditor.com) documentation for further information about its configuration options.
Contributing
------------
Please see [CONTRIBUTING](CONTRIBUTING.md) for details.
Credits
-------
- [Antonio Ramirez](https://github.com/tonydspaniard)
- [All Contributors](../../contributors)
License
-------
The BSD License (BSD). Please see [License File](LICENSE.md) for more information.
> [](http://www.2amigos.us)
Web development has never been so fun!
[www.2amigos.us](http://www.2amigos.us)