52 | bootstrap-wysihtml5 is a javascript plugin that makes it easy to create simple, beautiful wysiwyg editors with the help of wysihtml5 and Twitter Bootstrap 53 |
54 | 55 |56 | View project on Github 57 |
58 |64 |
$('.textarea').wysihtml5();
65 |
66 |
67 | 69 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |31 | 32 | h2. Usage 33 | 34 |
35 | 36 | 39 |40 | 41 | You can get the html generated by getting the value of the text area, e.g. 42 | 43 |
44 | $('#some-textarea').val();
45 |
46 |
47 | h1. Advanced
48 |
49 | h2. Options
50 |
51 | An options object can be passed in to .wysihtml5() to configure the editor:
52 |
53 |
54 | $('#some-textarea').wysihtml5({someOption: 23, ...})
55 |
56 |
57 | h3. Buttons
58 |
59 | To override which buttons to show, set the appropriate flags:
60 |
61 |
62 | $('#some-textarea').wysihtml5({
63 | "font-styles": true, //Font styling, e.g. h1, h2, etc. Default true
64 | "emphasis": true, //Italics, bold, etc. Default true
65 | "lists": true, //(Un)ordered lists, e.g. Bullets, Numbers. Default true
66 | "html": false, //Button which allows you to edit the generated HTML. Default false
67 | "link": true, //Button to insert a link. Default true
68 | "image": true, //Button to insert an image. Default true,
69 | "color": false //Button to change color of font
70 | });
71 |
72 |
73 | h3. Custom Templates for Toolbar Buttons
74 |
75 | To define custom templates for buttons, you can submit a customTemplates hash with the new definitions. Each entry should be a function which expects 'locale' and optional 'options' to manage the translations.
76 |
77 | For example, the default template used for the editHtml mode button looks like this (with size fetched from the optional 'options')
78 |
79 | 80 |
90 | var myCustomTemplates = {
91 | html : function(locale) {
92 | return "