Skip to content
PHP HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
public
resources/views
routes
src
README.md
composer.json

README.md

CKEditor for Laravel

CKEditor —— 国外大名鼎鼎的富文本编辑器,官方网站:https://ckeditor.com/

Latest Stable Version Latest Unstable Version License Total Downloads

兼容版本

本扩展包经过测试,适配 Laravel 5.1 以上稳定版本(5.0 版本理论上也是可行的,但未经测试)。

安装与配置

composer.json 新增 "douyasi/laravel-ckeditor": "~1.0" 依赖,然后执行: composer update 操作。

依赖安装完毕之后,在 app.php 中添加:

'providers' => [
        'Douyasi\CKEditor\CKEditorServiceProvider',
],

然后,执行下面 artisan 命令,发布该扩展包配置等项。

php artisan vendor:publish --provider="Douyasi\CKEditor\CKEditorServiceProvider" --force

现在您可以访问 /laravel-ckeditor/example/basic (基础版)或 /laravel-ckeditor/example/standard (标准版)或 /laravel-ckeditor/example/full (完整版)路由,不出意外,您可以看到扩展包提供的示例页面。

编辑器图片默认会上传到 public/uploads/content 目录下;编辑器相关功能配置位于 config/ckeditor.php 文件中。

使用说明

参考本扩展包 resources\views 目录下 example 代码,引入必须的静态的资源 {!! ckeditor_js() !!}{!! ckeditor_css() !!}

各版本编辑器工具栏对比图

基础版 图1 - 基础(basic)版

标准版 图2 - 标准(standard)版

完整版 图3 - 完整(full)版

目前本扩展包自定义(customized)版与完整版完全相同,发布包资源之后,开发者自行配置与修改 customized.blade.php 模板文件(位于 resource/views/vendor/ckeditor/parts/ 目录),其他版本的模板建议不要修改。

使用示例

如果想使用 CKEditor 基础版编辑器,就引入 @include('ckeditor::parts.basic', ['editorId' => 'editor1']) 代码。其中,传入的 editorId 变量值需与前端上面 textarea 元素 id 一一对应。其他版本,如 standard (标准版)、 full (完整版) 、 customized (自定义版)以此来推。

下面示例代码引入的 full 版 CKEditor 编辑器:

<!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')
    // 可以继续追加额外的 CKEditor 代码,具体请参考官方文档 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>

图片上传

图片上传默认使用本扩展包提供的服务(仅限本地存储),你也可以编写自己的代码使用自己的 路由。要禁用本包上传服务,只需修改 ckeditor.php 配置中 usingLocalPackageUploadServer 项为 false

图片上传支持三种模式:传统表单、浏览器拖曳上传和剪切板粘贴图片上传(PS - 部分浏览器可能不支持拖曳与剪切板粘贴上传)。

传统浏览器 form 表单按钮提交上传,需配置 filebrowserImageUploadUrlfilebrowserUploadUrl ;浏览器拖曳文件上传或者剪切板粘贴图片上传,需配置 imageUploadUrluploadUrl

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',

关于

博客 : http://douyasi.com

Copyright (c) 2014-2018 douyasi - 由 ycrao 创建的组织。

You can’t perform that action at this time.