Fixing Markdown WYSIWYG for IE.

Using bootstrap-wysiwyg.js from this pull request: mindmup/bootstrap-wysiwyg#68
uq-eresearch · Nov 6, 2013 · 7d5b3de · 7d5b3de
1 parent 4f1829b
commit 7d5b3de
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/app/assets/js/lib/bootstrap-wysiwyg.js b/app/assets/js/lib/bootstrap-wysiwyg.js
@@ -26,9 +26,16 @@
 			updateToolbar = function () {
 				if (options.activeToolbarClass) {
 					$(options.toolbarSelector).find(toolbarBtnSelector).each(function () {
-						var command = $(this).data(options.commandRole);
-						if (document.queryCommandState(command)) {
+						var commandArr = $(this).data(options.commandRole).split(' '),
+							command = commandArr[0];
+
+						// If the command has an argument and its value matches this button. == used for string/number comparison
+						if (commandArr.length > 1 && document.queryCommandEnabled(command) && document.queryCommandValue(command) == commandArr[1]) {
+							$(this).addClass(options.activeToolbarClass);
+						// Else if the command has no arguments and it is active
+						} else if (commandArr.length === 1 && document.queryCommandEnabled(command) && document.queryCommandState(command)) {
 							$(this).addClass(options.activeToolbarClass);
+						// Else the command is not active
 						} else {
 							$(this).removeClass(options.activeToolbarClass);
 						}

diff --git a/resources/templates/markdown_viewer.html b/resources/templates/markdown_viewer.html
@@ -22,12 +22,12 @@
           <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"
             title="Font Size"><i class="fa fa-text-height"></i>&nbsp;<b class="caret"></b></a>
           <ul class="dropdown-menu">
-            <li><a data-edit="formatblock h1">Heading 1</a></li>
-            <li><a data-edit="formatblock h2">Heading 2</a></li>
-            <li><a data-edit="formatblock h3">Heading 3</a></li>
-            <li><a data-edit="formatblock h4">Heading 4</a></li>
-            <li><a data-edit="formatblock p">Paragraph</a></li>
-            <li><a data-edit="formatblock blockquote">Quote</a></li>
+            <li><a data-edit="formatBlock <h1>">Heading 1</a></li>
+            <li><a data-edit="formatBlock <h2>">Heading 2</a></li>
+            <li><a data-edit="formatBlock <h3>">Heading 3</a></li>
+            <li><a data-edit="formatBlock <h4>">Heading 4</a></li>
+            <li><a data-edit="formatBlock <p>">Paragraph</a></li>
+            <li><a data-edit="formatBlock <blockquote>">Quote</a></li>
           </ul>
         </div>
         <span class="chart-selector"></span>