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切换为富文本时，却清除不了上面的</code> 里的内容，虽然<code>editormd.js</code>里有setMarkdown、setValue、clear方法，实际这几个方法都是调用的同一个方法，如下</p> <pre><code class="prism language-java">setValue <span class="token operator">:</span> <span class="token function">function</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>cm<span class="token punctuation">.</span><span class="token function">setValue</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> setMarkdown <span class="token operator">:</span> <span class="token function">function</span><span class="token punctuation">(</span>md<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>cm<span class="token punctuation">.</span><span class="token function">setValue</span><span class="token punctuation">(</span>md <span class="token operator">||</span> <span class="token keyword">this</span><span class="token punctuation">.</span>settings<span class="token punctuation">.</span>markdown<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> clear <span class="token operator">:</span> <span class="token function">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>cm<span class="token punctuation">.</span><span class="token function">setValue</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> </code></pre> <p>但是当第一次加载后如果直接调用setValue()会报错！！！ 错误提示是not undefined，坑爹有没有。</p> <p>后来没办法只能在前台动态生成markdown的编辑器，如果切换就销毁markdown，如果再切换就再生成一个markdown编辑器，后面会附上这次开发的部分代码</p> <p><code>开发时遇到的第三个坑</code>：从gitHub上下载的包没有表情文件夹，也可能是我下载的问题<br> <a href="http://img.e-com-net.com/image/info8/d460cb3cac6a426da175a5b60c8204a7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d460cb3cac6a426da175a5b60c8204a7.jpg" alt="Java集成editor.md开发markdonw程序使用的坑_第4张图片" width="650" height="248" style="border:1px solid black;"></a><br> 需要在<code>editormd.js</code>修改路径</p> <pre><code class="prism language-java">editormd<span class="token punctuation">.</span>emoji <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token comment">// path : "http://www.emoji-cheat-sheet.com/graphics/emojis/",</span> <span class="token comment">//这里是你存放emoji表情文件夹的路径</span> path <span class="token operator">:</span> <span class="token string">"../statics/markdown/editor.md-master/plugins/emoji-dialog/emoji/"</span><span class="token punctuation">,</span> ext <span class="token operator">:</span> <span class="token string">".png"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre> <p>下面是我这次开发的部分代码实现（<code>前台使用的是公司自己封装好的，仅供参考</code>）</p> <pre><code class="prism language-java"><span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"box-body row"</span> id<span class="token operator">=</span><span class="token string">"ueditor"</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">%</span><span class="token operator">--</span>富文本编辑器<span class="token operator">--</span><span class="token operator">%</span><span class="token operator">></span> <span class="token operator"><</span>pt<span class="token operator">:</span>editor name<span class="token operator">=</span><span class="token string">"content"</span> label<span class="token operator">=</span><span class="token string">"详细内容"</span> value<span class="token operator">=</span><span class="token string">"${model.content}"</span> ifSimple<span class="token operator">=</span><span class="token string">"false"</span> required<span class="token operator">=</span><span class="token string">"true"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"box-body row"</span> id<span class="token operator">=</span><span class="token string">"markdown"</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span>markdown编辑器<span class="token operator">--</span><span class="token operator">></span> <span class="token operator"><</span>c<span class="token operator">:</span><span class="token keyword">if</span> test<span class="token operator">=</span><span class="token string">"${model.editorType== 'MARKDOWN'}"</span><span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"pt-editor-title col-sm-12 col-md-12"</span><span class="token operator">></span>详细内容<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>div id<span class="token operator">=</span><span class="token string">"test-editormd"</span><span class="token operator">></span><span class="token operator"><</span>textarea name<span class="token operator">=</span><span class="token string">"content"</span> style<span class="token operator">=</span><span class="token string">"display:none;"</span><span class="token operator">></span>$<span class="token punctuation">{</span>model<span class="token punctuation">.</span>content<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>textarea<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>c<span class="token operator">:</span><span class="token keyword">if</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> </code></pre> <pre><code class="prism language-java"><span class="token operator"><</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span><span class="token operator">></span> var testEditormd <span class="token punctuation">;</span><span class="token comment">//markdown显示</span> var ifMarkdown<span class="token operator">=</span><span class="token boolean">false</span><span class="token punctuation">;</span> $<span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span>function <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>$<span class="token punctuation">(</span><span class="token string">"input[name=editorType]:checked"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token string">"MARKDOWN"</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>$<span class="token punctuation">(</span><span class="token string">"#markdown"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> $<span class="token punctuation">(</span><span class="token string">"#markdown"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">"<div id=\"test-editormd\"><textarea name=\"content\" style=\"display:none;\">

"); } $.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("

详细内容

"); 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>

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