laravel集成markdown编辑器
laravel-admin集成编辑器
安装laravel-admin-ext-editormd，该扩展集成了editor.md，很适合作为后台web编辑器
$ composer require sharemant/laravel-admin-ext-editormd
$ php artisan vendor:publish --tag=laravel-admin-ext-editormd
在 config/admin.php 的 extensions 数组中添加配置：
'extensions' => [
'editormd' => [
// Set to false if you want to disable this extension
'enable' => true,
// Set to true if you want to take advantage the screen length for your editormd instance.
'wideMode' => false,
// Set to true when the instance included in larave-admin tab component.
'dynamicMode' => false,
// Editor.js configuration (Refer to http://pandao.github.io/editor.md/)
'config' =>
[
'path' => '/vendor/laravel-admin-ext/editormd/editormd-1.5.0/lib/',
'width' => '100%',
'height' => 600,
'emoji' => true
]
]
]
后台form组件调用：
$form->editormd('markdown');
编辑器有时会显示不全，刷新一下，laravel-admin的坑
解析markdown语法
editor.md作为后台编辑器不错，但缺少在服务端将md转为html的方法，官方文档的示例是在前端用js进行转化，这种方式会导致页面闪烁且加载缓慢，源码是md格式，也不利于搜索引擎优化
因此，改用其他扩展在服务端进行转化
安装：GrahamCampbell/Laravel-Markdown
$ composer require graham-campbell/markdown
$ php artisan vendor:publish
生成 config/markdown.php 文件
该扩展不支撑渲染表格，需要另外安装插件
安装webuni/commonmark-table-extension用于渲染表格
$ composer require webuni/commonmark-table-extension
在 config/markdown.php 的 extensions 中加入扩展：
'extensions' => [
Webuni\CommonMark\TableExtension\TableExtension::class,
],
后台提交数据后，在入库之前，将markdown转为html
use GrahamCampbell\Markdown\Facades\Markdown;
# ...
class Article {
public static function boot()
{
parent::boot();
static::saving(function ($article) {
$article->content = Markdown::convertToHtml($article->markdown);
});
}
}
数据表用markdown字段存储markdown原数据，content字段存储转化的html数据
样式美化
将github-markdown-css下载到本地
由于该样式都是以.markdown-body开头，因此在视图中须给外层div加这个类名
<div class="markdown-body">
{!! $article->content !!}
</div>
代码高亮
代码高亮的插件有很多, highlightjs官网太丑了，看着就像是上世纪九十年纪的风格，审美上就不想用它。
prismjs是个不错的选择，代码体积也小
在官网选择要支持的语言，然后下载相应的js与css到本地，在视图中引用
<link rel="stylesheet" href="/prism/prism.css">
<script src="/prism/prism.js"></script>
转载必须注明出处：https://www.zhiqiexing.com/119.html
