editormd 编辑器使用

下载完成后引入

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
 <script src="./lib/editor.md-master/editormd.js"></script>
 <link rel="stylesheet" href="./lib/editor.md-master/css/editormd.css">

THML 部分

• 注意文件上传 写的是接口地址 然后接口负责文件移动

<div class="panel-body">
     <div id="test-editormd"  style="">
     <textarea class="editormd-html-textarea" name="text"></textarea>
       </div>
</div>
<script>
    var testEditor1;
    testEditor1 = editormd("test-editormd", {
            placeholder:'',  //默认显示的文字，这里就不解释了
            width: "100%",
            height:  document.documentElement.clientHeight-100,
            syncScrolling: "single",  
            path: "./lib/editor.md-master/lib/",   //你的path路径（原资源文件中lib包在我们项目中所放的位置）
            watch : true, 
            autoFocus : false,
            emoji : true,
            saveHTMLToTextarea : true,
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "png", "bmp", "webp"],
            imageUploadURL : "./api/upload_api.php",//注意你后端的上传图片服务地址
            // editorTheme: "pastel-on-dark",
            // theme: "gray",
            // previewTheme: "dark",
            tex: true,
            toolbarIcons : function() {  //自定义工具栏，后面有详细介绍
                return editormd.toolbarModes['full']; // full, simple, mini
            },

        });
</script>
------------------------------json返回的格式
if($file) {
    $data = [
        'success' => 1,           // 0 表示上传失败，1 表示上传成功
        'message' => "上传成功",
        'url'     => $url        // 上传成功时才返回
    ];
    echo json_encode($data,JSON_UNESCAPED_UNICODE);
    die;
} else {
    $data = [
        'success' => 0,           // 0 表示上传失败，1 表示上传成功
        'message' => "上传失败",
    ];
    echo json_encode($data,JSON_UNESCAPED_UNICODE);
   die;
}

关于表情 图片不显示的问题

-先下载emoji表情包 放在 editor.md-master/plugins/emoji-dialog

• 修改editormd.js文件 改成http路径 要么不显示

 editormd.emoji = {
        path  : "http://localhost/6-26gongxiang/emoji/",
        ext   : ".png"
    };

HTML 显示

引入

    <link rel="stylesheet" href="./lib/editor.md-master/css/editormd.css" />
    <script src="./lib/editor.md-master/lib/flowchart.min.js"></script>
    <script src="./lib/editor.md-master/lib/jquery.flowchart.min.js"></script>
    <script src="./lib/editor.md-master/lib/marked.min.js"></script>
    <script src="./lib/editor.md-master/lib/prettify.min.js"></script>
    <script src="./lib/editor.md-master/lib/raphael.min.js"></
    <script src="./lib/editor.md-master/lib/underscore.min.js"></script>
    <script src="./lib/editor.md-master/editormd.min.js"></script>
 <!--  ---------------注意这个坑 写在上面就报错-------------- -->
  <script src="./lib/editor.md-master/lib/sequence-diagram.min.js"></script>

HTML

        <div id="doc-content">
            <textarea style="display:none;">
              <?= $res_content[0]['content'] ?>        <!--${content/}为获取后台的md格式内容。-->
            </textarea>
        </div>
<script>
        var testEditor;
        $(function () {
            testEditor = editormd.markdownToHTML("doc-content", {//注意：这里是上面DIV的id
                htmlDecode: "style,script,iframe",
                emoji: true,
                taskList: true,
                tex: true, // 默认不解析
                flowChart: true, // 默认不解析
                sequenceDiagram: true, // 默认不解析
                codeFold: true,
        });
});
</script>

添加目录TOC

<div class="markdown-body editormd-preview-container" id="custom-toc-container" previewcontainer="false">
</div>


<script>  
 testEditor.config({
                        tocContainer  : "#custom-toc-container",
                        tocDropdown   : true,
                        tocTitle      : "目录 Table of Contents dsfsadfsfdsdf",
                    });
</script>