edit.md编辑器整合步骤

1. 下载editor.md的插件文件

请到我上传的下载资源中,下载 “editormd资源”进行下载

2. 在需要加载插件的界面中,导入相关JS+CSS依赖

    <link rel="stylesheet" href="plugins/editormd/css/editormd.css"/>
    <script src="plugins/editormd/jquery.min.js"></script>
    <script src="plugins/editormd/editormd.min.js"></script>

3. 在界面中,添加如下标签,用于显示编辑器位置

<body>
<div id="test-editormd">
    <textarea id="content" style="display:none;"></textarea>
</div>
</body>

4. 编写JS方法,对编辑器进行初始化

var testEditor;
    $(function () {
        testEditor = editormd("test-editormd", {//加载编辑器外部div的ID值
            width: "100%",//设置编辑器的宽度
            height: 640,
            syncScrolling: "single",
            saveHTMLToTextarea: true,//是否以html格式存储
            imageUpload: true,//图片上传功能
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/markdown/uploadImage.action",//发起存储后台请求
            path: "plugins/editormd/lib/",
            toolbarIcons: function () {
                return ["undo", "redo", "|", "bold", "italic", "quote", 
                "uppercase", "lowercase", "|", "h1", "h2", "h3", "h4", "|", 
                "link", "image", "code", "code-block", "|", "watch", "preview", 
                "fullscreen", "clear"]
            }
        });
    });

5. 示例运行的最终效果

edit.md编辑器整合步骤