danirus / django-comments-xtd

A pluggable Django comments application with thread support, follow-up notifications, mail confirmation, like/dislike flags, moderation, a ReactJS plugin and Bootstrap 5.3.
https://django-comments-xtd.readthedocs.io
BSD 2-Clause "Simplified" License
594 stars 157 forks source link

wysiwyg editor like ckeditor #142

Closed keiser1080 closed 4 years ago

keiser1080 commented 4 years ago

Hi,

How  to use wysiwyg editor for the comment field (i mean like ckeditor?)

keiser1080 commented 4 years ago

i have managed to add ckeditor

I will explain how i did it: i have a project folder named "site" containing the django project "site_project" and the django app "blog" you have to install both django_comments_xtd & django-ckeditor and install following the instruction.

/site/site_project/settings.py :

...
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.sites',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django_comments_xtd',
    'django_comments',
    'ckeditor', 
    'ckeditor_uploader',
    'blog',
]
...
COMMENTS_XTD_FORM_CLASS = 'blog.forms.MyXtdCommentForm' 

/site/site_project/blog/forms :

from django import forms
from django.utils.translation import ugettext_lazy as _
from django_comments_xtd.forms import XtdCommentForm
from ckeditor_uploader.widgets import CKEditorUploadingWidget

class MyXtdCommentForm(XtdCommentForm):
    def __init__(self, *args, **kwargs):
        super(XtdCommentForm, self).__init__(*args, **kwargs)
        self.fields['comment'] = forms.CharField(
            widget=CKEditorUploadingWidget(attrs={'placeholder': _('Your comment'),
                                                  'class': 'form-control'}))

/site/blog/templates/blog/post_detail.html : add safe to you content field

...
<div>
        <label>Content</label>
        <span>{{ object.content | safe }}</span>
</div>
...

/site/templates/includes/django_comments_xtd/comment_content.html add safe to you content field

{{ content|safe }}

/site/templates/comments/form.html : add {{ form.media }}

{% load i18n %}
{% load comments %}
<form method="POST" action="{% comment_form_target %}">
    {% csrf_token %}
    {{ form.media }}
    <fieldset>
        <input type="hidden" name="next" value="{% url 'comments-xtd-sent' %}"/>

        <div class="alert alert-danger" data-comment-element="errors" hidden>
        </div>

        {% for field in form %}
        {% if field.is_hidden %}<div>{{ field }}</div>{% endif %}
        {% endfor %}

        <div style="display:none">{{ form.honeypot }}</div>

        <div class="row form-group {% if 'comment' in form.errors %}has-danger{% endif %}">
            <div class="offset-md-1 col-md-10">
                {{ form.comment }}
            </div>
        </div>

        {% if not request.user.is_authenticated or not request.user.get_full_name %}
        <div class="row form-group {% if 'name' in form.errors %}has-danger{% endif %}">
            <label for="id_name" class="col-form-label col-md-3 text-right">
                {{ form.name.label }}
            </label>
            <div class="col-md-7">
                {{ form.name }}
            </div>
        </div>
        {% endif %}

        {% if not request.user.is_authenticated or not request.user.email %}
        <div class="row form-group {% if 'email' in form.errors %}has-danger{% endif %}">
            <label for="id_email" class="col-form-label col-md-3 text-right">
                {{ form.email.label }}
            </label>
            <div class="col-md-7">
                {{ form.email }}
                <span class="form-text small">{{ form.email.help_text }}</span>
            </div>
        </div>
        {% endif %}

        {% if not request.user.is_authenticated %}
        <div class="row form-group {% if 'url' in form.errors %}has-error{% endif %}">
            <label for="id_url" class="col-form-label col-md-3 text-right">
                {{ form.url.label }}
            </label>
            <div class="col-md-7">
                {{ form.url }}
            </div>
        </div>
        {% endif %}

        <div class="row form-group">
            <div class="offset-md-3 col-md-7">
                <div class="custom-control custom-checkbox">
                    {{ form.followup }}
                    <label for="id_followup{% if cid %}_{{ cid }}{% endif %}" class="custom-control-label">&nbsp;{{ form.followup.label }}</label>
                </div>
            </div>
        </div>
    </fieldset>

    <div class="row form-group">
        <div class="offset-md-3 col-md-7">
            <input type="submit" name="post" value="{% trans 'send' %}" class="btn btn-primary" />
            <input type="submit" name="preview" value="{% trans 'preview' %}" class="btn btn-secondary" />
        </div>
    </div>
</form>

site ├── blog # add forms.py under this folder │   └── templates
│   ├── blog │   └── comments
├── site_project │   └── pycache └── templates ├── comments ├── django_comments_xtd ├── includes │   └── django_comments_xtd └── registration