Subversion Repositories bacoAlunos

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1312 jmachado 1 
<!DOCTYPE html>
2 
<html lang="en">
3 
  <head>
4 
    <meta charset="utf-8">
5 
    <title>Tiny, opensource, Bootstrap WYSIWYG rich text editor from MindMup</title>
6 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 
    <meta name="keywords" content="opensource rich wysiwyg text editor jquery bootstrap execCommand html5" />
8 
    <meta name="description" content="This tiny jQuery Bootstrap WYSIWYG plugin turns any DIV into a HTML5 rich text editor" />
9 
    <link rel="apple-touch-icon" href="//mindmup.s3.amazonaws.com/lib/img/apple-touch-icon.png" />
10 
    <link rel="shortcut icon" href="http://mindmup.s3.amazonaws.com/lib/img/favicon.ico" >
11 
    <link href="external/google-code-prettify/prettify.css" rel="stylesheet">
12 
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
13 
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">
14 
                <link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
15 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
16 
                <script src="external/jquery.hotkeys.js"></script>
17 
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
18 
    <script src="external/google-code-prettify/prettify.js"></script>
19 
                <link href="index.css" rel="stylesheet">
20 
    <script src="bootstrap-wysiwyg.js"></script>
21 
  </head>
22 
  <body>
23 
 
24 
<div class="container">
25 
  <div class="hero-unit">
26 
  <div class="pull-right">
27 
        <div class="fb-like" data-href="http://facebook.com/mindmupapp" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div><br/>
28 
    <a href="https://twitter.com/mindmup" class="twitter-follow-button" data-show-count="true" data-show-screen-name="true" data-lang="en">Follow @mindmup</a>
29 
  </div>
30 
        <h1>bootstrap-wysiwyg <br/> <small>tiny wysiwyg rich text editor for Bootstrap</small></h1>
31 
        <hr/>
32 
        <!---
33 
        Please read this before copying the toolbar:
34 
 
35 
        * One of the best things about this widget is that it does not impose any styling on you, and that it allows you
36 
        * to create a custom toolbar with the options and functions that are good for your particular use. This toolbar
37 
        * is just an example - don't just copy it and force yourself to use the demo styling. Create your own. Read
38 
        * this page to understand how to customise it:
39 
    * https://github.com/mindmup/bootstrap-wysiwyg/blob/master/README.md#customising-
40 
        --->
41 
        <div id="alerts"></div>
42 
    <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
43 
      <div class="btn-group">
44 
        <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font"><i class="icon-font"></i><b class="caret"></b></a>
45 
          <ul class="dropdown-menu">
46 
          </ul>
47 
        </div>
48 
      <div class="btn-group">
49 
        <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="icon-text-height"></i>&nbsp;<b class="caret"></b></a>
50 
          <ul class="dropdown-menu">
51 
          <li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
52 
          <li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
53 
          <li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
54 
          </ul>
55 
      </div>
56 
      <div class="btn-group">
57 
        <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
58 
        <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
59 
        <a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="icon-strikethrough"></i></a>
60 
        <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="icon-underline"></i></a>
61 
      </div>
62 
      <div class="btn-group">
63 
        <a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
64 
        <a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>
65 
        <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
66 
        <a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
67 
      </div>
68 
      <div class="btn-group">
69 
        <a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="icon-align-left"></i></a>
70 
        <a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="icon-align-center"></i></a>
71 
        <a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="icon-align-right"></i></a>
72 
        <a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="icon-align-justify"></i></a>
73 
      </div>
74 
      <div class="btn-group">
75 
                  <a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="icon-link"></i></a>
76 
                    <div class="dropdown-menu input-append">
77 
                            <input class="span2" placeholder="URL" type="text" data-edit="createLink"/>
78 
                            <button class="btn" type="button">Add</button>
79 
        </div>
80 
        <a class="btn" data-edit="unlink" title="Remove Hyperlink"><i class="icon-cut"></i></a>
81 
 
82 
      </div>
83 
 
84 
      <div class="btn-group">
85 
        <a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="icon-picture"></i></a>
86 
        <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
87 
      </div>
88 
      <div class="btn-group">
89 
        <a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a>
90 
        <a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="icon-repeat"></i></a>
91 
      </div>
92 
      <input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech="">
93 
    </div>
94 
 
95 
    <div id="editor">
96 
      Go ahead&hellip;
97 
    </div>
98 
  </div>
99 
 
