## 一、序言 开源插件[markdown编辑器](http://pandao.github.io/editor.md/)【http://pandao.github.io/editor.md/】。 估计大家使用博客的时候对文章内容编辑头很大，对于代码高亮、格式调整、多平台兼容（csdn，简书，githup）等功能，传统的富文本虽然也很强大，但是完成这些功能似乎不太完美，而且markdown因为它的简约，扁平化，强大的多平台，极简的代码语言越来越受大家的喜爱。这里向大家推荐一个免费开源的插件，能将markdown这款强大的编辑器嵌入到自己的博客。 ## 二、嵌入editormd 我这里是使用了widget小部件，里面有部分php模板代码，而且是采用批量加载css形式，如果你选择的不是这种，只需要正常引入js和css，然后实例化就好了。注意阅读注释！ ```js <link rel="stylesheet" href="/static/widget/admin/editor/markdown/css/editormd.css" /> <script type="text/javascript"> var arr = [ static_root + 'widget/admin/editor/markdown/editormd.js', ]; ob.loadMultiScripts(arr).done(function() { var editor_{$widget_data.name}; editor_{$widget_data.name} = editormd("{$widget_data.name}", { width : "100%", height : 640, syncScrolling : "single", path : static_root + 'widget/admin/editor/markdown/lib/', saveHTMLToTextarea : true,//这个配置，方便post提交表单，表单字段会自动加上一个字段content-html-code,形式为html格式 /**上传图片相关配置如下*/ imageUpload : true, imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL : "{:url('widget/editormdPictureUpload')}",//注意你后端的上传图片服务地址 }); }).fail(function(){ alert('editormd加载失败...'); }); </script> ``` 1. 如果你需要html格式的数据，那么`saveHTMLToTextarea`要设置成`true`,这样会在post提交数据中出现content-html-code,如下所示，content必须要存，编辑时需要用来回显。我这里存的是html到文章内容，因为我网站有三种编辑器可以选择编辑文章，具体设计可根据需求来。 ```json name: 测试 category_id: 9 describe: cover_id: 0 img_ids: file_id: 0 tagids: content: # 一级标题 content-html-code: <h1 id="h1-u4E00u7EA7u6807u9898"><a name="一级标题" class="reference-link"></a><span class="header-link octicon octicon-link"></span>一级标题</h1> editor_type: 1 sort: 0 is_top: 0 id: 0 ``` 2. 图片上传，加入实例代码中的三项配置就好`imageUpload `、`imageFormats `、`imageUploadURL `,这里就不贴后台代码，我用的php，$_FILES['editormd-image-file']就会有值了，然后自行用后台语言处理，editormd是希望我们返回这样的代码格式： ```json //期望返回值 { success : 0 | 1, //0表示上传失败;1表示上传成功 message : "提示的信息", url : "图片地址" //上传成功时才返回 } ``` 3. 到此为止我们网站就可以集成markdown编辑器了。效果图如下：  ## 三、博客文章内容页显示 这是官网提供方式进行显示，目前能满足需求，像代码高亮，流程图，表情等都能显示正常。 这里有两种方式显示内容。 1. 我们取出的html内容！使用markdown的css 并在外层容器加入`markdown-body editormd-html-preview`这两个类，文字效果样式什么的都会显示，代码再用hightlight.js加载成高亮样式。 > 这样的形式加载快，页面几乎没缓冲，缺点的是markdown部分功能无法使用，流程图和其他功能 2. 我们取出markdown标记语言！直接用editormd渲染，如下代码就是这种方法，也是笔者推荐。 > 功能强大，但是渲染过程会有样式一直在蹿的过程，持续0.5s内（根据服务器和客户端网速而定） ```html <article class="article-content" id="article-content"> {if condition="$article_info.editor_type eq 1"} <link rel="stylesheet" href="/static/widget/admin/editor/markdown/css/editormd.preview.css" /> <textarea style="display:none;" placeholder="markdown语言">{$article_info.content_md}</textarea> <script src="/static/widget/admin/editor/markdown/lib/marked.min.js"></script> <script src="/static/widget/admin/editor/markdown/lib/prettify.min.js"></script> <script src="/static/widget/admin/editor/markdown/lib/raphael.min.js"></script> <script src="/static/widget/admin/editor/markdown/lib/underscore.min.js"></script> <script src="/static/widget/admin/editor/markdown/lib/sequence-diagram.min.js"></script> <script src="/static/widget/admin/editor/markdown/lib/flowchart.min.js"></script> <script src="/static/widget/admin/editor/markdown/lib/jquery.flowchart.min.js"></script> <script src="/static/widget/admin/editor/markdown/editormd.js"></script> <script> $(function() { var testEditormdView2; testEditormdView2 = editormd.markdownToHTML("article-content", { htmlDecode : "style,script,iframe", // you can filter tags decode emoji : true, taskList : true, tex : true, // 默认不解析 flowChart : true, // 默认不解析 sequenceDiagram : true, // 默认不解析 }); }); </script> {else /} <pre><code class="php">echo 111</code></pre> {:html_entity_decode($article_info['content'])} <link rel="stylesheet" href="/static/module/resource/highlight/src/styles/default.css"> <script src="/static/module/resource/highlight/src/highlight.js"></script> <script>hljs.initHighlightingOnLoad();</script> {/if} <p class="article-copyright hidden-xs">未经允许不得转载：<a href="{:url('index/index')}">张浩博客</a> » <a href="{:url('article/detail',['id'=>$article_info['id']])}">{$article_info.name}</a></p> </article> ``` ## 四、总结 平时简介的代码和样式规范的文章一样重要，有了markdown我就可以丢弃鼠标，不担心样式问题，直接用简洁的标记语言专注书写核心代码。 所以我看到csdn、简书、git上都用上了markdown，我就不需要不断调格式了，一篇文章多平台发布，自己搭建的博客怎么能少了这样的神器呢，快让自己的博客也加上markdown编辑器吧！ > 欢迎关注我的博客 [www.zhanghao520.com](http://www.zhanghao520.com > "www.zhanghao520.com")，更多技术问题一起研究！ 未经允许不得转载：张浩博客 » 个人博客嵌入MarkDown编辑器
评论前必须登录！
立即登录 注册