jquery-textareaPreview

2011-06-27T10:28:00+00:00

jquery-textareaPreview is a jQuery plugin to add realtime preview panel to textareas, similar to StackOverflow edit interface.

It allows to create a basic editor with preview, for example in comment form.

Download</a> </h2>
jquery.textareaPreview.js</a> (minified</a>)
Example usage </a> </h2>
<script src="jquery.textareaPreview.js"></script> <textarea name="text"></textarea> <script> $(function() { var $textarea = $("textarea[name='text']"); $textarea.textareaPreview(); }); </script></code></pre> This will add a preview panel right below the textarea element. When you type some HTML into the textarea it's rendered inside the preview panel.
Options </a> </h2>
You can provide additional options to the textarePreview()</code> method.
container</code> (default: null</code>)</a> </h3> Selector string or jQuery object which is used as a preview panel. If it's not specified then empty <div></code> is created and inserted right after the textarea. Example: <textarea name="text"></textarea> <div id="preview"></div> <script> $(function() { $("textarea").textareaPreview({ container: "#preview" // or container: $("#preview") }); }); </script></code></pre>containerClass</code> (default: "preview"</code>)</a> </h3> A CSS class which is added to preview panel. Note it's added only if the panel created automatically (i.e. container</code> option is null</code>). Example: <textarea name="text"></textarea> <script> $(function() { $("textarea").textareaPreview({ containerClass: "myPreview" }); }); </script></code></pre> This will add <div class="myPreview"></div></code> after the textarea which will be used as preview panel. enabled</code> (default: true</code>)</a> </h3> Whether the preview is enabled when the plugin is initialized. Example: <script> $(function() { $("textarea").textareaPreview({ enabled: false }); }); </script></code></pre> This will add a preview panel but it will be disabled by default. To enable it you should call the .textareaPreview("enable")</code> method manually (see "Advanced Usage"). preprocess</code> (default: null</code>)</a> </h3> A function to pre-process the text before it's displayed in the preview. By default the text is inserted without any changes. This is a good place to call some markup processors, for example Markdown. Example: <script> $(function() { $("textarea").textareaPreview({ preprocess: function(text) { return convertMarkdownToHTML(text); } }); }); </script></code></pre>updateInterval</code> (default: 100</code>)</a> </h3> A time interval between preview updates (in milliseconds). Well, the preview is not truly realtime :-) <textarea name="text"></textarea> <script> $(function() { $("textarea").textareaPreview({ updateInterval: 1000 // the preview is updated every second }); }); </script></code></pre>Advanced usage</a> </h2> You can call enable</code> or disable</code> methods to enable or disable the preview panel. Example: <textarea name="text"></textarea> <a href="#" id="enable-preview">Enable preview</a> <a href="#" id="disable-preview">Disable preview</a> <script> $(function() { var $textarea = $("textarea").textareaPreview({ enabled: false }); $("#enable-preview").click(function(e) { e.preventDefault(); $textarea.textareaPreview("enable"); }); $("#disable-preview").click(function(e) { e.preventDefault(); $textarea.textareaPreview("disable"); }); }); </script></code></pre>Feedback</a> </h2> You can report bugs or propose improvements on GitHub project page</a>

adf.xyz

jquery-textareaPreview

Feedback </a> </h2>
You can report bugs or propose improvements on GitHub project page</a></p>