Merge pull request #1 from douyasi/dev

update ckeditor to 4.19.0
douyasi · May 25, 2022 · 9f936de · 9f936de
2 parents c5de254 + 3fca977
commit 9f936de
Show file tree

Hide file tree

Showing 312 changed files with 6,878 additions and 2,852 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,6 @@
-# CKEditor for Laravel
+# CKEditor(4) for Laravel with image upload support
+
+[ENGLISH README](./README_en.md)
 
 >  `CKEditor` —— 国外大名鼎鼎的富文本编辑器，官方网站：https://ckeditor.com/ 。目前官方最新版本为 `CKEditor5` ，建议配合 `React/Vue` 等前端框架工程化使用。
 
@@ -7,10 +9,13 @@
 [![License](https://poser.pugx.org/douyasi/laravel-ckeditor/license?format=flat-square)](https://packagist.org/packages/douyasi/laravel-ckeditor)
 [![Total Downloads](https://poser.pugx.org/douyasi/laravel-ckeditor/downloads?format=flat-square)](https://packagist.org/packages/douyasi/laravel-ckeditor)
 
+## 更新日志
+
+- `2022-05-25` 发布 `1.2` 版本，更新 `CKEditor4` 版本到最新的 `4.19.0` 版本，并适配图片上传接口。
 
 ## 兼容版本
 
-本扩展包经过测试，适配 `Laravel 5.1` 以上稳定版本（`5.0` 版本理论上也是可行的，但未经测试）。
+本扩展包经过测试，适配 `Laravel 5` 以上所有版本（`Laravel 5 - 9` 均适配）。
 
 ## 安装与配置
 

diff --git a/README_en.md b/README_en.md
@@ -0,0 +1,135 @@
+# CKEditor(4) for Laravel with image upload support
+
+>  [CKEditor](https://ckeditor.com), A famous WYSIWYG editor for web.
+
+[![Latest Stable Version](https://poser.pugx.org/douyasi/laravel-ckeditor/v/stable.svg?format=flat-square)](https://packagist.org/packages/douyasi/laravel-ckeditor)
+[![Latest Unstable Version](https://poser.pugx.org/douyasi/laravel-ckeditor/v/unstable.svg?format=flat-square)](https://packagist.org/packages/douyasi/laravel-ckeditor)
+[![License](https://poser.pugx.org/douyasi/laravel-ckeditor/license?format=flat-square)](https://packagist.org/packages/douyasi/laravel-ckeditor)
+[![Total Downloads](https://poser.pugx.org/douyasi/laravel-ckeditor/downloads?format=flat-square)](https://packagist.org/packages/douyasi/laravel-ckeditor)
+
+## Update Log
+
+- Version `1.2` have published on `2022/05/25`, update `CKEditor(4)` to current newest version `4.19.0`, make some adapters to image uploads
+
+## Compatibility
+
+This package have been tested for `Laravel 5` up versions. It's compatible with Laravel from `5` to `9` by all versions.
+
+## Installation and Configurations
+
+Add `"douyasi/laravel-ckeditor": "~1.0"` to your Laravel project `composer.json` file. 
+
+Or, just execute `composer require "douyasi/laravel-ckeditor:~1.0"` command in your terminal when change to target project directory.
+
+```bash
+
+$ cd /path/to/your/laravel/project
+$ vim composer.json
+# add "douyasi/laravel-ckeditor": "~1.0" to it
+$ composer install/update -vvv
+# or execute
+$ composer require "douyasi/laravel-ckeditor: ~1.0"
+```
+
+If Laravel package discovery failed, you need to add code below to Laravel `config/app.php` file:
+
+```php
+'providers' => [
+        'Douyasi\CKEditor\CKEditorServiceProvider',
+],
+```
+
+Execute `artisan` command below in terminal to publish all assets by this package.
+
+```bash
+php artisan vendor:publish --provider="Douyasi\CKEditor\CKEditorServiceProvider" --force
+```
+
+Then, start your Laravel web server, and visit links below.
+
+```bash
+$ php artisan serve
+# then visit
+# http://127.0.0.1:8000/laravel-ckeditor/example/basic
+# http://127.0.0.1:8000/laravel-ckeditor/example/standard
+# http://127.0.0.1:8000/laravel-ckeditor/example/full
+```
+
+`/laravel-ckeditor/example/basic` for basic version, and `/laravel-ckeditor/example/standard` for standard version, and `/laravel-ckeditor/example/full` for full version.
+
+Images will be upload to `public/uploads/content` directory, and this package configurations in  `config/ckeditor.php` file.
+
+## Usage
+
+>   See the `example.blade.php` code in `resources\views` directory, you need add `{!! ckeditor_js() !!}` and `{!! ckeditor_css() !!}` in your blade template file.
+
+#### Toolbar layout in different CKEditor(4) versions
+
+![basic](http://mweb-upyun.test.upcdn.net/2018/01/12/23f5d8cb246f111d2ab1d83abfad2cf0.png)
+Figure 1 - `basic` version
+
+![standard](http://mweb-upyun.test.upcdn.net/2018/01/12/f41ba89ad60005d6d52fa8ff8962c296.png)
+Figure 2 - `standard` version
+
+![full](http://mweb-upyun.test.upcdn.net/2018/01/12/62a7d4b79d60f739b314619049b2511c.png)
+Figure 3 - `full` version
+
+`customized` version as same as full version, you can modify it (located in `resource/views/vendor/ckeditor/parts/customized.blade.php` directory) after package asset published. Other versions should not be modified. 
+
+#### Example
+
+Here is an example of `full` version CKEditor in blade html file. Using `basic` version then include `@include('ckeditor::parts.basic', ['editorId' => 'editor1'])` basic, `editorId` should be as same as the value of `id` in html `textarea` element (that rendered as `CKEditor` instance here). Using `standard` version then include `@include('ckeditor::parts.standard', ...)` and so on.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>CKEditor Example</title>
+    {!! ckeditor_js() !!}
+    {!! ckeditor_css() !!}
+</head>
+<body>
+    <textarea id="editor1" cols="10" rows="10">
+        &lt;p&gt;This is some sample text. You are using &lt;a href=&quot;http://ckeditor.com&quot;&gt;CKEditor&lt;/a&gt;, an online &lt;abbr title=&quot;What You See Is What You Get&quot;&gt;WYSIWYG&lt;/abbr&gt;&amp;nbsp;editor.&lt;/p&gt;
+    </textarea>
+    @section('ckeditorExtraScript')
+    // add some addon config, ref: https://sdk.ckeditor.com/ 或 https://docs.ckeditor.com/ckeditor4/docs/
+    language: 'zh-TW',
+    uiColor: '#9AB8F3',
+    filebrowserImageUploadUrl : '/laravel-ckeditor/upload?_token={!! csrf_token() !!}&type=Images&by=btn_up',
+    // filebrowserUploadUrl : '/laravel-ckeditor/upload?_token={!! csrf_token() !!}&by=btn_up',
+    imageUploadUrl : '/laravel-ckeditor/upload?_token={!! csrf_token() !!}&type=Images&by=drop_or_clipboard_up',  // only for image
+    // uploadUrl : '/laravel-ckeditor/upload?_token={!! csrf_token() !!}&by=drop_or_clipboard_up',
+    @overwrite
+    @include('ckeditor::parts.full', ['editorId' => 'editor1'])
+</body>
+</html>
+```
+
+#### Image Uploads
+
+Make your own image or file upload code, just change `usingLocalPackageUploadServer` value to `false` in `ckeditor.php` file to disable image upload by this package.
+
+Support image uploads by three ways:
+
+- traditional form upload
+- drop/drag upload
+- clipboard upload
+
+![upload-gif](https://s1.ystatic.cn/uploads/content/20180503/5aeb2a713fcf5_45o.gif) 
+
+Setting `filebrowserImageUploadUrl` or `filebrowserUploadUrl` value when using traditional form upload, setting `imageUploadUrl` or `uploadUrl` value when using drop or clipboard upload.
+
+```javascript
+filebrowserImageUploadUrl : '/laravel-ckeditor/upload?_token={!! csrf_token() !!}&type=Images&by=btn_up',
+imageUploadUrl : '/laravel-ckeditor/upload?_token={!! csrf_token() !!}&type=Images&by=drop_or_clipboard_up',
+filebrowserUploadUrl : '/laravel-ckeditor/upload?_token={!! csrf_token() !!}&by=btn_up',
+uploadUrl : '/laravel-ckeditor/upload?_token={!! csrf_token() !!}&by=drop_or_clipboard_up',
+```
+
+## About
+
+blog: http://douyasi.com
+
+>   `Copyright (c) 2014-2099` [douyasi](https://github.com/douyasi)
diff --git a/composer.json b/composer.json
@@ -1,7 +1,7 @@
 {
     "name": "douyasi/laravel-ckeditor",
     "description": "CKEditor for laravel",
-    "keywords": ["laravel", "CKEditor", "web editor", "douyasi", "wysiwyg"],
+    "keywords": ["laravel", "CKEditor4", "web editor", "douyasi", "wysiwyg", "image-upload"],
     "license": "MIT",
     "authors": [
         {

diff --git a/config/ckeditor.php b/config/ckeditor.php
@@ -3,9 +3,16 @@
 return [
 
     /**
-     * 是否使用本扩展包提供的本地图片上传组件服务
+     * disable image upload service by this package? 
+     * 是否使用本扩展包提供的本地图片上传组件服务 
+     * true: enabled 启用
+     * false: disabled 禁用
      */
-    'usingLocalPackageUploadServer' => true,  // true - 使用本扩展包提供的本地图片上传组件服务，请保持 'uploadImgServer' => '/laravel-ckeditor/upload' 为默认值
+    'usingLocalPackageUploadServer' => true,
 
+    /**
+     * change to your own image upload controller router if `usingLocalPackageUploadServer` set to `false`, otherwise keep as default 
+     * 当 `usingLocalPackageUploadServer` 设置为 `false` 时，请指向自己实现的图片上传控制器路由，否则（如未实现），请保持默认值
+     */
     'imageUploadUrl' => '/laravel-ckeditor/upload',
 ];