Django-Front-Edit

Description

A front end editing app for Django. This app allows one to edit dynamic data on the front end of a website when logged in as a staff member. The app allows the editing of dynamic content within any element (See Example below).

Installation

You must have setuptools installed.

From PyPI:

pip install django_front_edit

Or download a package from the PyPI or the BitBucket page:

pip install 

Or unpack the package and:

python setup.py install.

Dependencies

Django >= 1.4 and its dependencies.

beautifulsoup4 >= 4.3.2 located at: or .

django-classy-tags >= 0.5.1 located at: or .

and either one of the following: (see FRONT_EDIT_HTML_PARSER setting below)

html5lib >= 0.999, != 0.9999, != 1.0b5, != 0.99999, != 1.0b6 located at: or .

lxml located at: or

Integration

In your Django settings.py file insert the following in an appropriate place:

...
# for django >1.4 <1.8
TEMPLATE_CONTEXT_PROCESSORS = [
    'django.contrib.auth.context_processors.auth',
    ...
    'django.core.context_processors.request',
    ...
    'front_edit.context_processors.defer_edit'
]
# or for django >1.8
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'OPTIONS': {
            'context_processors': [
                'django.contrib.auth.context_processors.auth',
                ...
                'django.template.context_processors.request',
                ...
                'front_edit.context_processors.defer_edit'
            ]
        }
    }
]
...

INSTALLED_APPS = [
    ...
    'django.contrib.contenttypes',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.sessions',
    ...
    'front_edit',
    ...
]

...

In your main urls.py file:

...
url(r'', include('front_edit.urls')),
...

There is nothing to syncdb or migrate.

Usage

This app uses template tags for all its functionality.

Template tags

Make sure to load up front_edit_tags in your template.

Edit...EndEdit

> Arguments: object.field... [class_name] > > object.field: This argument consist of multiple arguments of dot > separated object/field variables. Currently only fields within the > same model object can be edited per tag. class_name: This > optional argument is the class name(s) to put on the form, edit > button, and overlay in case you need to adjust them.

This tag specifies an editable region.

EditLink...EndEditLink

> Arguments: admin_url, [class_name] > > admin_url: A URL string to link to. class_name: This > optional argument is the class name(s) to put on the form, edit > button, and overlay in case you need to adjust them.

This tag specifies an editable region that will link to an admin page instead of editing inline. For example:

{% url 'admin:constance_config_changelist' as admin_url %}
{% edit_link admin_url %}
    <div>{{ config.FOO }}</div>
{% endedit_link %}

EditWithHints...EndEditWithHints

> Arguments: None

This tag is used to make editable each object in a collection of pagelets each marked with EditHint tags.

EditHint

> Arguments: object fields [class_name] > > object: A model instance. fields: A list of fields on this > model, i.e. 'field1,field2,...,fieldN' class_name: This optional > argument is the class name(s) to put on the form, edit button, and > overlay in case you need to adjust them.

This tag adds a hint to a small cacheable template used in a pagelet system.

EditLoader

> Arguments: None

This tag includes all the boilerplate to make the front-end editing work. This tag should always be right before the end `` tag in your base template.

JavaScript

There is one command that you can call if you need to reposition the edit elements. You should call this if any JavaScript will change the offset of in-flow elements.

djangoFrontEdit.refresh();

Example

pagelet_text.html
{% load front_edit_tags %}
<div class="pagelet pagelet-text">
    <div class="title">
        {{ instance.title }}
    </div>
    <div class="richtext">
        {{ instance.content|safe }}
    </div>
</div>

pagelet_image.html
{% load front_edit_tags %}
<div class="pagelet pagelet-image">
    <div class="image">
        <img src="{{ instance.image.url }}">
        <div class="caption">
            {{ instance.caption }}
        </div>
    </div>
</div>

somepage.html
{% load front_edit_tags pagelet_tags %}




    <div>
        
        <ul>
            {% for object in objects %}
            {% edit object.text_field object.char_field "class_name" %}
            <li>
                <span>{{ object.text_field }}</span>
                <span>{{ object.char_field }}</span>
            </li>
            {% endedit %}
            {% endfor %}
        </ul>
        
        
                    {% for object in objects %}
                    {% edit object.text_field object.char_field "class_name" %}
                    
                    {% endedit %}
                    {% endfor %}
                <table>
            <tbody>
                <tr><td>
                        <span>{{ object.text_field }}</span>
                        <span>{{ object.char_field }}</span>
                    </td></tr>
            </tbody>
        </table>
    </div>
    
    <div>
        {% edit_with_hints %}
        {% render_pagelets object.pagelets %}
        {% endedit_with_hints %}
    </div>
    <div>
        
        {% edit object.text_field "class_name" %}
        <span>{{ object.text_field }}</span>
        {% endedit %{
    </div>
    {% edit_loader %}

Advanced

Settings

> Settings can be set by using the individual settings or by specifying > a dictionary as follows:

FRONT_EDIT_SETTINGS = {
    'CUSTOM_FIELDS':['path.to.custom.field'],
    ...
    'USE_HINTS':True,
}

FRONT_EDIT_CUSTOM_FIELDS

> Default: [] > > A list of dot-separated paths to a custom model field such as a rich > text field or file field that has a Media class on its widget.

FRONT_EDIT_DEFER_KEY

> Default: '__front_edit_defer' > > The context key used to defer display of the collective editable > loader templates.

FRONT_EDIT_EDITABLE_TEMPLATE

> Default: 'front_edit/includes/editable.html' > > This template is the editable. Which includes the form, edit button, > and overlay.

FRONT_EDIT_HTML_PARSER

> Default: 'html5lib' > > Change the html parser used by beautifulsoup. By default we use > 'html5lib', but we also support 'lxml'. You will have to install > either of those libraries. We do not support the builtin 'html.parser' > library due to incompatibilities.

FRONT_EDIT_INLINE_EDITING_ENABLED

> Default: True > > Option to disable inline editing.

FRONT_EDIT_JQUERY_BACKUP

> Default: 'front_edit/js/jquery.min.js' > > The path to the static jquery backup library if the CDN is down. The > value is passed through the static tag.

FRONT_EDIT_JQUERY_BUILTIN

> Default: True > > Whether or not to use the builtin jquery library or rely on the > library already being present in the final document.

FRONT_EDIT_JQUERY_CDN

> Default: '//ajax.googleapis.com/ajax/libs/jquery/' > > The url to the CDN to use for jquery. The version and file name are > appended. i.e. path/1.11.2/jquery.min.js

FRONT_EDIT_JQUERY_VERSION

> Default: '1.11.2' > > The default version of jquery to fetch from the CDN.

FRONT_EDIT_LOADER_TEMPLATE

> Default: 'front_edit/loader.html' > > This template is the main boilerplate.

FRONT_EDIT_LOGOUT_URL_NAME

> Default: 'admin:logout' > > Set the name of the logout url.

FRONT_EDIT_TOOLBAR_TEMPLATE

> Default: 'front_edit/includes/toolbar.html' > > This template is the admin toolbar.

FRONT_EDIT_USE_HINTS

> Default: False > > Whether or not to activate the use of EditHint tags.

FRONT_EDIT_VIGENERE_KEY

> Default: None > > A vigenere key used to obfuscate edit hints. Optional.

Custom Media and JS variables

If the FRONT_EDIT_CUSTOM_FIELDS setting doesn't satisfy your needs you will need to do the following.

1. Change FRONT_EDIT_LOADER_TEMPLATE to your own template, it should have a different name than 'front_edit/loader.html'.
2. In your template extend 'front_edit/loader.html'.
3. Use the block 'ft_extra' to set or run javascript code. No script tags are needed.
4. Use the block 'ft_extra_media' to define media such as CSS or JS files.