simplemde 使用+php获取html

一款好用的markown编辑器——simpleMDE

---

安装和引入

安装编辑器

$ npm install simplemde --save

下载font-awesome

因为simplemde使用的图标来自于font-awesome：http://www.bootcss.com/p/font-awesome/

引入

在需要引入的模板文件里

<link rel="stylesheet" href=" {{ asset('css/font-awesome.min.css') }} " /> <link rel="stylesheet" href="http://localhost/blog/node_modules/simplemde/debug/simplemde.css" /> <script src="http://localhost/blog/node_modules/simplemde/debug/simplemde.js"></script>

部署DOM和编辑器初始化

html代码

这<div class="form-group"> <label for="exampleInputPassword1">文章内容</label> <textarea name="article" id="fieldTest" cols="30" rows="10"></textarea> </div>

js代码

var simplemde = new SimpleMDE({ element: document.getElementById("fieldTest"), autoDownloadFontAwesome: false, status: false });

如果你完成了上面的步骤，刷新页面应该会看到这个东西：

后台获取html

这里使用的是的一个工具HyperDown，下载链接：https://github.com/SegmentFault/HyperDown git clone 的方式下载下来 就一个parse文件，将该文件放在app 下的Helper里 （别忘了改namespace） 在后台控制器中执行以下代码

$parser = new Parser; $html = $parser->makeHtml($request->article);

即可完成转换，之后想怎么干随便你啦

美化html

你会发现，获取出来的HTML，不好看！诶，我已经帮你们从github那里偷了个css回来了，拿去用便是。使用方法：

$ npm install github-markdown-css --save

在显示的地方引入

<link rel="stylesheet" href="http://localhost/blog/node_modules/github-markdown-css/github-markdown.css" />

在输出的地方加个class .markdown-body

@foreach($articles as $art) <div class="markdown-body"> {!! $art->article !!} </div> <br/> @endforeach

到此完成simplemde简单应用。