arrow-admin
Version:
Arrow Admin Website
186 lines (152 loc) • 5.51 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>PageDown-Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link href="../css/jquery.pagedown-bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 10px;
}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/jquery.pagedown-bootstrap.combined.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>PageDown-Bootstrap</h1>
<p>
An extension of <a href="http://code.google.com/p/pagedown/">Pagedown</a> to neatly integrate into <a href="http://getbootstrap.com/">Twitter Bootstrap</a> for a WYSIWYG Markdown editor. This project is a fork of the work of <a href="https://github.com/samwillis/pagedown-bootstrap">Sam Willis</a>.
</p>
<p>
This project is hosted on <a href="https://github.com/kevinoconnor7/pagedown-bootstrap/">GitHub</a> where <a href="https://github.com/kevinoconnor7/pagedown-bootstrap/issues">issues</a> can be reported. It is released under the <a href="https://raw.github.com/kevinoconnor7/pagedown-bootstrap/master/LICENSE.txt">MIT License</a>.
</p>
<p>
<a class="btn btn-primary btn-large" href="https://github.com/kevinoconnor7/pagedown-bootstrap/">
Fork on GitHub
</a>
</p>
</div>
<hr />
<h2>Requirements</h2>
<ul>
<li><a href="http://jquery.com">jQuery 1.9+</a> (you know you should be keeping it more up-to-date).</li>
<li><a href="http://getbootstrap.com/">Bootstrap 3.0+</a></li>
<li><a href="http://fontawesome.io/">FontAwesome 4.0+</a></li>
</ul>
<hr />
<h2>Basic usage</h2>
<script src="https://gist.github.com/kevinoconnor7/5432336.js"></script>
<hr />
<h2>Options</h2>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Options/Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>sanitize</td>
<td>boolean</td>
<td>true</td>
<td>true or false, enables or disables sanitization of HTML</td>
</tr>
<tr>
<td>help</td>
<td>function</td>
<td>null</td>
<td>A function to be called when the help button it clicked. Null precludes the rendering of the help button.</td>
</tr>
<tr>
<td>hooks</td>
<td>array</td>
<td>[]</td>
<td>
An array of objects that define hooks for the converter. Each object should define a string, 'event', and a function, 'callback'. A full list of events can be found <a href="http://code.google.com/p/pagedown/wiki/PageDown#Hooks_on_the_converter_object">here</a>.
</td>
</tr>
</tbody>
</table>
<hr />
<h2>Styling</h2>
<p>
All of the created elements are wrapped in nice helpful HTML tags as defined:
</p>
<dl>
<dt>div.wmd-panel</dt>
<dd>A wrapper around all of the elements of the textarea, button bar, and preview</dd>
<dt>div.wmd-button-bar</dt>
<dd>A wrapper that contains the editor's button bar.</dd>
<dt>textarea.wmd-input</dt>
<dd>The textarea that has been transformed into an editor</dd>
<dt>div.wmd-preview</dt>
<dd>A wrapper for the preview generated by the editor</dd>
</dl>
<hr />
<h2>Demo</h2>
<h3>1. This is the basic editor</h3>
<textarea id="pagedownMe" class="form-control" rows="10">
This is the *first* editor.
------------------------------
Just plain **Markdown**, except that the input is sanitized:
<marquee>I'm the ghost from the past!</marquee>
</textarea>
<h4>Code:</h4>
<script src="https://gist.github.com/kevinoconnor7/5432336.js"></script>
<hr />
<h3>2. This is a custom editor</h3>
<textarea id="pagedownMeDangerously" class="form-control" rows="10">
This is the *second* editor.
------------------------------
It has a plugin hook registered that surrounds all words starting with the
letter A with asterisks before doing the Markdown conversion. Another one gives bare links
a nicer link text. User input isn't sanitized here:
<marquee>I'm the ghost from the past!</marquee>
http://google.com
http://stackoverflow.com
It also includes a help button.
</textarea>
<h4>Code:</h4>
<script src="https://gist.github.com/kevinoconnor7/5432376.js"></script>
</div>
<script type="text/javascript">
(function () {
$("textarea#pagedownMe").pagedownBootstrap();
$("textarea#pagedownMeDangerously").pagedownBootstrap({
'sanitize': false,
'help': function () { alert("Do you need help?"); },
'hooks': [
{
'event': 'preConversion',
'callback': function (text) {
return text.replace(/\b(a\w*)/gi, "*$1*");
}
},
{
'event': 'plainLinkText',
'callback': function (url) {
return "This is a link to " + url.replace(/^https?:\/\//, "");
}
}
]
});
$('.wmd-preview').addClass('well');
})();
</script>
</body>
</html>