100 
<div class="row">
101 
    <div class="span6">
102 
          <h2>About</h2>
103 
          <p>
104 
          This <a href="https://github.com/mindmup/bootstrap-wysiwyg/blob/master/bootstrap-wysiwyg.js">tiny (5KB, &lt; 200 lines) jQuery Bootstrap plugin</a> turns any DIV into a WYSIWYG
105 
          rich-content editor, inspired by <a href="http://premiumsoftware.net/cleditor/">CLEditor</a> and
106 
              <a href="http://jhollingworth.github.com/bootstrap-wysihtml5/">bootstrap-wysihtml5</a>.
107 
          Here are the key features:
108 
      </p>
109 
          <ul>
110 
            <li>Automatically binds standard hotkeys for common operations on Mac and Windows</li>
111 
            <li>Drag and drop files to insert images, support image upload (also taking photos on mobile devices)</li>
112 
            <li>Voice dictation input (only in Chrome)</li>
113 
            <li>Allows a custom built toolbar, no magic markup generators, enabling the web site to use all the goodness of Bootstrap, Font Awesome and so on...</li>
114 
            <li>Does not force any styling - it's all up to you</li>
115 
            <li>Uses standard browser features, no magic non-standard code, toolbar and keyboard configurable to execute any <a href="https://developer.mozilla.org/en/docs/Rich-Text_Editing_in_Mozilla">supported browser command</a></li>
116 
            <li>Does not create a separate frame, backup text areas etc - instead keeps it simple and runs everything inline in a DIV</li>
117 
            <li>(Optionally) cleans up trailing whitespace and empty divs and spans</li>
118 
            <li>Requires a modern browser (tested in Chrome 26, Firefox 19, Safari 6, reported by users to work in IE10)</li>
119 
            <li>Supports mobile devices (tested on IOS 6 Ipad/Iphone and Android 4.1.1 Chrome)</li>
120 
          </ul>
121 
 
122 
 
123 
        <h2>Why?</h2>
124 
 
125 
        <a href="http://www.mindmup.com"><img class="span5" src="promo-868x350.png"></a>
126 
        <br clear="all" />
127 
        <p>
128 
          While building a content editor for <a href="http://www.mindmup.com">MindMup</a> we found plenty of good HTML5 WYSWYG editors online, but most were duplicating
129 
          functionality that already exists in jQuery and Bootstrap, implementing things that were meanwhile added to HTML5 and supported in major browsers,
