Click here to Skip to main content
13,357,514 members (74,254 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


4 bookmarked
Posted 22 Feb 2012

Introducing griffin.editor – A jQuery textarea Plugin

, 25 Feb 2012
Rate this:
Please Sign up or sign in to vote.
Introducing griffin.editor – A jQuery textarea Plugin

I’ve tried to find a jQuery editor plug in which works out of the box without configuration. The WMD editor used by looked nice but I couldn’t find a version that I got running. My main issue with most editors was that I didn’t figure out how to configure custom image and link dialogs. I’ve therefore done my own.


  • Markdown (currently the only format supported)
  • Preview pane (see generated HTML live)
  • Syntax highlighting (live)
  • Expanding textarea (which also goes back to original size on blur)
  • jQueryUI dialogs for links/images
  • Access keys (default browser modifier or CTRL if activated)
  • Plug & Play (just include additional scripts to activate features)

The basic setup looks like this:


  <title>Editor demo</title>
  <script type="text/javascript" 

  <script type="text/javascript" 

  <script type="text/javascript" 

  <script type="text/javascript" 

  <script type="text/javascript" 

  <style type="text/css">
   .editor .area { width: 600px; height: 200px; }
   .editor .toolbar { padding: 0px;  }
<div class="editor">
	<div class="toolbar">
		<span class="button-h1" 

		accesskey="1" title="Heading 1">
		<img src="../Source/images/h1.png" /></span>
		<span class="button-h2" 

		accesskey="2" title="Heading 2">
		<img src="../Source/images/h2.png" /></span>
		<span class="button-h3" accesskey="3" 

		title="Heading 3">
		<img src="../Source/images/h3.png" /></span>
		<span class="button-bold" accesskey="b" 

		title="Bold text">
		<img src="../Source/images/bold.png" /></span>
		<span class="button-italic" accesskey="i" 

		title="Italic text">
		<img src="../Source/images/italic.png" /></span>
		<span class="divider">&nbsp;</span>
		<span class="button-bullets" accesskey="l" 

		title="Bullet List">
		<img src="../Source/images/bullets.png" /></span>
		<span class="button-numbers" accesskey="n" 

		title="Ordered list">
		<img src="../Source/images/numbers.png" /></span>
		<span class="divider">&nbsp;</span>
		<span class="button-sourcecode" accesskey="k" 

		title="Source code">
		<img src="../Source/images/source_code.png" /></span>
		<span class="button-quote" accesskey="q" 

		<img src="../Source/images/document_quote.png" /></span>
		<span class="divider">&nbsp;</span>
		<span class="button-link" accesskey="l" 

		title="Insert link">
		<img src="../Source/images/link.png" /></span>
		<span class="button-image" accesskey="p" 

		title="Insert picture/image">
		<img src="../Source/images/picture.png" /></span>
	<textarea class="area">Hello world</textarea>
<script type="text/javascript">

All of that is required. (Just a simple copy/paste). The idea is that you should easily be able to customize its layout. The script generates the following layout:

Basic layout


The basic setup uses browser dialog boxes:

Dialog box

Not so sexy. Include jQueryUI and the integration script:

<link rel="stylesheet"
<script type="text/javascript"
<script type="text/javascript"

... to automatically reconfigure the plug in to use jQueryUI:

Using jQueryUI for dialogs

You can use your own dialogs by implementing the following function:

$.griffinEditorExtension.imageDialog = function(options)
    //options.title & options.url contains info specified in the editor

   // invoke when done
   options.success({ title: 'Some title', url: 'Some url';}) when you are done

Same goes for the link dialog.

Preview Pane

The preview pane is automatically configured when you add a div with a special id:

<div class="editor" id="myeditor">
//all the editor code
<div id="myeditor-preview">

This allows you to place the preview pane wherever you like. The included demo scripts place the preview to the right:

Preview pane

You can also add support for syntax highlighting by including additional script & stylesheet:

<script src=""></script>
<link rel="stylesheet"

The script inclusion will activate those features, no additional configuration is required.

Access Keys

The default access key implementation uses the browser specific implementation. For instance, Win+Chrome uses ALT+Key to activate it. Hence no additional information in the tooltip:

Default access keys

That can be changed by adding a hotkeys script:

<script type="text/javascript"

Which reconfigures the tooltips and allows you to use CTRL+key to access the toolbar features. The key is still controlled by the accesskey attribute on the toolbar icons.

Better hotkeys


The code and all examples are available at github.


This article, along with any associated source code and files, is licensed under The GNU Lesser General Public License (LGPLv3)


About the Author

Founder 1TCompany AB
Sweden Sweden
Skip logfiles, try automated error handling!

I'm one of the founders of codeRR, a .NET service which takes care of everything related to exceptions, so that you can focus on writing code.

blog | twitter

You may also be interested in...


Comments and Discussions

GeneralMy vote of 5 Pin
Helluin24-Feb-12 2:02
memberHelluin24-Feb-12 2:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.180111.1 | Last Updated 25 Feb 2012
Article Copyright 2012 by jgauffin
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid