Laravel 5-KindEditor 一款值得推薦的最具情懷的 HTML 文字編輯器

chenhua發表於2018-06-15
LaravelHTML

Laravel5-KindEditor 一款值得推薦的最具情懷的HTML文字編輯器

Laravel5-KindEditor 是基於 KindEditor 封裝的 Markdown 線上HTMl編輯器，支援 Laravel5 專案。已整合本地、七牛雲、阿里雲檔案儲存。

更新記錄

  • 2018-06-15 Release v1.0.0 完成 KindEditor 線上編輯器主程式，且整合本地、七牛、阿里雲oss儲存。

安裝流程

1、安裝的兩種方式

① 直接編輯配置檔案

將以下內容增加到 composer.json：

require: {
    "chenhua/laravel5-kindeditor": "~1.0"
}

然後執行 composer update。

② 執行命令安裝

執行命令：

composer require chenhua/laravel5-kindeditor

2、完成上面的操作後，修改 config/app.php 中 providers 陣列

Chenhua\Kindeditor\KindeditorServiceProvider::class,

3、執行 artisan 命令，生成 config/kindeditor.php 配置檔案

php artisan vendor:publish --tag=kindeditor

4、修改 config/kindeditor.php 配置檔案

<?php
return [
    "default"     => 'local', //預設返回儲存位置url
    "dirver"      => ['local'], //儲存平臺 ['local', 'qiniu', 'aliyun']
    "connections" => [
        "local"  => [
            'prefix' => 'uploads/kindeditor', //本地儲存位置，預設uploads
        ],
        "qiniu"  => [
            'access_key' => '',
            'secret_key' => '',
            'bucket'     => '',
            'prefix'     => '', //檔案字首 file/of/path
            'domain'     => '' //七牛自定義域名
        ],
        "aliyun" => [
            'ak_id'     => '',
            'ak_secret' => '',
            'end_point'  => '',
            'bucket'    => '',
            'prefix'    => '',
        ],
    ],
];

七牛和阿里雲的配置內容，需要去對應官網申請賬號並配置獲取，此處省略一萬字。。。

使用方法

在 xxx.blade.php 編輯器相應位置新增如下程式碼：

<textarea id="editor_id" name="content" style="width:700px;height:300px;">
    HTML內容
</textarea>

@include('kindeditor::editor',['editor'=>'editor_id'])

以上操作能生成一個 id="editor" 的 HTML 文字編輯框，並能實時預覽效果.

更多用法可以參考 KindEditor 官方文件，解鎖更多姿勢>>>

效果展示

default樣式：
markdown.png

License

本擴充套件遵循 MIT license 開源。

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章