Ghost-Like Responsive jQuery Markdown Editor with Live Preview
| File Size: | 120 KB |
|---|---|
| Views Total: | 3704 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Yet another jQuery based markdown editor inspired by ghost.com that features live preview, text counter and responsive design for all major devices.
See also:
How to use it:
1. Include the latest version of jQuery library together with ghostdown.js and ghostdown.css in the document.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="ghostdown.js"></script> <link href="ghostdown.css" media="all" rel="stylesheet">
2. Create the html.
<div class="features"> <section class="editor"> <div class="outer"> <div class="editorwrap"> <section class="entry-markdown"> <header class="floatingheader"> Markdown </header> <section class="entry-markdown-content"> <textarea id="entry-markdown"> ... </textarea> </section> </section> <section class="entry-preview active"> <header class="floatingheader"> Preview <span class="entry-word-count">0 words</span> </header> <section class="entry-preview-content"> <div class="rendered-markdown"></div> </section> </section> </div> </div> </section> </div>
3. Alternatively, you can also implement the plugin as a widget on your web page. Following the html structure like this:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="ghostdown.js"></script>
<link href="ghostdown.css" media="all" rel="stylesheet">
<script src="jquery.ghostdown.js"></script>
</head>
<body>
<div class="features">
<section class="editor">
<div class="outer">
<div class="editorwrap">
<section class="entry-markdown">
<header class="floatingheader"> Markdown </header>
<section class="entry-markdown-content">
<textarea>
...
</textarea>
</section>
</section>
<section class="entry-preview active">
<header class="floatingheader"> Preview <span class="entry-word-count">0 words</span> </header>
<section class="entry-preview-content">
<div class="rendered-markdown"></div>
</section>
</section>
</div>
</div>
</section>
</div>
<script>
$(document).ready(function () {
$(".editor").ghostDown();
});
</script>
</body>
This awesome jQuery plugin is developed by timsayshey. For more Advanced Usages, please check the demo page or visit the official website.
