Question

我怎样才能将WMD编辑器连接到我的django表格？

Answer 1

这是完整的Django小部件类：

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)

在表单定义中使用它，例如text = forms.CharField(widget=WMDEditor)。

Answer 2

从当前WMD下载的readme.txt：

要安装编辑器，请包含wmd.js 就在你关闭之前<body> 标记：
<script type="text/javascript" src="wmd/wmd.js"></script>
示例：
<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <textarea></textarea>
    <script type="text/javascript" src="wmd/wmd.js"></script>
  </body>
</html>
默认情况下，WMD将转为第一个将页面上的textarea转换为编辑器。您可以使用。修改此行为 wmd-ignore类，如下所述。（它也可以禁用自动启动并实例化编辑器通过JavaScript，如图所示 apiExample.html。但要注意这一点当前的API会发生很大的变化即将发布的开源版本;它从来没有真正意义上的公众消耗。）

因此，将必要的代码添加到您用于呈现表单的模板中，并确保要使用WMD的textarea是页面上的第一个，并且您将会很高兴。< / p>

Answer 3

我刚刚完成了这个。还有一些细微之处需要注意，其他答案中没有涉及（到目前为止）。

首先，为了让Django在提交表单时正确检索WMD编辑器的值，它需要在其上设置Django的id =“”值。通常这看起来像'id _'
但是＃1会产生一个问题：WMD编辑器是硬编码的，用于查找id =“wmd-input”以了解它使用的文本区域。
因此，我们需要的是一种将id属性的值传递给WMD的方法。我自己做了这个，让Django模板呈现一个全局的javascript变量，当执行客户端时，WMD将使用它来正确定位textarea标签。
如果我们重新制作WMD id标签，那么我们还需要确保CSS仍能正常工作
最后，为了让Django预先填充值，我们需要确保在textarea标记中呈现值

所以这里有一些代码。

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

（将此名称命名为您的应用）

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

注意：您可能需要调整MEDIA_URL，具体取决于您处理的方式（自定义模板标记，中间件等）。如果你是Django的新手，并且不明白我刚才所说的内容，那么现在只需对其中的值进行硬编码即可使其工作并了解以后的所有内容。

最后，你需要对WMD源进行1次小编辑（注意我正在使用StackOverflow分支，所以这可能与其他版本略有不同）

wmd.js

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

如果你正在使用wmd.css并且还没有编写自己的wmd.css，那么你还需要稍微更新一下。因为该元素不再是#wmd-input，所以我们需要更新它以确保它使用wmd-input类：

wmd.css

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

呼！那是一堆。希望能帮到每个人。

如何在我的django表单上连接WMD编辑器？

3 个答案:

widgets.py

WMD / widget.html

wmd.js

wmd.css