在网站中使用markdown编辑器

官网地址 editor.md

在后台使用

1. 引入css

<link rel="stylesheet" href="***/editor.md/css/editormd.min.css">

2.创建textarea

<div id="test-editor">
<textarea rows="10" name="content" style="display:none;"></textarea>
</div>

3.js代码

 <script src="***/editor.md/editormd.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var editor = editormd("test-editor", {
                path   : "/vendor/editor.md/lib/",
                // imageUpload: true,
                // imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                // imageUploadURL: "/photos",
                // saveHTMLToTextarea: false,//获得html
                // emoji: true,//表情
                // htmlDecode: "style,script,iframe|on*",
                // width: "100%",
                // height: "740",
            });
        });
    </script>

在前台显示

1.引入css

<link rel="stylesheet" href="/vendor/editor.md/css/editormd.min.css">
<link rel="stylesheet" href="/vendor/editor.md/css/editormd.preview.min.css">

2.创建内容

<textarea id="content" style="display:none;">数据库读取的内容</textarea>
<div id="markDownContent">
<textarea id="appendContent"></textarea>
</div>

3.加载js

<script src="/vendor/editor.md/lib/marked.min.js"></script>
<script src="/vendor/editor.md/lib/prettify.min.js"></script>
<script src="/vendor/editor.md/lib/raphael.min.js"></script>
<script src="/vendor/editor.md/lib/underscore.min.js"></script>
<script src="/vendor/editor.md/lib/sequence-diagram.min.js"></script>
<script src="/vendor/editor.md/lib/flowchart.min.js"></script>
<script src="/vendor/editor.md/lib/jquery.flowchart.min.js"></script>
<script src="/vendor/editor.md/editormd.min.js"></script>

4.实例化

<script type="text/javascript">
 function mdToHml(){
            //获取需要转换的内容
            var content=$("#content").val();
            $("#appendContent").val(content);
            //转换开始,第一个参数是上面的div的id
            editormd.markdownToHTML("markDownContent", {
                htmlDecode: "style,script,iframe", //可以过滤标签解码
                emoji: true,
                taskList:true,
                tex: true,               // 默认不解析
                flowChart:true,         // 默认不解析
                sequenceDiagram:true,  // 默认不解析
            });
        }
        mdToHml();
    </script>

上传图片

参数开启图片上传

<script type="text/javascript" src="/vendor/admin/editor.md/editormd.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var editor = editormd("editor", {
                // width: "100%",
                height: "200px",
                // markdown: "xxxx",     // dynamic set Markdown text
                path : "/vendor/admin/editor.md/lib/",  // Autoload modules mode, codemirror, marked... dependents libs path
                saveHTMLToTextarea : true,

                imageUpload    : true,
                imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL : "/admin/upload/markDownImage",
            });
        });
    </script>

注册可选参数路由

Route::post('markDownImage/{guid?}', 'UploadController@markDownImage')->name('markDownImage');

重新编辑上传图片方法

 //markdown编辑器上传图片
    public function markDownImage(Request $request)
    {
        $file = $request->file('editormd-image-file');
        $filepath = $file->store('', 'qiniu');
        if ($filepath) {
            $url = Storage::disk('qiniu')->Url($filepath);
            return $json=['success'=>1,'url'=>$url];
        }
        return $json = ['success' => 0, 'msg' => '上传图片失败'];
    }

中间件排除csrf验证

protected $except = [
   '/admin/upload/markDownImage'
   ];