Editor.md For Laravel 5 (支援七牛儲存)

LaravelChen發表於2017-08-03
Laravel

介紹

介於在Laravel下使用Editor.md這款Markdown編輯器的原因,覺得這款編輯器非常好用，於是做成laravel的擴充套件，方便使用!
Editor.md的官網是:https://pandao.github.io/editor.md/examples/index.html
我的原文:https://learnku.com/articles/4168/editormd-for-laravel5
github地址:https://github.com/LaravelChen/laravel-editormd

效果圖

預設樣式

image

sublime樣式

image

安裝

使用composer安裝擴充套件(最好翻牆哈哈)

composer require laravelchen/laravel-editormd

然後在config/app.php新增provider

'providers' => [
    LaravelChen\Editormd\EditorMdProvider::class,
    zgldh\QiniuStorage\QiniuFilesystemServiceProvider::class,
   ];

最後生成配置檔案

php artisan vendor:publish

使用七牛請先在config/filesystem.php檔案中新增七牛的配置

 'qiniu' => [
            'driver' => 'qiniu',
            'domains' => [
                'default' => '', //你的七牛域名
                'https' => '',         //你的HTTPS域名
                'custom' => '',                //你的自定義域名
            ],
            'access_key' => '',  //AccessKey
            'secret_key' => '',  //SecretKey
            'bucket' => '',  //Bucket名字
            'notify_url' => '',  //持久化處理回撥地址
        ],

用法

配置檔案的內容(config/editormd.php)

<?php
return [
       'upload_path' => 'uploads/images/',//上傳檔案的地址
       'upload_type' => '',//上傳的方式qiniu或者本地,預設為本地
       'upload_http' => 'https',//https或者為空
       //本地:'',七牛:'qiniu'
       'width' => '100%',//寬度建議100%
       'height' => '700',//高度
       'theme' => 'default',//頂部的主題分為default和dark
       'editorTheme' => 'default',//顯示區域的主題分為default和pastel-on-dark 注:如果想要配置其他主題，請參考vendor/editormd/lib/theme目錄下的css檔案
       'previewTheme' => 'default',//編輯區域的主題分為default,dark,
       'flowChart' => 'true',  //流程圖
       'tex' => 'true',  //開啟科學公式TeX語言支援
       'searchReplace' => 'true',//搜尋替換
       'saveHTMLToTextarea' => 'true',  //儲存 HTML 到 Textarea
       'codeFold' => 'true',  //程式碼摺疊
       'emoji' => 'true',  //emoji表情
       'toc' => 'true',  //目錄
       'tocm' => 'true',  //目錄下拉選單
       'taskList' => 'true',  //任務列表
       'imageUpload' => 'true',  //圖片本地上傳支援
       'sequenceDiagram' => 'true',  //開啟時序/序列圖支援
];

例子(請在editor_js()之前引用jquery)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    {!! editor_css() !!}
</head>
<body>
<div class="container">
    <div class="col-md-12" style="margin-top: 50px">
        <div id="editormd_id">
            <textarea name="content" style="display:none;"></textarea>
        </div>
    </div>
</div>
<script src="//cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
{!! editor_js() !!}
</body>
</html>

OK！一切完成後！盡請使用吧!

LaravelChen

相關文章