Использование текстового редактора Bootstrap wysiwyg в форме Django

Я использую Django и Bootrap 2.32. Я хочу включить этот текстовый редактор на тему wysiwyg-bootrap: http://mindmup.github.io/bootstrap-wysiwyg/. Использование этого редактора довольно просто, в том числе

$('#editor').wysiwyg();

в JS-декларации будет рендерить каждый

<div class=editor></div>

в красивый текстовый редактор wysiwyg.

Теперь проблема: я хочу включить этот редактор в одно из моих полей формы django. У меня есть единственная форма:

class Article_Form(ModelForm):
    Article_text = CharField(widget=Textarea(attrs = {'id' : 'editor'}))
    class Meta:
        model= Article

тогда как Article Модель включает в себя один простой CharField, Есть ли шанс, чтобы редактор работал внутри Article_text Форма поле? С вышеупомянутым виджетом созданная область текста не может управляться кнопками управления редактором wysiwyg. Оборачиваем тег form-template-tag следующим образом

<div id="editor">
    {{ Article_Form.Article_text }}                                
</div>

тоже не работает. Таким образом, проблема в том, что Джанго создает textareaтогда редактору понадобится <div> сделать правильно. Ребята, у вас есть идеи, как заставить это работать (не обращаясь к django-wysiwyg).

Спасибо!

Источник

4 ответа

Решение

Вы уверены, что этот "плагин" не работает с textarea?

{{ Article_Form.Article_text }}

будет отображено что-то вроде:

<textarea cols="40" id="id_Article_text" name="Article_text" rows="10"></textarea>

Так что есть шанс, что вы можете инициализировать редактор wysiwyg, например:

$('#id_Article_text').wysiwyg();

Однако после проверки плагина, я сомневаюсь, что это будет возможно, так как он использует contenteditable="true" атрибут HTML5 и, возможно, плагин работает с div только.

Так что вы никак не можете заставить его работать с формой Django. Решением должно быть отображение других полей вашей формы вручную, скрытие поля с textarea и отображение редактора:

<form action="" method="POST">

    {{ Article_Form.field1 }}
    {{ Article_Form.field2 }}

    <div class=editor></div>

    {% csrf_token %}
    <input type="submit" value="Submit" id="submit-btn" />
</form>

Затем вы можете использовать JS для отправки формы:

$('#submit-btn').click(function (e) {
    e.preventDefault();

    $.ajax({
        // do your magic here. 
        // note that you can get the content of the editor with: $('#editor').cleanHtml();
    })
});

Этот путь хакерский, я согласен, поэтому я не рекомендую вам идти на это, просто найдите другой плагин. Также, пожалуйста, внимательно прочитайте PEP 8.

Надеюсь, поможет.

Источник

Я не знаю достаточно о Django, но я написал редактора, на которого вы ссылаетесь, так что вот предложение. Предполагая, что другой ответ на этой странице правильный, и вы не можете сгенерировать div напрямую, вы можете сгенерировать текстовую область, используя любые шаблоны Django, которые вы обычно делаете, а затем назначить два события: 1) событие загрузки страницы, которое будет копировать содержимое текстовой области. в div, что-то вроде

$('#editor').html($('#textarea').val())

2) сформировать событие onsubmit, которое обратно скопирует текущее содержимое div в текстовое поле перед его отправкой

$('#textarea').val($('#editor').html())
Источник

Взгляните на это. Summernote - это простой редактор WYSIWYG, основанный на Bootstrap в Twitter. Плагин django-summernote позволяет очень удобно встраивать Summernote в вашу страницу администрирования Django.

https://github.com/lqez/django-summernote

Источник

Взгляните на этот репозиторий: https://github.com/rochapps/django-secure-input Я думаю, что он решает большинство ваших проблем.

Источник
Другие вопросы по тегам