纠结的markdown编辑器集成记

一开始,我觉得在laravel集成markdown编辑器是一件很容易的事,毕竟程序员离不开markdown,laravel作为应用最广泛的php框架,自然有很多优秀的markdown扩展。一路折腾下来,却依然遇到不少坑

laravel-admin集成

使用Simplemde编辑器扩展包,跟着文档,两分钟就能完成

效果如下:

simplemd

解析markdown为html

接下来需要将提交的markdown内容解析为html,首先选择的是 Laravel-Markdown, 虽然调用很简单,遗憾的是没找到如何生成TOC目录的功能,而这个功能是我所不能舍弃的。转而使用 SegmentFault/HyperDown, 这个扩展的说明文档写得挺牛逼的,让人觉得是综合了其他markdown解析器的优点。于是兴冲冲地找了别人封装好的laravel版本 HavenShen/enjelly-down,但是,依然无法解析TOC

至此,已经感到很沮丧了,难道要自己去提取h标签生成目录?这未免显得太笨拙了。抱着最后一丝希望,到SegmentFault/HyperDown的issue中搜索toc, 天可怜见,有相关的结果:

toc结果

真的有人在其基础上增加了解析目录的功能,只不过并没有被合并到仓库,估计这个仓库已经没人打理了...

赶紧将推送的代码文件 ParserToc.php 进行替换,然后测试,成功了!

toc生成目录

由于 vendor/havenshen/enjelly-down/src/Librarys/Parser.php 属于忽略文件,要移植代码时,记得要重新覆盖此文件 Parser.php

前端样式美化

前端在输出markdown转化的html时,要将内容包裹在类名为markdowndiv中, 如:

<div class="markdown">
    {!! $article->content_html !!}
</div>

引入以下css和js:

<link rel="stylesheet" href="/static/css/markdown.css">
<link rel="stylesheet" href="/static/css/monokai-sublime.min.css">
<script src="/static/js/highlight.min.js"></script>

调用语法高亮:

<script>
    hljs.initHighlightingOnLoad();
</script>

总结

如此折腾,终于将markdown的前后端解析功能都完成,虽总感觉处理的方式很蹩脚,好歹能先用起来了

转载必须注明出处:https://www.zhiqiexing.com/77.html

关于我

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

微信扫一扫关注我

返回顶部