markdown在项目中的使用

前瞻

本文档主要介绍editor.md的使用，editor.md是国内开发的开源项目，可以实现markdown编辑器的所有功能，editor.md真的是很强大，在博客中使用很方便

使用框架

thinkphp3.2

使用

下载editor.md
下载地址：https://git.oschina.net/pandao/editor.md
网盘地址：链接：http://pan.baidu.com/s/1gf5KIAZ 密码：8ebh
在项目中的使用
- 将下载的文档放到Public目录
  
  上面标注的几个文件很重要
后台代码

<!--文章添加页-->
<style>
    #test-editormd li{
        list-style:disc;
    }
</style>
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="__PUBLIC__/markdown/css/editormd.min.css" />
<div id="test-editormd">
                                <textarea style="display:none;">
                                </textarea>
    <!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->
    <textarea class="editormd-html-textarea" name="text"></textarea>
</div>
<script src="/Public/markdown/examples/js/jquery.min.js"></script>
<script src="__PUBLIC__/markdown/editormd.js"></script>
<script type="text/javascript">
    $(function() {
        testEditor = editormd("test-editormd", {
            width        : "100%",//宽度
            height       : 720,//高度
            // 下面三个选项是设置风格的，每个有什么风格，请看下载插件得examples/themes.html
            theme        : "lesser-dark",// 工具栏风格
            previewTheme : "dark",// 预览页面风格
            editorTheme  : "paraiso-dark",// 设置编辑页面风格
            path         : '__PUBLIC__/markdown/lib/',//这块是lib的文件路径，必须设置，否则几个样式css，js访问不到的
            flowChart : true,//控制流程图编辑
            sequenceDiagram : true,//控制时序图编辑
            taskList : true,//任务列表
            tex  : true,//科学公式
            emoji : true,//moji表情
            htmlDecode : "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启
            codeFold : true,//ctrl+q代码折叠
//                                  saveHTMLToTextarea : true,//这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。这个转换好像有些缺陷，有些配置没有生效，目前还没想到怎么解决，我这里没有用,是在前台读取的时候转换的
            imageUpload : true,//开启本地图片上传
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/index.php/Admin/News/uploadFileMark",//图片上传地址
            onload : function() {
                console.log('onload', this);
            }
        });
        //设置可以添加目录，只需要在上面一行输入 [TOCM]，就会有目录，注意下面要空一行
        testEditor.config({
            tocm : true,
            tocContainer : "",
            tocDropdown   : false
        });
    });
</script>

展示效果如下：

<!--文章修改页-->
<link rel="stylesheet" href="__PUBLIC__/markdown/css/editormd.min.css" />
<style>
    .result_content{
        list-style:circle inside;
    }
</style>
<div id="test-editormd">
                                <textarea style="display:none;">{$art['test-editormd-markdown-doc']}
                                </textarea>
</div>
<script src="/Public/markdown/examples/js/jquery.min.js"></script>
<script src="__PUBLIC__/markdown/editormd.js"></script>
<script type="text/javascript">
    $(function() {
        testEditor = editormd("test-editormd", {
            width        : "100%",//宽度
            height       : 720,//高度
            // 下面三个选项是设置风格的，每个有什么风格，请看下载插件得examples/themes.html
            theme        : "lesser-dark",// 工具栏风格
            previewTheme : "dark",// 预览页面风格
            editorTheme  : "paraiso-dark",// 设置编辑页面风格
            path         : '__PUBLIC__/markdown/lib/',//这块是lib的文件路径，必须设置，否则几个样式css，js访问不到的
            flowChart : true,//控制流程图编辑
            sequenceDiagram : true,//控制时序图编辑
            taskList : true,//任务列表
            tex  : true,//科学公式
            emoji : true,//moji表情
            htmlDecode : "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启
            codeFold : true,//ctrl+q代码折叠
//                                  saveHTMLToTextarea : true,//这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。这个转换好像有些缺陷，有些配置没有生效，目前还没想到怎么解决，我这里没有用,是在前台读取的时候转换的
            imageUpload : true,//开启本地图片上传
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/index.php/Admin/News/uploadFileMark",//图片上传地址
            onload : function() {
                console.log('onload', this);
            }
        });
        //设置可以添加目录，只需要在上面一行输入 [TOCM]，就会有目录，注意下面要空一行
        testEditor.config({
            tocm : true,
            tocContainer : "",
            tocDropdown   : false
        });
    });
