thinkphp5 editor.md 如何使用

本身连续一段时间都在整理js的知识的,后来在项目中要用到markdown,所以又跑来研究markdown了,沿用小袁同学的处理方式,采用了editor.md插件

本身连续一段时间都在整理js的知识的,后来在项目中要用到markdown,所以又跑来研究markdown了,沿用小袁同学的处理方式,采用了editor.md插件>的处理方式,采用了editor.md插件

在百度上参考了诸多教程,发现都是每个写一截,要拼凑起来才能得到准确的使用方案,所以,我特意拼凑后再写成笔记,以供参考。

我是用thinkphp5 来开发公司官方网站的后台的,产品内容这块非常合适使用markdown来存储数据,所以呢,就起心开始搞。
1、准备东西哇
到github去下载最新的插件版本
2、把插件解压后抽出要用的文件放进公共插件库
这里是我存放的路径
我把他存到 public/static/lib

注意画红框的就是插件目录
3、引入css文件及js文件


上面我就不解释了,我要在add.html中使用markdown 我就在add.html中引入,为什么呢?
自己猜去吧!
如果你不用的地方也加载进去的话,势必会影响loading的速度,你是想快点呢还是想慢点呢?
4、在想要用markdown的地方加上容器,我这个功能就加了两个
这里引申的知识是在一个页面里实例化多个markdown编辑器
待会我解释实例化时再来说多个编辑器如何处理。


嗯,其实刚开始我还想把Html和markdown一起存的,后来我的同事小袁说,没必要,你存储了markdown,给前端去渲染,还好点。
a、实例化时 他的name值可以随便改
b、不需要自己写得自己都搞不明白了,要简洁

<div id="features">
      <textarea name='features' style="display:none;"></textarea>
</div>

这样就够了
5、实例化markdown,一听见实例化 是不是就心里嘚了一下?其实很简单的

var Editor;
    $(function () {
        Editor = editormd("content", {
            width: "100%",  //宽度设置
            height: 320,    //高度设置
            path: "__STATIC__/lib/markdown/lib/",   //这个东西很重要,他是指插件的库目录,如果不设置,他会出几个东西找不到的
            htmlDecode: "style,script,iframe", //这个是过滤掉的标签
            tex: true,
            emoji: true,
            taskList: true,
            flowChart: true,
            sequenceDiagram: true,
            saveHTMLToTextarea: true,
            markdown : "##在这里尽情的书写你娴熟的markdown吧",  //这个吧,你刚开始实例化时他会有个默认的英文的默认输入 :`Enjoy Markdown! coding now ···`
        });


参考文献

相关文章