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

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
就在结束之前
标签：

; 
  

示例：

; 
   
    <头> 
      <标题>我的页面 
     
    <正文> 
      <文本区域> 
      <脚本类型=“text/javascript”src=“wmd/wmd.js”> 
     
   
  

默认情况下，WMD 将首先打开
将页面上的文本区域放入编辑器中。
您可以使用以下命令修改此行为
wmd-ignore 类，如下所述。
（也可以禁用
自动启动并实例化编辑器
通过JavaScript，如图所示
apiExample.html。 但请注意
当前的 API 将发生很大变化
即将推出的开源版本； 它
实际上从未面向公众
消费。）

因此，将必要的代码添加到用于呈现表单的模板中，并确保要使用 WMD 的文本区域是页面上的第一个，然后就可以开始了。

Answer 3

我刚刚做完这件事。 还有一些需要注意的微妙之处，其他答案中没有涵盖（到目前为止）。

1. 首先，为了让 Django 在提交表单时正确检索 WMD 编辑器的值，需要设置 Django 的 id="" 值。 通常这看起来像'id_'

2. 但是 #1 产生了一个问题：WMD 编辑器经过硬编码来查找 id="wmd-input" 以了解它使用的文本区域。

3. 因此，我们需要的是一种将 id 属性的值传递给 WMD 的方法。 我自己通过让 Django 模板呈现一个全局 javascript 变量来完成此操作，当执行时，WMD 将使用客户端来正确定位 textarea 标记。

4. 如果我们重新制作 WMD id 标签，那么我们还需要确保 CSS 仍然有效

5. 最后，为了让 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 新手并且不明白我刚才所说的内容，只需暂时硬编码该值即可使其正常工作，并稍后了解这一切意味着什么。

最后，您需要将 1 个小项设置为编辑 WMD 源（请注意，我使用的是 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-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;
}

唷！ 那是一群。 希望对大家有帮助。