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简单应用。