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();
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.
| 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) |
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. |