Fork me on GitHub

jQuery Fullscreen Editor

Lightweight jQuery plugin that adds fullscreen mode to text fields.

Download View project on Github

Key features

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

What is it?

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

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

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

Example

Go Fullscreen!

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!