Tutorial jQuery Fullscreen Editor

This jQuery plugin that adds a fullscreen mode option to a common text area.

Key features

Flexible fullscreen mode
Works on mobile - and major desktop browsers
Comes with two different transitions
Only ~4kb (minified)

Instructions

Download and extract the zip file to your desired project folder. Then in your document, first include fseditor.css right before >head< tag,

<link rel="stylesheet" href="fseditor.css" type="text/css" media="all">

Then include jQuery +1.8 and minimized version of fseditor's core javascript file;

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.fseditor.min.js"></script>
<script>
  $(".mytextarea").fseditor();
</script>

That's it! Now the magic will happen.

Options

overlay	Whether show semi-transparent overlay behind the editor in fullscreen mode. (true/false)
placeholder	Show placeholder on the editor. (string)
transition	The transition effect while switching fullscreen mode, by default it is 'fade'. ('fade', 'slide-in')
expandOnFocus	When set to true, the fullscreen mode will be triggered on focus. (true/false)
maxWidth	Maximum width for fullscreen editor. (number)
maxHeight	Maximum height for fullscreen editor. (number)
onExpand	Expand event will be triggered when editor the goes to fullscreen mode. (function)
onMinimize	Minimize event will be triggered when the editor goes to inline mode. (function)

Public Methods

To trigger a public method of the plugin, you can simply call;

$('#fseditor').fseditor('method');

expand	Triggers fullscreen mode.
minimize	Minimize the fullscreen mode. (unless it's not expanded)
destroy	Removes the plugin completely and brings the native textfield back.

Credits

This plugin was created by Burak Son (@burakson). Feel free to open a ticket on issue tracker regarding any ideas/bug report. Contribution would also be appreciated!

Friday, September 20, 2013