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


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

jQuery Fullscreen Editor

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



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>

That’s it! Now the magic will happen.


overlayWhether show semi-transparent overlay behind the editor in fullscreen mode. (true/false)
placeholderShow placeholder on the editor. (string)
transitionThe transition effect while switching fullscreen mode, by default it is ‘fade’.
(‘fade’, ‘slide-in’)
expandOnFocusWhen set to true, the fullscreen mode will be triggered on focus. (true/false)
maxWidthMaximum width for fullscreen editor. (number)
maxHeightMaximum height for fullscreen editor. (number)
onExpandExpand event will be triggered when editor the goes to fullscreen mode. (function)
onMinimizeMinimize event will be triggered when the editor goes to inline mode. (function)

View Live Demo Download

Related Posts