Markdown编辑器:Griffin Editor

jopen 9年前

Griffin Editor 是 TypeScript 编写的 Markdown 编辑器。

Markdown编辑器:Griffin Editor

主要特性:

  • Markdown (容易添加其他格式)

  • 预览

  • 语法高亮

  • Boostrap 对话框

  • 快捷键(浏览器默认 or CTRL+key)

  • Plug & play

代码示例:

<div id="editor">      <!-- TOOLBAR layout -->      <div class="toolbar">          <span class="button-h1" accesskey="1" title="Heading 1"><img src="images/h1.png" /></span>          <span class="button-h2" accesskey="2" title="Heading 2"><img src="images/h2.png" /></span>          <span class="button-h3" accesskey="3" title="Heading 3"><img src="images/h3.png" /></span>          <span class="button-bold" accesskey="b" title="Bold text"><img src="images/bold.png" /></span>          <span class="button-italic" accesskey="i" title="Italic text"><img src="images/italic.png" /></span>          <span class="divider">&nbsp;</span>          <span class="button-bullets" accesskey="l" title="Bullet List"><img src="images/bullets.png" /></span>          <span class="button-numbers" accesskey="n" title="Ordered list"><img src="images/numbers.png" /></span>          <span class="divider">&nbsp;</span>          <span class="button-sourcecode" accesskey="k" title="Source code"><img src="images/source_code.png" /></span>          <span class="button-quote" accesskey="q" title="Qoutation"><img src="images/document_quote.png" /></span>          <span class="divider">&nbsp;</span>          <span class="button-link" accesskey="l" title="Insert link"><img src="images/link.png" /></span>          <span class="button-image" accesskey="p" title="Insert picture/image"><img src="images/picture.png" /></span>      </div>          <!-- The actual text area -->      <textarea class="area"># Hello World!</textarea>  </div>

项目主页:http://www.open-open.com/lib/view/home/1437383052865