Bootstrap - WYSIWYG-editing-Optionen, haben keine Auswirkung

Am Ende des Dokuments, bevor </body> tag ich habe die erforderlichen Ressourcen: 

{{ 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

Alle Skripte verlinkt sind und dort arbeiten. Das ist mein HTML: 

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

</div>

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

Und dies ist mein code-Symbolleiste rechts oben: 

    <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>

Und jetzt kann ich Sie in mein Div-Element und geben Sie text ein oder löschen Sie es, etc.. Allerdings, wenn ich wählen Sie den text aus und klicken Sie dann auf eine der Optionen in der toolbar passiert nichts.

Auch wenn ich klicken Sie in den editierbaren div-Element und wählen Sie den text, das div-Element skizziert, die zeigen, wie ausgewählte, aber wenn ich klicken Sie auf der Symbolleiste können Sie Elemente im div/text wird deselektiert.

  • Ich denke, man könnte hinzufügen möchten ein wenig mehr Informationen darüber, was genau Sie wollen gelöst.
  • Ich glaube, Sie brauchen, um eine textbox und nicht den div-tag für das plugin
  • Nicht funktioniert, auch mit einem textarea-tag anstelle eines div. Es ist komisch, weil die zweite ich das auf editable div, textarea, die ich auswählen kann und den text ändern, aber wenn ich wählen Sie text und klicken Sie anschließend auf die option Fett-Taste, es tut überhaupt nichts, aber es tut, deaktivieren Sie die text.
  • version Ihres jquery?
  • jQuery v1.10.2
  • das plugin benötigt jQuery 1.3.2 or higher (tested with jQuery 1.5.2). , für Ihre Referenz finden Sie unter basic-Beispiel hier
  • Das ist nicht das gleiche WYSIWYG-editor, den ich verwende: mindmup.github.io/bootstrap-wysiwyg
  • sah es jetzt erstmal versuchen mit Hilfe von jquery version 1.9.0
  • Es ist nicht jQuerry es versucht, aber immer noch die gleiche.
  • bitte laden Sie Ihr code auf jsfiddle , funktionierenden code zu erleichtern, können oder stellen Sie Ihre Dateien auf einem server

InformationsquelleAutor Sterling Duchess | 2013-10-11
  1. 7

    Mindmup WYSIWYG (http://mindmup.github.io/bootstrap-wysiwyg/) sollte die Arbeit mit Bootstrap 3, aber Sie müssen ändern Sie die Symbolleiste -- https://github.com/mindmup/bootstrap-wysiwyg/issues/101

    Hier ist eine funktionierende demo:

    http://bootply.com/87859

    Den Funktionen in der Werkzeugleiste und der editor-text-Auswahl scheint zu funktionieren wie erwartet.

    InformationsquelleAutor Zim
  2. 0

    Fand ich http://mindmup.github.io/bootstrap-wysiwyg/ und http://jhollingworth.github.com/bootstrap-wysihtml5/ die man versuchen Sie zu nutzen?

    Haben Sie tagged Ihre Frage mit Twitter ' s Bootstrap 3.

    Die mindup version: Inklusive TB 2.3.1 hier https://github.com/mindmup/bootstrap-wysiwyg/blob/master/index.html

    Bootstrap-wysihtml5 neueste update 6 maonth Woche zeigen, in der commit-Nachricht "Aktualisiert Bootstrap-JavaScript-plugins zu 2.2.1"

    Ich scheint die plugins, die Sie versuchen zu verwenden, sind nicht bereit, Twitter Bootstrap 3 in den ersten Platz.

    • Wenn Sie die Kommentare Lesen, sehen Sie, dass die "mindmup' WYSIWYG-editor wird verwendet.
    InformationsquelleAutor Bass Jobsen
Schreibe einen Kommentar