Как я могу подключить редактор WMD к моим формам Django?

Как я могу подключить редактор WMD к моим формам Django?

3 ответа

Вот полный класс виджетов 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),

Из файла 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 превратит первую текстовую область на вашей странице в редактор. Вы можете изменить это поведение с помощью wmd-ignore класс, описанный ниже. (Также возможно отключить автозапуск и создать экземпляр редактора через JavaScript, как показано на apiExample.html, Но имейте в виду, что текущий API сильно изменится в следующем выпуске с открытым исходным кодом; это никогда не предназначалось для общественного потребления.)

Итак, добавьте необходимый код в шаблон, который вы используете для визуализации формы, и убедитесь, что текстовое поле, на котором вы хотите использовать ОМУ, является первым на странице, и вам будет хорошо.

Я только что закончил делать это. Есть еще пара тонкостей, о которых нужно знать, но они не рассматриваются в других ответах (пока).

  1. Во-первых, для того, чтобы Django правильно извлекал значение редактора WMD при отправке формы, ему нужно установить значение Django для id="". Обычно это будет выглядеть примерно как 'id_'

  2. Но #1 создает проблему: редактор WMD жестко запрограммирован для поиска id="wmd-input", чтобы узнать, какую текстовую область он использует.

  3. Поэтому нам нужен способ передать значение атрибута id в WMD. Я сам сделал это с помощью шаблона Django, отображающего глобальную переменную javascript, которая при выполнении на стороне клиента будет использоваться WMD для правильного определения местоположения тега text area.

  4. Если мы снова делаем тэг идентификатора WMD, нам также нужно убедиться, что CSS все еще работает

  5. Наконец, для того, чтобы значение было предварительно заполнено Django, нам нужно убедиться, что значение отображается в теге text area.

Итак, вот код для вас.

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)

ВРС / 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 (обратите внимание, что я использую вилку Stackru, так что это может немного отличаться для других версий)

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

Уф! Это была куча. Надеюсь, что это помогает всем.

Другие вопросы по тегам