zoukankan      html  css  js  c++  java
  • Markdown(editormd)语法解析成HTML

      我们在一些网站中可以见到一款网页编辑器——markdown;

      这是一款功能强大的富文本编辑器,之前自己在网页上使用的时候遇到了一点点的问题,现在跟大家分享下

      在我们写了文章之后是需要将内容保存到数据库的,如果保存到数据库中要方便以后需改的话,那么需要保存成markdown语言,如果保存成html语言通过反向解析成markdown这个可能效果不是很好

      如果保存成markdown就涉及到将数据库中的数据取出后要解析成html,以下便是我的解决过程(我使用的是editormd):

      

      首先需要初始化从markdown语言转为html语言的解析器:
      
    editormd.markdownToHTML("test-editormd", {
        htmlDecode      : "style,script,iframe",  
        emoji           : true,
        taskList        : true,
        tex             : true,  // 默认不解析
        flowChart       : true,  // 默认不解析
        sequenceDiagram : true  // 默认不解析
    });
      其次就是js的引入,以下的js可以去editormd页面下载 ,地址:https://pandao.github.io/editor.md
      
    <script src="./examples/js/jquery.min.js"></script>
    <script src="lib/marked.min.js"></script>
    <script src="lib/prettify.min.js"></script>
    <script src="lib/raphael.min.js"></script>
    <script src="lib/underscore.min.js"></script>
    <script src="lib/sequence-diagram.min.js"></script>
    <script src="lib/flowchart.min.js"></script>
    <script src="lib/jquery.flowchart.min.js"></script>
    <script src="./editormd.js"></script>
      引入的顺序不能出错否则可能有些js对象不能初始化,这些js在editor.md的lib包中已经存在。
     
      还有就是上方中的"test-editormd",其实是html代码中的一个id,这个是存放md内容的
      <div id="test-editormd">
        <textarea style="display:none;" placeholder="markdown语言">#Editor.md</textarea>
        </div>
      至此,已经完成了所有的步骤,这可以使得数据库中的md数据在页面解析显示,#Editor.md是放置markdown语言的地方

     

      

  • 相关阅读:
    bzoj 3027 [Ceoi2004]Sweet——生成函数
    bzoj 3028 食物——生成函数
    JZOJ 5461 购物 —— 贪心
    JZOJ 1003 [ 东莞市选 2007 ] 拦截导弹 —— 递推
    JZOJ 1667 ( bzoj 1801 ) [ AHOI 2009 ] 中国象棋 —— DP
    洛谷 P2055 [ ZJOI 2009 ] 假期的宿舍 —— 二分图匹配
    洛谷 P3398 仓鼠找sugar —— 树链剖分
    洛谷 P1083 [ NOIP 2012 ] 借教室 —— 线段树 / 二分差分数组
    bzoj 3895 取石子 —— 博弈论
    洛谷 P1312 [ NOIP 2011 ] Mayan游戏 —— 搜索+模拟
  • 原文地址:https://www.cnblogs.com/lger/p/7518024.html
Copyright © 2011-2022 走看看