基于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/



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部