</script>

上面的本地图片上传地址imageUploadURL : "/index.php/Admin/News/uploadFileMark",uploadFileMark方法的代码如下:

/**
     * 本地markdown图片上传方法
     */
    public function uploadFileMark()
    {
        // 实例化上传类
        $upload = new \Think\Upload();
        // 设置附件上传大小     PHP配置文件限定(upload_max_filesize = 2M),需要修改下配置文件
        $upload->maxSize = 3145728;
//        // 设置附件上传类型
//        $upload->exts = array('jpg', 'gif', 'png', 'jpeg');
        // 设置附件上传目录
        $upload->savePath = '/Uploads/';
        //文件上传保存的根路径 (必写)
        $upload->rootPath = './Public';
        // 执行上传文件
        $info = $upload->upload();
        $fileName = trim($upload->rootPath, '.') . $info['editormd-image-file']['savepath'] . $info['editormd-image-file']['savename'];
        if( $info ){
            $msg = array('success' => 1,'message' => '上传成功!', 'url' => $fileName);
            echo json_encode( $msg );
        }else{
            $msg = array('success' => 0,'message' => '上传失败!');
            echo json_encode( $msg );
        }
    }

注意
<textarea style="display:none;"></textarea>是默认的显示mark文本的区域，默认的name值是test-editormd-markdown-doc，如果想更换content修改为<textarea name='content' style="display:none;"></textarea>即可
插入数据我就不管了，比较简单，自己弄下就可以了，我这块没有保留html，当开启saveHTMLToTextarea : true,然后在上面的<textarea style="display:none;"></textarea>下面加入<textarea name='text' style="display:none;"></textarea>打印就可以看到转换成html的内容，但是我打印的时候有些没有转换成html，所有我没有要，只是插入了test-editormd-markdown-doc，然后在前台利用editor.md自带函数markdownToHTML转换成html，这种方式当用户访问量大时，对服务器压力会大些
前台展示代码

<style>
    #content li{
        list-style:disc;
    }
</style>
<div class="newstitle">
    <h2>{$field['art_title']}</h2>
    <p><span>{:Date('Y-m-d',$field['art_time'])}</span></p>
</div>
<script src="__PUBLIC__/markdown/lib/marked.min.js"></script>
<script src="__PUBLIC__/markdown/lib/prettify.min.js"></script>
<script src="__PUBLIC__/markdown/lib/raphael.min.js"></script>
<script src="__PUBLIC__/markdown/lib/underscore.min.js"></script>
<script src="__PUBLIC__/markdown/lib/sequence-diagram.min.js"></script>
<script src="__PUBLIC__/markdown/lib/flowchart.min.js"></script>
<script src="__PUBLIC__/markdown/lib/jquery.flowchart.min.js"></script>
<script src="__PUBLIC__/markdown/editormd.js"></script>
<div id="content" class="contenttext">
    <textarea style="display:none;" name="editormd-markdown-doc">{$field['test-editormd-markdown-doc']}</textarea>

</div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        editormd.markdownToHTML("content", {
            htmlDecode      : "style,script,iframe",  // you can filter tags decode
            emoji           : true,
            taskList        : true,
            tex             : true,  // 默认不解析
            flowChart       : true,  // 默认不解析
            sequenceDiagram : true,  // 默认不解析
            tocm : true,//菜单
            tocContainer : "",
            tocDropdown   : false
        });

    })
</script>

搞定，我用的的是官网的完整示例（ https://pandao.github.io/editor.md/examples/full.html ），除了moji表情，其他都显示了，展示效果如下

如果想做什么功能，去官方示例（ https://pandao.github.io/editor.md/examples/index.html ）看效果，然后在你下载的目录里面有个examples，有对应的html，对应着添加配置文件即可
如果没弄好不行，还可以参考下其他的文档：http://blog.csdn.net/hj960511/article/details/53037618

markdown在项目中的使用

前瞻

使用框架

使用

推荐阅读更多精彩内容