基于Bootstrap的Markdown编辑器插件

当前位置:主页 > jQuery库 > 布局和界面 > 基于Bootstrap的Markdown编辑器插件
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
基于Bootstrap的Markdown编辑器插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2017-08-23
    阅读:
简要教程

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/

网友评论