Java集成editor.md开发markdonw程序使用的坑

标题记录一次使用editor.md开发markdonw遇到的无形大坑：

先说一下前几天的开发需求：需要在页面上实现markdown编辑器，如下图片，其实这也没问题，但是需要富文本和markdon随时切换，这样看似问题也不大，只能说too young，随后切换时就出现了各种错误，这里我只写比较坑爹的地方。

这是我参考的博主进行的开发：参考地址
Editor.md地址

 <div id="test-editormd">
     <!--该区域内容为文字内容，非html内容-->
     <textarea name="content" id="content" style="display:none;">这是我要提交的内容</textarea>
</div>

切换时遇到的第一个坑：根据按钮切换编辑器时，其实说白了就是两个div的显示与隐藏，但由富文本切换为markdown时，会出现不显示前4行的问题，请见下图：

切换时遇到的第二个坑：由富文本改为markdown时可以清除富文本里的内容，但由markdown切换为富文本时，却清除不了上面的<textarea> 里的内容，虽然editormd.js里有setMarkdown、setValue、clear方法，实际这几个方法都是调用的同一个方法，如下

setValue : function(value) {
            this.cm.setValue(value);
            
            return this;
        },
        
setMarkdown : function(md) {
            this.cm.setValue(md || this.settings.markdown);
            
            return this;
        },
        
clear : function() {
            this.cm.setValue("");
            
            return this;
        },

但是当第一次加载后如果直接调用setValue()会报错！！！ 错误提示是not undefined，坑爹有没有。

后来没办法只能在前台动态生成markdown的编辑器，如果切换就销毁markdown，如果再切换就再生成一个markdown编辑器，后面会附上这次开发的部分代码

开发时遇到的第三个坑：从gitHub上下载的包没有表情文件夹，也可能是我下载的问题

需要在editormd.js修改路径

editormd.emoji     = {
        // path  : "http://www.emoji-cheat-sheet.com/graphics/emojis/",
        //这里是你存放emoji表情文件夹的路径
        path  : "../statics/markdown/editor.md-master/plugins/emoji-dialog/emoji/",
        ext   : ".png"
    };

下面是我这次开发的部分代码实现（前台使用的是公司自己封装好的，仅供参考）

<div class="box-body row" id="ueditor">
	<%--富文本编辑器--%>
	<pt:editor name="content" label="详细内容" value="${model.content}" ifSimple="false" required="true" />
</div>
<div class="box-body row" id="markdown">
	<!--markdown编辑器-->
	<c:if test="${model.editorType== 'MARKDOWN'}">
		<div class="pt-editor-title col-sm-12 col-md-12">详细内容</div>
		<div id="test-editormd"><textarea name="content" style="display:none;">${model.content}</textarea></div>
	</c:if>
</div>

<script type="text/javascript">
	var testEditormd ;//markdown显示
    var ifMarkdown=false;
    
    $(document).ready(function () {
		if ($("input[name=editorType]:checked").val() == "MARKDOWN"){
            if (!$("#markdown").html()) {
                $("#markdown").append("<div id=\"test-editormd\"><textarea name=\"content\" style=\"display:none;\"></textarea></div>");
            }
            $.getScript("${ctxStaticUrl}/statics/markdown/editor.md-master/js/editormd.js", function() {
            //这里的test-editormd为上面的markdown的div的id值
				testEditormd = editormd("test-editormd", {
					width: "100%",
					height: 540,
                    // saveHTMLToTextarea : true, // 保存 HTML 到 Textarea，true表示转化为html格式的内容也同样提交到后台
					path : '/statics/markdown/editor.md-master/lib/',
                    imageUpload : true,
                    emoji: true,
                    imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                    imageUploadURL : "${ctxStaticUrl}/help/editormdPic.do?id="+$("#id").val(),//markdown上传图片的地址
					//上传图片成功后可以做一些自己的处理
					/*onload: function () {
					this.watch();
					this.width("100%");
					this.height(480);
					},*/
				});
			});
            ifMarkdown=true;
        }
		
		//文本框改变,分别隐藏和显示富文本和markdown对应的div
	    $("input[name=editorType]").each(function(index , item){
	        $(item).on("click", function () {
	            uditorOrMarkdownChange();
	        })
	    })

		// 是否插入视频点击事件ifVideoClick
		function ifVideoClick(value) {
			if (eval(value)) {
				$(".video-content").show();
		        //把编辑器改为editor,且只读
		        $("input[name=editorType][value=EDITOR]").prop("checked", "checked");
		        //注意：这里改为disabled的,后台是接收不到这个值的，需要接收的自己注意
		        $("input[name=editorType]").attr("disabled","disabled");
		        //显示uditor的div,隐藏markdown的div
			}else {
				$(".video-content").hide();
		        //不添加视频,将编辑器只读属性移除
		        $("input[name=editorType]").removeAttr("disabled");
		        //清除vedioFiledId和vedioAppId width和height设为空
				mini.get("videoFileId").setValue('');
				mini.get("videoAppId").setValue('');
				mini.get("videoWidth").setValue('');
				mini.get("videoHeight").setValue('');
		
		        var content = umcontent.getContent();
		        umcontent.setContent(content.replace(video_tag, ''))
			}
		    //显示文本框的div
		    uditorOrMarkdownChange();
		}

		//显示/隐藏 富文本和markdown的div
		function uditorOrMarkdownChange() {
		    if ($("input[name=editorType]:checked").val() != "MARKDOWN"){
		        //显示富文本的div,隐藏markdown
		        $("#ueditor").show();
		        if (ifMarkdown){
		            testEditormd.editor.remove();
		            $("#markdown").html('');
		            ifMarkdown=false;
				}
		
		    }else {
		        if (!ifMarkdown){
		            $.getScript("${ctxStaticUrl}/statics/markdown/editor.md-master/js/editormd.js", function() {
		                $("#markdown").html('').append("<div class=\"pt-editor-title col-sm-12 col-md-12\">详细内容</div><div id=\"test-editormd\"><textarea name=\"content\" style=\"display:none;\"></textarea></div>");
		                testEditormd = editormd("test-editormd", {
		                    width: "100%",
		                    height: 540,
		                    path : '/statics/markdown/editor.md-master/lib/',
		                    emoji: true,
		                    imageUpload : true,
		                    imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
		                    imageUploadURL : "${ctxStaticUrl}/help/editormdPic.do?id="+$("#id").val(),//markdown上传图片的地址
							//上传图片成功后可以做一些自己的处理
							onload: function () {
							this.watch();
							this.width("100%");
							this.height(480);
		            		},
		                });
		                ifMarkdown=true;
		            });
		        }
		
		        //显示markdown的div,隐藏富文本
		        $("#ueditor").hide();
		        //清除富文本内容
		        umcontent.setContent('');
		    }
		}

	}

</script>

代码就贴出来这么多，如果大家遇到了和我一样的需求，希望不要走那么多弯路。