Bootstrap - WYSIWYG editing options have no effect
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:
The toolbar functions and editor text selection seem to function as expected.
Related videos on Youtube
Sterling Duchess
Updated on September 14, 2022Comments
-
Sterling Duchess over 1 year
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.
-
Zim over 10 yearsIf you read the comments you'll see that the 'mindmup' WYSIWYG editor is the one being used.
-
mpartan almost 9 yearsVery nice demo. Link-button closes when the input is clicked though, you can find a fix for that here stackoverflow.com/questions/10863821/…