[关闭]
@kexinWeb 2017-02-21T15:41:58.000000Z 字数 6257 阅读 4734

使用editor.md作为后台富文本编辑器以及前台Markdown文档展示

editor.md 富文本编辑器


写在前面

当后台需要插入富文本编辑器的时候,editor.md是一个不错的选择,它是一款开源的md编辑器,编写简单,风格简洁美观,非常适合编写技术文档。

整个流程

1.下载安装

2.基本研究思路

不感兴趣的可以直接跳到实战部分

a.打开项目文件件下面的examples文件夹中的full.html或者use-zepto文件

此处输入图片的描述
此处输入图片的描述

可以看到需要引入的css和js文件如下:

  1. <link rel="stylesheet" href="css/style.css" />
  2. <link rel="stylesheet" href="../css/editormd.css" />
  3. <script src="js/jquery.min.js"></script>
  4. <script src="../editormd.js"></script>

editor.md的基本配置项以及可以使用的函数:

  1. <script type="text/javascript">
  2. var testEditor;
  3. $(function() {
  4. $.get('test.md', function(md){
  5. testEditor = editormd("test-editormd", {
  6. width: "90%",
  7. height: 740,
  8. path : '../lib/',
  9. theme : "dark",
  10. previewTheme : "dark",
  11. editorTheme : "pastel-on-dark",
  12. markdown : md,
  13. codeFold : true,
  14. //syncScrolling : false,
  15. saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
  16. searchReplace : true,
  17. //watch : false, // 关闭实时预览
  18. htmlDecode : "style,script,iframe|on*", // 开启 HTML 标签解析,为了安全性,默认不开启
  19. //toolbar : false, //关闭工具栏
  20. //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮,默认开启
  21. emoji : true,
  22. taskList : true,
  23. tocm : true, // Using [TOCM]
  24. tex : true, // 开启科学公式TeX语言支持,默认关闭
  25. flowChart : true, // 开启流程图支持,默认关闭
  26. sequenceDiagram : true, // 开启时序/序列图支持,默认关闭,
  27. //dialogLockScreen : false, // 设置弹出层对话框不锁屏,全局通用,默认为true
  28. //dialogShowMask : false, // 设置弹出层对话框显示透明遮罩层,全局通用,默认为true
  29. //dialogDraggable : false, // 设置弹出层对话框不可拖动,全局通用,默认为true
  30. //dialogMaskOpacity : 0.4, // 设置透明遮罩层的透明度,全局通用,默认值为0.1
  31. //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色,全局通用,默认为#fff
  32. imageUpload : true,
  33. imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
  34. imageUploadURL : "./php/upload.php",
  35. onload : function() {
  36. console.log('onload', this);
  37. //this.fullscreen();
  38. //this.unwatch();
  39. //this.watch().fullscreen();
  40. //this.setMarkdown("#PHP");
  41. //this.width("100%");
  42. //this.height(480);
  43. //this.resize("100%", 640);
  44. }
  45. });
  46. });
  47. $("#goto-line-btn").bind("click", function(){
  48. testEditor.gotoLine(90);
  49. });
  50. $("#show-btn").bind('click', function(){
  51. testEditor.show();
  52. });
  53. $("#hide-btn").bind('click', function(){
  54. testEditor.hide();
  55. });
  56. $("#get-md-btn").bind('click', function(){
  57. alert(testEditor.getMarkdown());
  58. });
  59. $("#get-html-btn").bind('click', function() {
  60. alert(testEditor.getHTML());
  61. });
  62. $("#watch-btn").bind('click', function() {
  63. testEditor.watch();
  64. });
  65. $("#unwatch-btn").bind('click', function() {
  66. testEditor.unwatch();
  67. });
  68. $("#preview-btn").bind('click', function() {
  69. testEditor.previewing();
  70. });
  71. $("#fullscreen-btn").bind('click', function() {
  72. testEditor.fullscreen();
  73. });
  74. $("#show-toolbar-btn").bind('click', function() {
  75. testEditor.showToolbar();
  76. });
  77. $("#close-toolbar-btn").bind('click', function() {
  78. testEditor.hideToolbar();
  79. });
  80. $("#toc-menu-btn").click(function(){
  81. testEditor.config({
  82. tocDropdown : true,
  83. tocTitle : "目录 Table of Contents",
  84. });
  85. });
  86. $("#toc-default-btn").click(function() {
  87. testEditor.config("tocDropdown", false);
  88. });
  89. });
  90. </script>

对于配置项只说明一点,就是主题theme的设置:

打开同一目录下的theme.html(用浏览器打开),这时候你可以看到不同主题的呈现效果,选定你想要的主题,对配置项进行相应的修改。

例如我修改的配置项如下:

  1. theme : "default",
  2. previewTheme : "default",
  3. editorTheme : "base16-light",

