Skip to content

Asherlc/bootstrap-wysihtml5

 
 

Repository files navigation

Overview

Bootstrap-wysihtml5 is a javascript plugin that makes it easy to create simple, beautiful wysiwyg editors with the help of wysihtml5 and Twitter Bootstrap.

Examples

Quick Start

If you are using rails use the bootstrap-wysihtml5-rails gem.

gem install bootstrap-wysihtml5-rails

Otherwise, download the latest version of bootstrap-wysihtml5.

Files to reference

<link rel="stylesheet" type="text/css" href="/css/bootstrap-wysihtml5.css"></link>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"></link>
<script src="js/wysihtml5-0.3.0.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-wysihtml5.js"></script>

Usage

<textarea id="some-textarea" placeholder="Enter text ..."></textarea>
<script type="text/javascript">
	$('#some-textarea').wysihtml5();
</script>

You can get the html generated by getting the value of the text area, e.g.

$('#some-textarea').val();

Advanced

Options

An options object can be passed in to .wysihtml5() to configure the editor:

$('#some-textarea').wysihtml5({someOption: 23, ...})

Buttons

To override which buttons to show, set the appropriate flags:

$('#some-textarea').wysihtml5({
	"font-styles": true, //Font styling, e.g. h1, h2, etc. Default true
	"emphasis": true, //Italics, bold, etc. Default true
	"lists": true, //(Un)ordered lists, e.g. Bullets, Numbers. Default true
	"html": false, //Button which allows you to edit the generated HTML. Default false
	"link": true, //Button to insert a link. Default true
	"image": true, //Button to insert an image. Default true,
	"color": false //Button to change color of font  
});

Stylesheets

It is possible to supply a number of stylesheets for inclusion in the editor ``:</p> <pre> $('#some-textarea').wysihtml5({ "stylesheets": ["/path/to/editor.css"] }); &lt;/pre&gt; &lt;h3&gt;Events&lt;/h3&gt; &lt;p&gt;Wysihtml5 exposes a &lt;a href="https://github.com/xing/wysihtml5/wiki/Events"&gt;number of events&lt;/a&gt;. You can hook into these events when initialising the editor:&lt;/p&gt; &lt;pre&gt; $('#some-textarea').wysihtml5({ "events": { "load": function() { console.log("Loaded!"); }, "blur": function() { console.log("Blured"); } } }); </pre> <h3>Images</h3> <p>You can specify a <span class="caps">URL</span> of <span class="caps">JSON</span> to populate a list of images in the image input dialogue. It expects an array of objects with &#8220;name&#8221; and &#8220;url&#8221; attributes.</p> <pre> $('#some-textarea').wysihtml5({ "imagesUrl": 'http://mywebsite.com/images.json' }); &lt;/pre&gt; &lt;h3&gt;Shallow copy by default, deep on request&lt;/h3&gt; &lt;p&gt;Options you pass in will be added to the defaults via a shallow copy. (see &lt;a href="http://api.jquery.com/jQuery.extend/" title=""&gt;jQuery.extend&lt;/a&gt; for details). You can use a deep copy instead (which is probably what you want if you&amp;#8217;re adding tags or classes to parserRules) via &amp;#8216;deepExtend&amp;#8217;, as in the parserRules example below.&lt;/p&gt; &lt;h3&gt;Parser Rules&lt;/h3&gt; &lt;p&gt;If you find the editor is stripping out tags or attributes you need, then you&amp;#8217;ll want to extend (or replace) parserRules. This example extends the defaults to allow the &lt;code&gt;&amp;lt;strong&amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; tags, and the class &amp;#8220;middle&amp;#8221;:&lt;/p&gt; &lt;pre&gt; $('#some-textarea').wysihtml5('deepExtend', { parserRules: { classes: { "middle": 1 }, tags { strong: {}, em: {} } } }); </pre> <p>There&#8217;s quite a bit that can be done with parserRules; see <a href="https://github.com/xing/wysihtml5/blob/master/parser_rules/advanced.js">wysihtml5&#8217;s advanced parser ruleset</a> for details. bootstrap-wysihtml5&#8217;s default parserRules can be found <a href="https://github.com/jhollingworth/bootstrap-wysihtml5/blob/master/src/bootstrap-wysihtml5.js">in the source</a> (just search for &#8216;parserRules&#8217; in the file).</p> <h3>Defaults</h3> <p>You can change bootstrap-wysihtml5&#8217;s defaults by altering:</p> <pre> $.fn.wysihtml5.defaultOptions &lt;/pre&gt; &lt;p&gt;This object has the same structure as the options object you pass in to .wysihtml5(). You can revert to the original defaults by calling:&lt;/p&gt; &lt;pre&gt; $(this).wysihtml5('resetDefaults') </pre> <p>Operations on the defaults are not thread-safe; if you&#8217;re going to change the defaults, you probably want to do it only once, after you load the bootstrap-wysihtml plugin and before you start instantiating your editors.</p> <h2>The underlying wysihtml5 object</h2> <p>You can access the <a href="https://github.com/xing/wysihtml5">wysihtml5 editor object</a> like this:</p> <pre> var wysihtml5Editor = $('#some-textarea').wysihtml5().data("wysihtml5").editor; wysihtml5Editor.composer.commands.exec("bold"); &lt;/pre&gt; &lt;h2&gt;I18n&lt;/h2&gt; &lt;p&gt;You can use Bootstrap-wysihtml5 in other languages. There are some translations available in the src/locales directory. You can include your desired one after the plugin and pass its key to the editor. Example:&lt;/p&gt; &lt;pre&gt; &amp;lt;script src="src/locales/bootstrap-wysihtml5.pt-BR.js"&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;script type="text/javascript"&amp;gt; $('#some-textarea').wysihtml5({locale: "pt-BR"}); &lt;/script&gt; </pre> <p>It is possible to use custom translations as well. Just add a new key to $.fn.wysihtml5.locale before calling the editor constructor.</p>

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 99.8%
  • Ruby 0.2%