基于Bootstrap的Markdown编辑器插件

Bootstrap-Markdown是一款基于Bootstrap的所见即所得的Markdown编辑器。Bootstrap-Markdown使用简单，并提供大量的API来控制Markdown编辑器的行为，非常实用。

使用方法

在页面中引入bootstrap相关文件，jquery，以及bootstrap-markdown.min.css和bootstrap-markdown.js文件。

<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="bootstrap-markdown.min.css" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-markdown.js" >< /script>
                

HTML结构

使用Bootstrap-Markdown比那家亲的方法非常简单，你只需要在一个<textarea>元素中设置data-provide="markdown"属性，它就可以自动转换为Markdown编辑器。

<textarea name="content" data-provide="markdown" rows="10"></textarea>        
                

如果要制作一个内联的Markdown编辑器，可以添加data-provide="markdown-editable"属性。

<div data-provide="markdown-editable">
  <h3>这是可以编辑的标题</h3>
  <p>所有在 "markdown-editable" 这个div中的内容都是可以编辑的。</p>
</div>      
                

初始化插件

你也可以通过js的方式来初始化该Markdown编辑器插件。

$("#some-textarea").markdown({autofocus:false,savable:false})          
                

本地化设置

如果你需要进行本地化设置，需要引入相关的语言包文件。例如中文需要引入bootstrap-markdown.zh.js文件。

<script type="text/javascript" src="locale/bootstrap-markdown.zh.js" >< /script>
                

然后在初始化方法中添加language即可。

$("#some-textarea").markdown({language:'fr'})          
                

关于该Markdown编辑器的参数和API，请参看http://www.codingdrama.com/bootstrap-markdown/