StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I just finished doing this. There are a couple more subtleties to be aware of that aren't covered in the other answers (so far).</p> <ol> <li><p>First, in order for Django to properly retrieve the value of WMD editor when the form is submitted, it needs to have Django's value for id="" set on it. Normally this would look something like 'id_'</p></li> <li><p>But #1 creates a problem: WMD Editor is hard-coded to look for id="wmd-input" to know what text area it makes use of.</p></li> <li><p>Therefore, what we need is a way to pass the value of the id attribute to WMD. I've done this myself by having the Django template render a global javascript variable, that when executed client side will be used by WMD to properly locate the textarea tag.</p></li> <li><p>If we're re-doing the WMD id tag, then we'll also need to make sure the CSS still works</p></li> <li><p>Lastly, in order for the value to be pre-populated by Django, we need to make sure that value is being rendered in the textarea tag</p></li> </ol> <p>So here's some code for you.</p> <h2>widgets.py</h2> <pre><code>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) </code></pre> <h2>wmd/widget.html</h2> <p>(name this whatever you need for your app)</p> <pre><code><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> </code></pre> <p><em>NOTE: You might need to adjust the MEDIA_URL depending on how you're handling that (custom template tag, middleware, whatever). If you're new to Django and don't understand what I just said, just hardcode the value in for now to get it working and learn what that all means later.</em></p> <p>Lastly, you'll need to make 1 minor edit to the WMD source (note that I'm using the StackOverflow fork, so this might be slightly different for other versions)</p> <h2>wmd.js</h2> <pre><code>// This is around line 69 // Change this -> this.input = doc.getElementById("wmd-input"); // Into this: this.input = doc.getElementById(WMD_TEXTAREA_ID); </code></pre> <p>If you're using the wmd.css and haven't written your own already, you'll also need to make a slight update to that. Because that element is no longer #wmd-input, we'll need to update it to make sure it uses the wmd-input class:</p> <h2>wmd.css</h2> <pre><code>.wmd-input, /* <-- Add this here, around line 33 */ #wmd-input { height: 250px; width: 100%; background-color: #FFFFFF; border: 1px solid #4d86c1; } </code></pre> <p>Whew! That was a bunch. Hope that helps everyone.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload