Skip to main content

Django Aloha Edit

Project description

Provides easy integration of the Aloha Editor into your Django app as well as several additional Aloha plugins.

Installing

pip install django-aloha-edit

Usage

Using the HTMLField:

from aloha.fields import HTMLField

class myModel(models.Model):
    content = HTMLField()

This will allow you to sanitize the output while automatically using the Aloha Widget:

ALLOWED_TAGS = ['a', 'abbr', ]
ALLOWED_ATTRIBUTES = {
                'a'         : ['href', 'rel', 'target', 'title',],
             }
ALLOWED_STYLES = ['float','text-align','width','height',]
ALLOWED_CLASSES = ['error', 'success', 'warning', 'info',
                   ]
IFRAME_ORIGINS = ["http://www.youtube.com/embed/", "http://blip.tv/play/"]

Extra Plugins

Video Embed

This plugin provides video embedding capabilities. It currently supports both blip and youtube, but other services can easily be added. This plugin provides both a content handler (so you can copy/paste links) as well as UI elements in the Aloha bar to manipulate and add video embeds.

Bootstrap UI

This plugin provides manipulation of several [bootstrap](http://twitter.github.io/bootstrap/) elements including collapse (called spoiler here) and thumbnails. Make sure you include the appropriate css and javascript for those parts of bootstrap or they will not work.

Usage

Make sure to load the plugins in either the aloha config file or the script load specification. Use ‘user/videoembed’, ‘user/bootstrapui’

You must also add the UI elements to the UI configuration. Below is a sample config:

Aloha = window.Aloha || {};
Aloha.settings = {
                sidebar: {
                        disabled: true
                },
                plugins: {
                        load: ['common/ui','common/commands','common/format','common/list', 'common/align',
                               'common/table','common/image','common/undo','common/abbr',
                               'common/link','common/contenthandler','common/paste','common/block','common/characterpicker',
                               'user/videoembed', 'user/bootstrapui'],
                },
                toolbar: {
                        tabs: [
                               {
                                 label: 'tab.format.label',
                                 showOn: { scope: 'Aloha.continuoustext' },
                                 components: [
                                              [
                                                                                        'bold', 'strong', 'italic', 'emphasis', '\n',
                                                                                        'subscript', 'superscript', 'strikethrough', 'quote',
                                                                                        ], [
                                                                                        'formatLink', 'formatAbbr', 'formatNumeratedHeaders', 'toggleDragDrop', '\n',
                                                                                        'formatSpoilers', 'formatThumbnail', 'addVideo', '\n',
                                                                                        'toggleMetaView', 'wailang', 'toggleFormatlessPaste',
                                                                                        ], [
                                                                                        'alignLeft', 'alignCenter', 'alignRight', 'alignJustify', '\n',
                                                                                        'orderedList', 'unorderedList', 'indentList', 'outdentList'
                                                                                        ], [
                                                                                        'formatBlock'
                                                                                        ]
                                              ]
                               },
                               {
                                 label: "tab.insert.label",
                                 showOn: { scope: 'Aloha.continuoustext' },
                                 components: [
                                              [ "createTable", "characterPicker", "insertLink",
                                                "insertImage", "insertAbbr", "insertToc",
                                                "insertHorizontalRule", "insertTag", 'insertSpoilers', 'insertVideo','insertThumbnail',]
                                              ]
                               },
                               {
                                 label: "tab.img.label",
                                 showOn: {scope: 'image'},
                                 components: [
                                              [ "imageSource", "\n",
                                                "imageTitle" ],
                                                [ "imageResizeWidth", "\n",
                                                  "imageResizeHeight" ],
                                                  [ "imageAlignLeft", "imageAlignRight", "imageAlignNone", "\n",
                                                    "imageCropButton", "imageCnrReset", "imageCnrRatio",   ],
                                                    [ "imageBrowser" ],
                                                                ["wrapThumbnail",]
                                              ]
                               },
                               {
                                 label: "Thumbnail",
                                 showOn: { scope: 'Aloha.Block.ThumbnailBlock' },
                                 components: [
                                              [ "thumbnailSrc", "thumbnailCaption","thumbnailRemove",],
                                              ["\n","thumbnailAlignLeft", "thumbnailAlignRight", "thumbnailAlignNone"]
                                              ]
                               },
                               {
                                 label: "Spoiler",
                                 showOn: { scope: 'Aloha.Block.SpoilerBlock' },
                                 components: [
                                              [ "spoilerTitle","spoilerRemove",],
                                              ]
                               },
                               {
                                 label: "Video",
                                 showOn: { scope: 'Aloha.Block.VideoBlock' },
                                 components: [
                                              [ "videoSrc",],
                                              ]
                               },
                               ]
                },
                bundles: {
                        // Path for custom bundle relative from require.js path
                        user: '../../js/aloha-plugins'
                }
};

About Aloha Editor

The [Aloha Editor](http://www.aloha-editor.org/) is a WYSIWYG that uses the HTML5 content-editable attribute of the browswer for the best editing experience.

Project details


Release history Release notifications

History Node

0.3.3

History Node

0.3.2

History Node

0.3.1

History Node

0.3.0

History Node

0.2.1

History Node

0.2.0

History Node

0.1.1

This version
History Node

0.1.0

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Filename, size & hash SHA256 hash help File type Python version Upload date
django-aloha-edit-0.1.0.tar.gz Copy SHA256 hash SHA256 Source None Jul 7, 2013

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging CloudAMQP CloudAMQP RabbitMQ AWS AWS Cloud computing Fastly Fastly CDN DigiCert DigiCert EV certificate StatusPage StatusPage Status page