Editor.md For Laravel 5（新增又拍雲端儲存）

gyp719發表於2018-11-30
Laravel

file

使用
為方便今後開發使用，簡化成包，歡迎 star.
上傳圖片新增對 upyun「又拍雲」 的支援.

版本
要求 Laravel version 5.5+

安裝
$ composer require wenslim/editormd
生成配置

$ php artisan vendor:publish --provider="Wenslim\editormd\EditorServiceProvider"

關於包更新
請檢視 github 文件當前包最新版本號, 目前是 0.1.1 composer.json

"require": {
...
"wenslim/editormd": "~0.1"
},
更新

$composer update wenslim/editormd
刪除 config / editormd.php配置檔案並透過上面指令重新生成配置
配置檔案
config / editormd.php

<?php

return [
    // textarea 容器的 id
    "id" => 'editor',
    // 編輯器寬高
    'width' => '100%',
    'height' => '500',
    // lib 類庫地址
    'path' => '/vendor/editormd/lib/',
    // 頂部工具欄主題 白 - default | 黑 - dark
    'theme' => 'default',
    // 編輯區域主題 - 更多主題 vendor / editormd / lib / codemirror / theme 的 css 名稱
    'editorTheme'=> 'default',
    // 顯式區域主題 白 - default | 黑 - dark
    'previewTheme'=> 'default',
    // 編輯器初始化內容
    'markdown' => 'md',
    // 程式碼摺疊
    'codeFold' => true,
    // 實時同步
    'syncScrolling' => true,
    // 儲存 HTML 到 Textarea
    'saveHTMLToTextarea' => true,
    // 搜尋替換
    'searchReplace' => true,
    // 開啟 emoji 支援
    'emoji' => true,
    // 開啟圖片上傳
    'imageUpload' => true,
    // 自定義儲存目錄
    'imageSavePath' => 'uploads/images/' . date('Ymd', time()),
    // 允許的圖片大小 kb
    'imageSize' => '100',
    // default 儲存在本地專案 upyun 儲存到又拍雲
    'saveType' => 'default',
    /**
     * upyun 設定
     * 
     * 如最終圖片位置為 https://images.iiiku.com/test/test_xxxxxxx.png
     * 
     * 注意：請參考下面案例寫法，path 不要有多餘的 '/'
     */
    // upyun 儲存圖片的字首，按照自己喜歡定義
    'savePrefix' => 'test_',
    // upyun 儲存地址，如繫結 CNAME 後的二級域名，沒有申請 SSL 請用 http://
    'savePath' => 'https://images.iiiku.com',
    // upyun 寫入地址，相對 savePath的地址
    'writePath' => '/test/',
];

使用 default 時
.env

...
APP_URL=xxx
說明：如果是本地，請填寫你的域名

使用 upyun 時
修改配置
config / services.php

return [
    ...
    'editormd' => [
        'upyun' => [
            'name' => env('UPYUN_NAME'),
            'user' => env('UPYUN_USER'),
            'password' => env('UPYUN_PASS'),
        ]
    ]
];

說明：

name - 服務名稱
user - 操作員名稱
pass - 操作員密碼
配置賬號
.env

...
UPYUN_NAME=xxx
UPYUN_USER=xxx
UPYUN_PASS=xxx

釋出時
resources / views / articles / create.blade.php

<head>
{!! editormd_style() !!}
</head>
<body>
    <div id="editor">
        <textarea></textarea>
    </div>
    <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
    {!! editormd_script() !!}
</body>

說明：

請在資源指令碼之前引入 Jquery
請為 textarea 的父級元素指明 id 選擇器
注意：若使用了 laravel mix 專案預設會生成 app.js，其中包含了 jQuery，此時只需要在指令碼引入之前載入 app.js 即可，若未使用，可以採取上述引入 cdn 的方式

儲存時
app / Http / Controllers / ArticlesController.php

use App\Models\Article;

public function store(ArticleRequest $request, Article $article)
{
    $article -> fill($request -> all());
    ...
    $article -> markdown = $request -> input('editor-html-code');
    $article -> save();
}

說明：

預設儲存 content 的原始內容
新增 markdown 欄位儲存編譯後的內容
顯示時
resources / views / articles / show.blade.php

{!! $article -> markdown !!}

說明：用於修改時，請讀取 content 的內容

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

相關文章