对于函数,只有两个函数与我们的需求相关,那就是getHtml()还有getMarkDown()函数,这两个函数是否符合我们的需求的,让我们接下来再看:

b.用浏览器打开use-zepto.html文件(由于full.html在非php环境中打开会出错,原因在于 $.get('test.md', function(md){});

在左边的编辑器里面编辑:(注意:要有TOC还有代码高亮区!)
此处输入图片的描述

然后点击Get Html按钮,仔细观察alert内容(建议把alert改为console.log,方便对比)

打开开发者工具,定位到preview区
此处输入图片的描述

然后发现,你想要的html代码跟getHtml()得到的代码不一样!!!

那么关键点就在于获取容器editormd-preview-container里面的html代码了。

3.开始实战

此处输入图片的描述

  1. <link rel="stylesheet" href="css/style.css" />
  2. <link rel="stylesheet" href="../css/editormd.css" />
  3. <script src="js/zepto.min.js"></script>
  4. <script src="../editormd.js"></script>
  1. <div id="layout">
  2. <div class="editormd" id="test-editormd">
  3. <textarea></textarea>
  4. </div>
  5. <br/><input id="submit" type="button" name="submit" value="Submit" class="btn" style="margin-left: 5%;" />
  6. <button id="preview-btn">Preview HTML (Press Shift + ESC cancel)</button>
  7. </div>

js部分
新建一个editormd对象:

  1. testEditor = editormd();

editormd的配置项如下:

  1. testEditor = editormd("test-editormd", {
  2. width: "90%",
  3. height: 740,
  4. path : '../lib/',
  5. theme : "default",
  6. previewTheme : "default",
  7. editorTheme : "base16-light",
  8. codeFold : true,
  9. //syncScrolling : false,
  10. saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
  11. searchReplace : true,
  12. //watch : false, // 关闭实时预览
  13. htmlDecode : "style,script,iframe|on*", // 开启 HTML 标签解析,为了安全性,默认不开启
  14. //toolbar : false, //关闭工具栏
  15. //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮,默认开启
  16. emoji : true,
  17. taskList : true,
  18. tocm : true, // Using [TOCM]
  19. tex : true, // 开启科学公式TeX语言支持,默认关闭
  20. flowChart : true, // 开启流程图支持,默认关闭
  21. sequenceDiagram : true, // 开启时序/序列图支持,默认关闭,
  22. //dialogLockScreen : false, // 设置弹出层对话框不锁屏,全局通用,默认为true
  23. //dialogShowMask : false, // 设置弹出层对话框显示透明遮罩层,全局通用,默认为true
  24. //dialogDraggable : false, // 设置弹出层对话框不可拖动,全局通用,默认为true
  25. //dialogMaskOpacity : 0.4, // 设置透明遮罩层的透明度,全局通用,默认值为0.1
  26. //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色,全局通用,默认为#fff
  27. imageUpload : true,
  28. imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
  29. imageUploadURL : "./php/upload.php",
  30. onload : function() {
  31. console.log('onload', this);
  32. //this.fullscreen();
  33. //this.unwatch();
  34. //this.watch().fullscreen();
  35. //this.setMarkdown("#PHP");
  36. //this.width("100%");
  37. //this.height(480);
  38. //this.resize("100%", 640);
  39. }
  40. });

submit函数用于获取html代码和markdown源代码:

  1. document.getElementById("submit").onclick = function(){
  2. let htmlCode = document.getElementsByClassName("editormd-preview-container")[0].innerHTML;
  3. let mdCode = testEditor.getMarkdown();
  4. console.log(htmlCode);
  5. }

模拟用户从数据库拿到md源代码,可以修改文章:

  1. document.getElementsByTagName('textarea')[0].innerHTML = "##HELLO keke";
  1. <div class="markdown-body editormd-preview-container"></div>

模拟从后台获取数据

编辑后台管理(admin.html)md编辑器,按submit按钮,把控制台打印出来的代码贴到(user.html)markdowm-body标签里面:

  1. <div class="markdown-body editormd-preview-container">
  2. <h2 id="h2-kek"><a name="kek" class="reference-link"></a><span class="header-link octicon octicon-link"></span>kek</h2><p>Wad</p>
  3. <div class="markdown-toc editormd-markdown-toc"><ul class="markdown-toc-list"><li><a class="toc-level-2" href="#kek" level="2">kek</a><ul></ul></li></ul></div><pre class="prettyprint linenums prettyprinted"><ol class="linenums"><li class="L0"><code class="lang-javascript"><span class="kwd">var</span><span class="pln"> i </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span></code></li></ol></pre>
  4. </div>

浏览器打开,成功!

此处输入图片的描述

源代码地址:https://github.com/kexinWeb/editor.md-keke.git

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注