安裝流程
1、直接編輯配置文件composer.json
require: {
"chenhua/laravel5-markdown-editor": "~1.0"
}
2、然后運(yùn)行cmd命令行運(yùn)行
composer update
3、執(zhí)行cmd命令安裝
composer require chenhua/laravel5-markdown-editor
4、安裝完畢后修改 config/app.php 中 providers與aliases 數(shù)組
Chenhua\MarkdownEditor\MarkdownEditorServiceProvider::class,
'MarkdownEditor' => Chenhua\MarkdownEditor\Facades\MarkdownEditor::class,
5、執(zhí)行以下 artisan 命令，生成 config/markdowneditor.php 配置文件
php artisan vendor:publish --tag=markdown
6、修改 config/markdowneditor.php 配置文件
<?php
return [
"default" => 'local', //默認(rèn)返回存儲位置url
"dirver" => ['local'], //存儲平臺 ['local', 'qiniu', 'aliyun']
"connections" => [
"local" => [
'prefix' => 'uploads/markdown', //本地存儲位置，默認(rèn)uploads
],
"qiniu" => [
'access_key' => '',
'secret_key' => '',
'bucket' => '',
'prefix' => '', //文件前綴 file/of/path
'domain' => '' //七牛自定義域名
],
"aliyun" => [
'ak_id' => '',
'ak_secret' => '',
'end_point' => '',
'bucket' => '',
'prefix' => '',
],
],
];
使用方法
1、在需要編輯模式下的html頁面上添加下面代碼
<div id="test-editormd">
<textarea name="test-editormd" id="demo" style="display:none;"></textarea>
</div>
@include('markdown::encode',['editors'=>['test-editormd']])
效果圖
image.png
2、獲取編輯的原內(nèi)容存入數(shù)據(jù)庫(需要把" " ' '進(jìn)行轉(zhuǎn)義后存入\' \")
// 獲取得到數(shù)據(jù)發(fā)送ajax到后臺存入數(shù)據(jù)庫
var data = $('#demo').val()
3、頁面顯示代碼
首先在 composer.json 的 require 里面加入以下內(nèi)容
"yuanchao/laravel-5-markdown-editor": "dev-master"
添加完成后，執(zhí)行 composer update
composer update
在config/app.php進(jìn)行配置
'providers' => [
'YuanChao\Editor\EndaEditorServiceProvider::class',
],
// 往里面加入 `'EndaEditor' => 'YuanChao\Editor\Facade\EndaEditorFacade'`
'aliases' => [
'EndaEditor' => 'YuanChao\Editor\Facade\EndaEditorFacade::class',
],
執(zhí)行命令
php artisan vendor:publish
顯示如下，說明安裝完畢
Copied File [/vendor/edvinaskrucas/notification/src/config/notification.php] To [/config/notification.php]
Copied Directory [/vendor/yuanchao/laravel-5-markdown-editor/src/config/views] To [/resources/views/vendor/editor]
Copied Directory [/vendor/yuanchao/laravel-5-markdown-editor/src/config/editor] To [/public/plugin/editor]
Copied File [/vendor/yuanchao/laravel-5-markdown-editor/src/config/editor.php] To [/config/editor.php]
Publishing Complete!
markdown 轉(zhuǎn) html
首先在控制器中引入
use EndaEditor;
方法代碼
public function uuu(){
$str = EndaEditor::MarkDecode('```
<script src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js" type=\'text/javascript\' charset="utf-8"></script>
```');
return view('info',compact('str'));
}
通過highlight.js進(jìn)行代碼高亮顯示 https://highlightjs.org/
image.png
選擇好需要的編程語言，點(diǎn)擊下載，文件如下
image.png
然后在頁面中進(jìn)行引入(注意：
juqery應(yīng)在hljs.initHighlightingOnLoad()方法之前引入)
<link rel="stylesheet" href="/highlight/styles/monokai-sublime.css">
<script src="/highlight/highlight.pack.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
最后把之前編寫的原文本內(nèi)容渲染到視圖中
<body>
<div id="md" style="width: 1000px">
{!!$str!!}
</div>
</body>
