thinkphp5.1整合editor.md

• 1.editor.md获取地址：

https://github.com/pandao/editor.md.git

• 2.包中文件较多 我这里只用了需要的文件

css  fonts  images languages lib  plugins  editormd.js

• 3.文件引入

<link rel="stylesheet" href="/res/editormd/css/editormd.css">
<script src="/res/admin/js/jquery-1.11.2.min.js"></script>
<script src="/res/editormd/editormd.js"></script>

• 4.js 代码

<script type="text/javascript">
    var testEditor;
    testEditor = editormd("test-editormd", {
        width: "100%",
        height: 500,
        path : '/res/editormd/lib/', //自己站点的lib目录
        theme : "gray",
        previewTheme : "dark",
        // editorTheme : "pastel-on-dark",
        markdown  : '',
        codeFold : true,
        //syncScrolling : false,
        saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
        searchReplace : true,
        watch : false,                // 关闭实时预览
        htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启    
        //toolbar  : false,             //关闭工具栏
        //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
        emoji : true,
        taskList : true,
        tocm            : true,         // Using [TOCM]
        tex : true,                   // 开启科学公式TeX语言支持，默认关闭
        flowChart : true,             // 开启流程图支持，默认关闭
        sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
        //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
        //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
        //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
        //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
        //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
        imageUpload : true,
        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        imageUploadURL : "/admin/upload/domdupload",//自己站点的上传方法 也可以用自带的
        onload : function() {
            console.log('onload', this);
        }
    });
</script>

• 5.后台php代码

    // 单图上传-editormd
    public function domdupload()
    {
        $file = request()->file('editormd-image-file');
        // $folder = input('param.folder');
        $folder = 'editormd';
        $info = $file->move('./uploads/'.$folder);
        if($info){
            $url=str_replace('\\','/',$info->getSaveName());
            $url='/uploads/'.$folder.'/'.$url;
            $result = ['success'=>1,'url'=>$url,'message'=>'上传成功'];
        }else{
            $result = ['success'=>0,'url'=>'','message'=>$file->getError()];
        }
        echo json_encode($result);
        exit();
    }

如果使用自己的上传功能需要 返回json格式的数据

• 6.编辑editor.md内容 直接添加一个 textarea

  <div id="test-editormd"><textarea><?php echo $item['details'];?></textarea></div>