Bootstrap - WYSIWYG editing options have no effect

Question

At the end of my document before </body> tag I have the required resources:

{{ HTML::script('/themes/admin/js/jquery.js') }}
{{ HTML::script('/themes/admin/js/jquery-ui.js') }}
{{ HTML::script('/themes/admin/js/bootstrap.min.js') }}
{{ HTML::script('/themes/admin/js/wys.js') }} // Bootstrap-wysiwyg

All scripts are linked and there and working. This is my HTML:

<div id="editor" class="well col-md-3" contenteditable="true">

</div>

<script type="text/javascript">
  $('#editor').wysiwyg();
</script>

And this is my toolbar code right above that:

    <div class="well">
      <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
      <div class="btn-group">
        <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" title="" data-original-title="Font"><i class="glyphicon glyphicon-font"></i><b class="caret"></b></a>
          <ul class="dropdown-menu">
          <li><a data-edit="fontName Serif" style="font-family:'Serif'">Serif</a></li><li><a data-edit="fontName Sans" style="font-family:'Sans'">Sans</a></li><li><a data-edit="fontName Arial" style="font-family:'Arial'">Arial</a></li><li><a data-edit="fontName Arial Black" style="font-family:'Arial Black'">Arial Black</a></li><li><a data-edit="fontName Courier" style="font-family:'Courier'">Courier</a></li><li><a data-edit="fontName Courier New" style="font-family:'Courier New'">Courier New</a></li><li><a data-edit="fontName Comic Sans MS" style="font-family:'Comic Sans MS'">Comic Sans MS</a></li><li><a data-edit="fontName Helvetica" style="font-family:'Helvetica'">Helvetica</a></li><li><a data-edit="fontName Impact" style="font-family:'Impact'">Impact</a></li><li><a data-edit="fontName Lucida Grande" style="font-family:'Lucida Grande'">Lucida Grande</a></li><li><a data-edit="fontName Lucida Sans" style="font-family:'Lucida Sans'">Lucida Sans</a></li><li><a data-edit="fontName Tahoma" style="font-family:'Tahoma'">Tahoma</a></li><li><a data-edit="fontName Times" style="font-family:'Times'">Times</a></li><li><a data-edit="fontName Times New Roman" style="font-family:'Times New Roman'">Times New Roman</a></li><li><a data-edit="fontName Verdana" style="font-family:'Verdana'">Verdana</a></li></ul>
     </div>
     </div>
    </div>

And now I can click inside my Div and enter text or delete it etc. However if I select the text and then click on one of the options in the toolbar nothing happens.

Also when I click inside the editable div and select some text the div is outlined showing as selected but when I click on one of the toolbar items the div/text gets deselected.

I think you might want to add a bit more information about what exactly you want resolved. — zombiehugs, Oct 11 '13 at 00:43
I believe you need to use a textbox and not div tag for the plugin — Drixson Oseña, Oct 11 '13 at 00:44
@DrixsonOseña Does not work even with a textarea tag instead of a div. It's weird because the second I click on editable div/textarea I can select and change text but when I select text and then click on Bold option button it does nothing at all but it does deselect the text. — Sterling Duchess, Oct 11 '13 at 00:55
@kellax , the plugin requires `jQuery 1.3.2 or higher (tested with jQuery 1.5.2).` , for your reference see basic sample [here](http://akzhan.github.io/jwysiwyg/help/examples/01-basic.html) — Drixson Oseña, Oct 11 '13 at 01:07
@DrixsonOseña Thats not the same WYSIWYG editor I'm using: http://mindmup.github.io/bootstrap-wysiwyg/ — Sterling Duchess, Oct 11 '13 at 01:18
please upload your code to jsfiddle , working code can make it easier or put your files on a server — AhmedBinNasser, Oct 13 '13 at 20:43

Carol Skelly · Accepted Answer · 2013-10-15T17:49:38.507

7

Mindmup WYSIWYG (http://mindmup.github.io/bootstrap-wysiwyg/) should work with Bootstrap 3, but you need to change the toolbar -- https://github.com/mindmup/bootstrap-wysiwyg/issues/101

Here is a working demo:

http://bootply.com/87859

The toolbar functions and editor text selection seem to function as expected.

edited Oct 15 '13 at 17:49

answered Oct 15 '13 at 17:43

Carol Skelly

351,302
90
710
624

Very nice demo. Link-button closes when the input is clicked though, you can find a fix for that here http://stackoverflow.com/questions/10863821/bootstrap-dropdown-closing-when-clicked – mpartan May 07 '15 at 07:18

score 0 · Answer 2 · edited Oct 15 '13 at 07:36

0

I found http://mindmup.github.io/bootstrap-wysiwyg/ and http://jhollingworth.github.com/bootstrap-wysihtml5/ which one do you try to use?

You have tagged your question with Twitter's Bootstrap 3.

The mindup version: Includes TB 2.3.1 here https://github.com/mindmup/bootstrap-wysiwyg/blob/master/index.html

Bootstrap-wysihtml5 latest update 6 maonth ago show in commit message "Updated Bootstrap JavaScript plugins to 2.2.1"

I seems the plugins you try to use are not ready for Twitter's Bootstrap 3 in the first place.

edited Oct 15 '13 at 07:36

Mr Lister

45,515
15
108
150

answered Oct 14 '13 at 14:03

Bass Jobsen

48,736
16
143
224

If you read the comments you'll see that the 'mindmup' WYSIWYG editor is the one being used. – Carol Skelly Oct 17 '13 at 02:04

Bootstrap - WYSIWYG editing options have no effect

2 Answers2