当前位置 知且行 php laravel集成markdown编辑器 下一篇:

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.phpextensions 数组中添加配置:

'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.phpextensions 中加入扩展:

    '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

关于我

我希望能成为一个认真、有趣、创造更多价值的人
关注微信
微信扫一扫关注我

微信扫一扫关注我

返回顶部