Bootstrap的Markdown Editor krajee引入与初始化

**

Bootstrap的Markdown Editor krajee 使用 Demo

**
官网地址:http://plugins.krajee.com/markdown-editor
Demo地址: https://github.com/xiaoashuo/mark-demo.git
参考链接:https://blog.csdn.net/abxn2002/article/details/50887594
引入css

        <!-- BootStrap的css -->
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
		<!-- Font Awesome 5.x图标库（检查主题以更改此内容） -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">	         <!--  Krajee Markdown编辑器主库默认样式 -->
		<link rel="stylesheet" href="css/markdown-editor.css" />
		<!-- -突出显示代码样式插件提供的JS样式 -->
		<link rel="stylesheet" href="plugins/highlight/highlight.min.css" />

引入js

     <!-- jQuery JS Library -->
	 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	
	 <!-- -如果您需要净化HTML输出，请包含DOM purify插件（只有在markdown-it HTML输入时才需要）被允许）。必须在markdown-editor.js之前加载。 -->
     <script src="plugins/purify/purify.min.js"></script>
	 <!-- Markdown IT主库 -->
	<script src="plugins/markdown-it/markdown-it.min.js"></script>
	  <!-- 降价IT定义列表插件 -->
	  <script src="plugins/markdown-it/markdown-it-deflist.min.js"></script>
	   <!-- Markdown IT Footnote插件 -->
	   <script src="plugins/markdown-it/markdown-it-footnote.min.js"></script>
	  <!-- Markdown IT缩写插件 -->
	  <script src="plugins/markdown-it/markdown-it-abbr.min.js"></script>
	  <!-- Markdown IT下标插件 -->
	  <script src="plugins/markdown-it/markdown-it-sub.min.js"></script>
	  <!-- Markdown IT上标插件 -->
	  <script src="plugins/markdown-it/markdown-it-sup.min.js"></script>
	  <!-- Markdown IT下划线/插入文本插件 -->
	  <script src="plugins/markdown-it/markdown-it-ins.min.js"></script>
	  <!-- Markdown IT Mark Plugin -->
	  <script src="plugins/markdown-it/markdown-it-mark.min.js"></script>
	  <!-- Markdown IT SmartArrows插件 -->
	  <script src="plugins/markdown-it/markdown-it-smartarrows.min.js"></script>
	 <!-- 降价IT复选框插件 -->
	 <script src="plugins/markdown-it/markdown-it-checkbox.min.js"></script>
	 <!-- Markdown IT East Asian Characters Line Break Plugin -->
	 <script src="plugins/markdown-it/markdown-it-cjk-breaks.min.js"></script>
	 <!-- Markdown IT Emoji插件 -->
	 <script src="plugins/markdown-it/markdown-it-emoji.min.js"></script>
	   <!--   Twitter Emojis插件（如果你需要twitter emojis） -->
	 <script src = "http://twemoji.maxcdn.com/2/twemoji.min.js?11.0" > </ script> 
	 <!-- 突出显示代码样式的JS主插件库 -->
	 <script src="plugins/highlight/highlight.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
	 <script src="js/markdown-editor.js"></script>
	 <!-- 如果需要，可以选择包含theme.js脚本或theme.css用于不同的主题 -->
	 <script src="themes/fa4/theme.js"></script>
	 <!-- 如果需要，可以选择包含您语言的本地化脚本 -->
    <script src="js/locales/zh.js"></script>

html内容

	<textarea id="editor" rows="15" ></textarea>

在官方js markdown-editor内修改了一个地方 暴漏了$h属性 里面属性都可以修改 拿到属性就好了。

初始化Markdown

初始化后显示界面：

完成了这些步骤基本就完成了 要是获取内容或设置内容 使用Textarea的获取设置即可 $(“选择器”).val() 即可 建议用 val 别用text html
现在说下暴漏h的原因 为了修改h属性内部的元素 比如下面的百度一下那里，若是直接在官方js修改太多感觉不太好，所以就把他露了出来

 通过这样修改
 $.fn.markdownEditor.h.CREDITS= '<a class="text-info" href="http://www.baidu.com">百度一下，生活愉快</a>',