史上最好用的 Laravel 5 框架 Markdown 編輯器

chenhua發表於2017-11-09
Laravel框架

Laravel5-Markdown-Editor

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

更新記錄

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

安裝流程

1、安裝的兩種方式

① 直接編輯配置檔案

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

require: {
    "chenhua/laravel5-markdown-editor": "~1.0"
}

然後執行 composer update。

② 執行命令安裝

執行命令：

composer require chenhua/laravel5-markdown-editor

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

Chenhua\MarkdownEditor\MarkdownEditorServiceProvider::class,

3、修改 config/app.php 中 aliases 陣列

'MarkdownEditor' => Chenhua\MarkdownEditor\Facades\MarkdownEditor::class,

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

php artisan vendor:publish --tag=markdown

5、修改 config/markdowneditor.php 配置檔案

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

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

使用方法

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

<div id="test-editormd">
    <textarea name="test-editormd" style="display:none;"></textarea>
</div>

@include('markdown::encode',['editors'=>['test-editormd']])

以上操作能生成一個 name="test-editormd" 的 markdown 文字編輯框，並能實時預覽效果.

解析 markdown 格式文字為 html 格式

① 前端js方式解析 markdown 文字

<div id="doc-content">
    <textarea style="display:none;">
# 這是一個h1標籤
## 這是一個h2標籤
    </textarea>
</div>
@include('markdown::decode',['editors'=>['doc-content']])

② PHP方式解析 markdown 文字

    echo MarkdownEditor::parse("#中間填寫markdown格式的文字");

更多用法可以參考 editor.md 官方程式碼，解鎖更多姿勢>>>

效果展示

default樣式：
markdown.png

License

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

相關文章