Example for setting text dynamically in a div with requirejs #45

Waxolunist · May 2, 2014 · 007f316 · 007f316
1 parent cac3743
commit 007f316
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 1 deletion.
diff --git a/examples/index-require.html b/examples/index-require.html
@@ -21,6 +21,20 @@
     -moz-border-radius: 6px;
     border-radius: 6px;
   }
+
+  div.textarea {
+    width: 100%; 
+    font-size: 14px; 
+    line-height: 18px;
+    background-color: white;
+    min-height: 200px;
+  }
+
+  div.textarea.fixed {
+    overflow-y: scroll;
+    height: 200px; 
+  }
+
 </style>
 
 </head>
@@ -29,7 +43,7 @@
   <div class="jumbotron" style="margin-top:40px">
     <h1 style="font-size:58px">bootstrap-wysihtml5 <br/><small>Simple, beautiful wysiwyg editors</small></h1>
     <hr style="border-color: white"/>
-    <textarea class="textarea" placeholder="Enter text ..." style="width: 100%; height: 200px; font-size: 14px; line-height: 18px;"></textarea>
+    <div class="textarea" placeholder="Enter text ..."></div>
   </div>
 
   <div class="row">
@@ -51,6 +65,16 @@ <h2>Usage</h2>
       </p>
 
     </div>
+
+    <div class="span6">
+      <h2>Dynamic text</h2>
+      <p>
+        Set text dynamically with javascript:
+      </p>
+      <p style="text-align:center; margin-top:20px">
+        <button id="btn-settext" type="button" class="btn btn-default">Set text</button>
+      </p>
+    </div>
   </div>
 </div>
 

diff --git a/examples/main-dev.js b/examples/main-dev.js
@@ -5,6 +5,7 @@ require.config({
     'handlebars.runtime': '../components/handlebars/handlebars.runtime.amd',
     'bootstrap': '../components/bootstrap/dist/js/bootstrap.min',
     'bootstrap.wysihtml5': '../dist/bootstrap3-wysihtml5',
+    'rangy': '../components/rangy-1.3/rangy-core',
     'wysihtml5': '../dist/amd/wysihtml5',
     'bootstrap.wysihtml5.commands': '../dist/amd/commands',
     'bootstrap.wysihtml5.templates': '../dist/amd/templates',

diff --git a/examples/main.js b/examples/main.js
@@ -2,6 +2,7 @@ require.config({
   paths: {
     'domReady': '../components/requirejs-domready/domReady',
     'jquery': '../components/jquery/dist/jquery.min',
+    'rangy': '../components/rangy-1.3/rangy-core',
     'bootstrap': '../components/bootstrap/dist/js/bootstrap.min',
     'bootstrap.wysihtml5': '../dist/amd/bootstrap3-wysihtml5.all',
     'bootstrap.wysihtml5.de-DE': '../dist/locales/bootstrap-wysihtml5.de-DE'

diff --git a/examples/start.js b/examples/start.js
@@ -10,5 +10,9 @@ define([
     $('.textarea').wysihtml5({
       locale: 'de-DE'
     }); 
+    $('#btn-settext').on('click', function(e) {
+      $('.textarea').html('Some text dynamically set.');
+      e.preventDefault();
+    });
   });
 });