Frage Wie kann ich den WMD-Editor an meine Django-Formulare anschließen?


Wie kann ich den WMD-Editor an meine Django-Formulare anschließen?


8
2018-01-26 13:45


Ursprung


Antworten:


Hier ist die komplette Django-Widget-Klasse:

class WMDEditor(forms.Textarea):

    def __init__(self, *args, **kwargs):
        attrs = kwargs.setdefault('attrs', {})
        if 'cols' not in attrs:
            attrs['cols'] = 58
        if 'rows' not in attrs:
            attrs['rows'] = 8
        super(WMDEditor, self).__init__(*args, **kwargs)

    def render(self, name, value, attrs=None):
        rendered = super(WMDEditor, self).render(name, value, attrs)
        return rendered + mark_safe(u'''<script type="text/javascript">
            wmd_options = {
                output: "Markdown",
                buttons: "bold italic | link blockquote code image | ol ul"
            };
            </script>
            <script type="text/javascript" src="%sjs/wmd/wmd.js"></script>''' % settings.MEDIA_URL)

Verwenden Sie es in Ihrer Formulardefinition wie text = forms.CharField(widget=WMDEditor).


10
2018-01-27 21:51



Aus der readme.txt im aktuellen WMD-Download:

Um den Editor zu installieren, fügen Sie wmd.js hinzu   kurz vor deiner Schließung <body>   Etikett:

<script type="text/javascript" src="wmd/wmd.js"></script>

Beispiel:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <textarea></textarea>
    <script type="text/javascript" src="wmd/wmd.js"></script>
  </body>
</html>

Standardmäßig wird WMD die erste drehen   Textarea auf Ihrer Seite in einen Editor.   Sie können dieses Verhalten mit dem ändern    wmd-ignore Klasse, unten beschrieben.   (Es ist auch möglich zu deaktivieren   Autostart und instanziieren den Editor   durch JavaScript, wie in    apiExample.html. Aber sei gewarnt   Die aktuelle API wird sich sehr verändern   die kommende Open-Source-Version; es   war nie wirklich für die Öffentlichkeit bestimmt   Verbrauch.)

Fügen Sie also der Vorlage, die Sie zum Rendern des Formulars verwenden, den erforderlichen Code hinzu, und stellen Sie sicher, dass das Textfeld, in dem Sie WMD verwenden möchten, das erste auf der Seite ist, und Sie können loslegen.


3
2018-01-26 14:47



Ich bin gerade fertig damit. Es gibt ein paar mehr Feinheiten, die beachtet werden müssen, die in den anderen Antworten (soweit) nicht behandelt werden.

  1. Damit Django den Wert des WMD-Editors beim Übergeben des Formulars korrekt abrufen kann, muss Djangos Wert für id = "" festgelegt sein. Normalerweise würde das so aussehen wie 'id_'

  2. Aber # 1 erzeugt ein Problem: Der WMD-Editor ist hart codiert, um nach id = "wmd-input" zu suchen, um zu wissen, welchen Textbereich er benutzt.

  3. Daher benötigen wir eine Möglichkeit, den Wert des ID-Attributs an WMD zu übergeben. Ich habe dies selbst getan, indem ich mit der Django-Vorlage eine globale Javascript-Variable gerendert habe, die bei der Ausführung auf der Client-Seite von WMD benutzt wird, um den Textarea-Tag richtig zu lokalisieren.

  4. Wenn wir das WMD-ID-Tag wiederholen, müssen wir auch sicherstellen, dass das CSS immer noch funktioniert

  5. Damit der Wert von Django vorbelegt wird, müssen wir sicherstellen, dass der Wert im Textarea-Tag gerendert wird

Also hier ist ein Code für dich.

widgets.py

from django import forms
from django.contrib.admin import widgets as admin_widgets
from django.template import loader, Context
from django.utils.html import conditional_escape
from django.utils.encoding import force_unicode

class WMDEditor(forms.Textarea):
    def render(self, name, value, attrs=None):
        # Prepare values
        if not value:
            value = ''
        attrs = self.build_attrs(attrs, name=name)

        # Render widget to HTML
        t = loader.get_template('wmd/widget.html')
        c = Context({
            'attributes' : self._render_attrs(attrs),
            'value' : conditional_escape(force_unicode(value)),
            'id' : attrs['id'],
        })

        return t.render(c)

wmd / widget.html

(Nenne das, was immer du für deine App brauchst)

<div class="wmd-wrapper">
    <div id="wmd-button-bar" class="wmd-panel"></div><br/>
    <textarea class="wmd-panel wmd-input" {{ attributes|safe }}>{{ value }}</textarea><br/>
    Preview
    <div id="wmd-preview" class="wmd-panel"></div><br/>
</div>
<script type="text/javascript">// <![CDATA[
    var WMD_TEXTAREA_ID = '{{ id }}'
// ]]> </script>
<script type="text/javascript" src="{{ MEDIA_URL }}js/wmd/wmd.js"></script>

HINWEIS: Sie müssen die MEDIA_URL möglicherweise anpassen, je nachdem, wie Sie damit umgehen (benutzerdefiniertes Vorlagen-Tag, Middleware, was auch immer). Wenn du neu in Django bist und nicht verstehst, was ich gerade gesagt habe, setze einfach den Wert fest, um es zu funktionieren und lerne, was das alles später bedeutet.

Zu guter Letzt müssen Sie eine kleine Änderung an der WMD-Quelle vornehmen (beachten Sie, dass ich die StackOverflow-Verzweigung verwende, daher kann dies bei anderen Versionen leicht anders sein)

wmd.js

// This is around line 69
// Change this -> this.input = doc.getElementById("wmd-input");
// Into this:
this.input = doc.getElementById(WMD_TEXTAREA_ID);

Wenn Sie die wmd.css verwenden und noch keine eigenen geschrieben haben, müssen Sie auch ein kleines Update vornehmen. Da dieses Element nicht mehr # wmd-input ist, müssen wir es aktualisieren, um sicherzustellen, dass es die wmd-input-Klasse verwendet:

wmd.css

.wmd-input,   /* <-- Add this here, around line 33 */
#wmd-input 
{ 
    height: 250px;
    width: 100%;
    background-color: #FFFFFF;
    border: 1px solid #4d86c1;
}

Wütend! Das war ein Haufen. Hoffnung, die allen hilft.


2
2017-10-07 02:52