**
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>',