Convert Textbox / Textarea to Fullscreen Editor using jQuery

jQuery Fullscreen Editor plugin transforms textfields to customizable editors, either it can be used within a form or standalone.

Contents

Features

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

To activate the plugin, just add the following snippet into your document;

$(".mytextarea").fseditor();

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)