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