Download
User Rating: 0/5 ( 0 votes)
What is it?
jQuery Fullscreen Editor plugin transforms textfields to customizable editors, either it can be used within a form or standalone.
Key Features
-
Flexible fullscreen mode
-
Works on mobile - and major desktop browsers
-
Comes with two different transitions
-
Only ~4kb (minified)
Source: http://burakson.github.io/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>
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. |
JS Tutorial
