Posts tagged with: jquery-plugins

Introducing griffin.editor – a jQuery textarea plugin

I’ve tried to find a jQuery editor plugin which works out of the box without configuration. The WMD editor used by stackoverflow.com 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.

Highlights:

  • Markdown (currently the only format supported)
  • Preview pane (see generated HTML live)
  • Syntax highlighting (live), using highlightjs or google prettify
  • 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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
  <title>Editor demo</title>
  <script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
  <script type="text/javascript" src="scripts/jquery.markdown-0.2.js"></script>
  <script type="text/javascript" src="../Source/textselector.js"></script>
  <script type="text/javascript" src="../Source/jquery.griffin.editor.js"></script>
  <script type="text/javascript" src="../Source/jquery.griffin.editor.markdown.js"></script>
  <style type="text/css">
   .editor .area { width: 600px; height: 200px; }
   .editor .toolbar { padding: 0px;  }
 </style>
</head>
<body>
<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" title="Qoutation"><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>
	</div>
	<textarea class="area">Hello world</textarea>
</div>
<script type="text/javascript">
	$(function(){
		$('.editor').griffinEditor();
	});
</script>
</body>
</html>

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

Basic layout

Dialogs

The basic setup uses browser dialog boxes:

Dialog box

Not so sexy. Include jQueryUI and the integration script:

  <link rel="stylesheet" href="Styles/jquery-ui-1.8.16.custom.css">
  <script type="text/javascript" src="scripts/jquery-ui-1.8.16.custom.min.js"></script>
  <script type="text/javascript" src="../Source/jquery.griffin.editor.dialogs.jqueryui.js"></script>

.. to automatically reconfigure the plugin to use jQueryUI:

Using jQueryUI for dialogs

You can use your own dialogs by implementation 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>
<div id="myeditor-preview">
</div>

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

Preview pane

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

  <script src="http://yandex.st/highlightjs/6.1/highlight.min.js"></script>
  <link rel="stylesheet" href="http://yandex.st/highlightjs/6.1/styles/idea.min.css">

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" src="scripts/jquery.hotkeys.js"></script>

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

Summary

The codez & all examples are available at github.


Localizing jQuery plugins

I’ve spent some time to figure out how to localize my jQuery plugins and I’ve just found out a way that works just fine. Disclaimer: I’m not 100% sure of how namespacing works in jQuery so this might not be the correct way.

I’m using the meta header accept-language to control which language to use. It allows me to select the language in my backend (using user settings or whatever) instead of just using the languages defined by the browser. An ASP.NET MVC3 header would look like this in the layout:

<meta name="accept-language" content="@System.Globalization.CultureInfo.CurrentCulture.Name" />

You should be able to do the same thing in PHP or whatever language you use.

Next thing to do is to add the localization structure to your plugin script file:

(function($) {
    //globals
    $.yourPluginName = {
        texts: {
            title: 'Please wait, loading..'
        },
        translations: []
    };
    
    var methods = {
		// your methods here.
	};

    $.fn.yourPluginName = function(method) {

        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.yourPluginName');
        }

    };

})(jQuery);

That will make the plugin work if no languages are loaded. The translations will be loaded into the $.yourPluginName.translations array by another script.

We got one thing left to do before we can use the texts in your script. We need to load the correct language. Create another script called jquery.yourpluginnamne.localization.js and load it after$.yourPluginName.texts.anyTextName in your plugin to use the localized strings.