bootstrap-wysiwyg: so bekommen Sie den formatierten text auf der server-Seite?

Lerne ich Bootstrap und möchte ein wysiwyg-editor. Ich fand bootstrap-wysiwyg - und wollen, es zu benutzen.

http://mindmup.github.io/bootstrap-wysiwyg/

Aber ich kann nicht herausfinden, wie man formatierten text auf der server-Seite, wenn ein Formular abgeschickt wird.

InformationsquelleAutor curious1 | 2013-07-25
  1. 7

    Habe ich heraus gefunden wie dies zu tun. Hier ist, wie.

    Einem versteckten input-oder textarea-Feld erforderlich ist. Dieses Feld kann der name-Attribut auf den Namen des Objekts ein. Seinen Namen muss etwas sein, was die server-Seite erwartet.

    JQuery verwenden Sie zum anfügen eines Formular-submit-Ereignis-handler für das Formular mit dem wysiwyg-editor. Der hf nimmt den text aus dem wysiwyg-editor und legen Sie es als hidden-Feld den Wert.

    Hoffe, das hilft jemand anderem.

    InformationsquelleAutor curious1
  2. 6
    <textarea class="textarea" name="mytext" placeholder="Enter text ..." style="width: 810px; height: 200px"></textarea>

    verwenden Sie die val() 

    $('.textarea').wysihtml5();

$('.textarea').val();

    http://jsfiddle.net/suhailvs/vNPAJ/3/

    können Sie es als post 

    request.POST['mytext']
    • suhail ist dies sicherlich sehr hilfreich. Wie ist dein Beispiel bezogen auf die bootstrap-wysiwyg-plugin? Danke!
    • es tut mir Leid ich nicht bekommen, Ihre Frage richtig. haben Sie überprüft, die jsfiddle(jsfiddle.net/suhailvs/vNPAJ/3)??? es ist mit bootstrap-wysiwyg-plugin.
    • Ich habe mir dein setup in jsfiddle, wenn Sie Ihre post. Ich sehe keine link zu bootstrap-wysiwyg-plugin in Ihrem externen Ressourcen. Reden wir über das gleiche plugin mindmup.github.io/bootstrap-wysiwyg?
    • github.com/mindmup/bootstrap-wysiwyg hat 210-Uhr,2879-Sterne-417-Gabeln in GITHUB. aber github.com/jhollingworth/bootstrap-wysihtml5 haben 205-Uhr, 3048-Sterne-532-Gabel. sieht aus wie jhollingworth besser sein könnte. mindmup version ist sehr klein. aber Sie müssen zum schreiben der html-und auch Sie sind, fontawesome, jquery hotkeys. ich aktualisiert die fiddle jsfiddle.net/suhailvs/vNPAJ/4
    • Vielen Dank für die neue jsfiddle-setup. Sie sind sich bewusst, in irgendeiner Weise direkt abrufen formatierten text auf server-Seite? Ich habe bereits ein setup (ähnlich deinem neuen Beispiel) zu arbeiten, aber es ein DIV-element, nicht textarea oder input.
    • ich bin mit jhollingworth version. es ist in Ordnung, die in mein Projekt. Sie nehmen es einfach als ein textarea nicht brauchen, um über irgend etwas. das einzige problem ist die Abhängigkeit von wysihtml5-0.3.0.js die über 332kb. ich bin sorry, ich weiß nicht viel über mindmup version.
    • suhail, ich habe versucht, jhollingworth und es scheint einfach und leicht zu bedienen. Hoever, ich merke, dass es iframe und es ist nicht compatiable mit den anderen Dingen, die ich habe. vielen Dank für alles! best.

    InformationsquelleAutor suhailvs
  3. 2

    Dies ist ein Alter thread, aber vielleicht diese Tipps anderen helfen.

    Als pro erwähnt courious1, wir müssen erstellen Sie eine versteckte textarea (zB: id=hidden-editor) auf unsere form.
    und übergeben Sie den Wert im # - editor, um unsere #hidden-editor mit javascript unter:

    //-- submit button clicked
$('#submit-btn').click(function(){
    $('#hidden-editor').html(
        $("#editor").html()
    );
});
    InformationsquelleAutor Khairulnizam Dahari
  4. 1

    Ich schließlich kam mit dieser Lösung. Nicht verwalten, um die onclick-Arbeit... aber die Echtzeit-änderung ist praktisch. Vielen Dank für die Ideen.

    $('#editor').bind("DOMSubtreeModified",function(){
                $('#you_hidden_textarea').html(
                        $("#editor").html()
                );
            });
    • Pierre, vielen Dank für deinen input!
    InformationsquelleAutor Pierre CHARLES
  5. 0

    Folgende ist, wie man editor-Inhalt bootstrap-wysiwyg

    Satz-id zu folgenden div-hier habe ich verwendet editor wie id und ich auch einen speichern-button.

    <div id="editor">
      Go ahead&hellip;
    </div>

<a class="btn" data-edit="bold" id="saveBtn" title="Save"><i class="icon-save"></i></a>

    Dann

    $('#editor').wysiwyg();

$('#saveBtn').on('click',function(){        

       console.log($('#editor').html());

      })

    Hoffe, das wird helfen, jemand anderes in Zukunft

    InformationsquelleAutor Nisal Edu
Schreibe einen Kommentar