130 
          or doing too much magic such as inserting IFrames with backup text-areas. Most of this was to work around quirks in older browsers (which we didn't need) and
131 
          caused focus problems on touch devices (which was an issue for us). Too much magic caused problems with
132 
          bootstrap modals (a must for us). Most editors also build their own toolbars, which embed additional CSS and images and always
133 
          turn out to be much worse than standard Bootstrap buttons. </p>
134 
          <p>It turns out, with HTML5, everything we need can fit into less than 5K. We built this tiny tiny editor that does everything we need, does not impose
135 
          any particular additional CSS and uses modern browser functionality without reimplementing jQuery and Bootstrap. </p>
136 
          <p>It's released under the MIT license, so fork and enjoy!  </p>
137 
 
138 
 
139 
 
140 
    </div>
141 
    <div class="span6" >
142 
      <h2>Usage</h2>
143 
      <pre class="prettyprint linenums">$('#editor').wysiwyg();</pre>    
144 
<p>Don't forget to style your editor div:</p>
145 
<pre class="prettyprint linenums">
146 
 #editor {overflow:scroll; max-height:300px}
147 
</pre>
148 
<p>If you want to use this for a mobile web site, make sure to read about
149 
<a href="https://github.com/mindmup/bootstrap-wysiwyg#styling-for-mobile-devices">how to style it</a> to optimise mobile screen usage and experience (please note that this
150 
demo page isn't optimised for mobile access).</p>
151 
 
152 
      <p>Optionally, also create a toolbar (see the source of this page for an example):</p>
153 
<pre class="prettyprint linenums">
154 
&lt;div class="btn-toolbar" data-role="editor-toolbar"
155 
        data-target="#editor"&gt;
156 
  ...
157 
&lt;/div&gt;
158 
</pre>
159 
<p>In the toolbar, execute simple commands by adding a data-edit attribute to a link.<p>
160 
<pre class="prettyprint linenums">
161 
  &lt;a data-edit="bold"&gt;...&lt;/a&gt;
162 
</pre>
163 
<p>execute more complex commands by adding an argument after a blank or providing an input with a data-edit command (the input value is used as an argument). In case of
164 
file inputs, the file contents are read in using the FileReader API and used as the command value.<p>
165 
<pre class="prettyprint linenums">
166 
&lt;a data-edit="fontName Arial"&gt;...&lt;/a&gt;
167 
...
168 
&lt;input type="text" data-edit="createLink"/&gt;
169 
...
170 
&lt;input type="file" data-edit="insertImage" /&gt;
171 
</pre>
172 
<p>Use standard jQuery methods to access and set content and focus. You can also ask for cleaned up HTML content:</p>
173 
<pre class="prettyprint linenums">
174 
 $('#editor').cleanHtml()
175 
</pre>
176 
 
177 
                         <p style="text-align:center;">
178 
                                <a class="btn btn-large btn-primary jumbo" href="https://github.com/mindmup/bootstrap-wysiwyg/">View project on Github</a>
179 
      </p>
180 
                         <p style="text-align:center; margin-top:20px">
181 
        <a class="btn" href="mailto:contact@mindmup.com"><i class="icon-envelope"></i></a>
182 
          <a class="btn" href="http://facebook.com/mindmupapp"><i class="icon-facebook"></i></a>
183 
          <a class="btn" href="http://twitter.com/mindmup"><i class="icon-twitter"></i></a>
184 
          <a class="btn" href="https://plus.google.com/u/0/communities/112831595986131146219"><i class="icon-google-plus"></i></a>
185 
        </p>
186 
 
187 
 
188 
                </div>
189 
        </div>
190 
</div>
191 
<script>
192 
  $(function(){
193 
    function initToolbarBootstrapBindings() {
194 
      var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
195 
            'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
196 
            'Times New Roman', 'Verdana'],
197 
            fontTarget = $('[title=Font]').siblings('.dropdown-menu');
198 
      $.each(fonts, function (idx, fontName) {
199 
          fontTarget.append($('<li><a data-edit="fontName ' + fontName +'" style="font-family:\''+ fontName +'\'">'+fontName + '</a></li>'));
200 
      });
201 
      $('a[title]').tooltip({container:'body'});
202 
        $('.dropdown-menu input').click(function() {return false;})
203 
                    .change(function () {$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');})
204 
        .keydown('esc', function () {this.value='';$(this).change();});
205 
 
206 
      $('[data-role=magic-overlay]').each(function () {
207 
        var overlay = $(this), target = $(overlay.data('target'));
208 
        overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
209 
      });
210 
      if ("onwebkitspeechchange"  in document.createElement("input")) {
211 
        var editorOffset = $('#editor').offset();
212 
        $('#voiceBtn').css('position','absolute').offset({top: editorOffset.top, left: editorOffset.left+$('#editor').innerWidth()-35});
213 
      } else {
214 
        $('#voiceBtn').hide();
215 
      }
216 
        };
217 
        function showErrorAlert (reason, detail) {
218 
                var msg='';
219 
                if (reason==='unsupported-file-type') { msg = "Unsupported format " +detail; }
220 
                else {
221 
                        console.log("error uploading file", reason, detail);
222 
                }
223 
                $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>'+
224 
                 '<strong>File upload error</strong> '+msg+' </div>').prependTo('#alerts');
225 
        };
226 
    initToolbarBootstrapBindings();  
227 
        $('#editor').wysiwyg({ fileUploadError: showErrorAlert} );
228 
    window.prettyPrint && prettyPrint();
229 
  });
230 
</script>
231 
<a href="https://github.com/mindmup/bootstrap-wysiwyg/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
232 
<div id="fb-root"></div>
233 
<script>
234 
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
235 
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
236 
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
237 
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
238 
  ga('create', 'UA-37452180-6', 'github.io');
239 
  ga('send', 'pageview');
240 
</script>
241 
<script>(function(d, s, id) {
242 
  var js, fjs = d.getElementsByTagName(s)[0];
243 
  if (d.getElementById(id)) return;
244 
  js = d.createElement(s); js.id = id;
245 
  js.src = "http://connect.facebook.net/en_GB/all.js#xfbml=1";
246 
  fjs.parentNode.insertBefore(js, fjs);
247 
  }(document, 'script', 'facebook-jssdk'));
248 
 </script>
249 
 
250 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
251 
 
252 
</html>