Skip to content
A django app that allows you to integrate `bootstrap-wysiwyg` easily.
Python HTML
Find file
Latest commit 7ec93c2 @laplacesdemon Merge pull request #6 from Depado/fixing_readme
Typo Fixing in README.md

README.md

Django Bootstrap Wysiwyg

This django app utilizes bootstrap-wysiwyg editor in an app. It provides a form widget to easily integrate the editor to your forms.

The widget contains some inline javascript, I plan to fix this in future versions.

One thing to note is that image uploading works, there is a drag and drop feature. The wysiwyg editor is very lightweight. See dependencies and usage sections for more info.

See http://mindmup.github.io/bootstrap-wysiwyg/ for details of the editor.

Continuous Integration

Build Status

Visit https://travis-ci.org/laplacesdemon/django-bootstrap-wysiwyg for details

Installation

Install using the pypi

pip install django-bootstrap-wysiwyg

or directly frop the source

pip install git+https://github.com/laplacesdemon/django-bootstrap-wysiwyg.git

Usage

Add django_bootstrap_wysiwyg to your APPS.

Make sure that you add dependency javascripts (bootstrap, jquery, this apps js file) before rendering the form.

Have a look at the static/django_bootstrap_wysiwyg/css/bootstrap-wysiwyg.css file, and modify it for your needs.

Change the textarea widget to WysiwygInput widget. See options section for more information.

class MyForm(forms.ModelForm):
    class Meta:
        model = MyModel
        widgets = {
            'myfield': WysiwygInput()
        }

That's it. See sample project to see how it's like.

Options

Wysiwyg editor has an optional toolbar. You can determine what features you want on the toolbar.

The default setting for toolbar is WYSIWYG_DEFAULT_TOOLBAR_ITEMS. Just add or remove the items as you wish. Following is the default value of it.

WYSIWYG_DEFAULT_TOOLBAR_ITEMS = [
    'fonts', 
    'font_size', 
    'font_weights', 
    'lists',
    'alignments', 
    'hyperlink', 
    'image',  
    'history',  # undo/redo buttons
    'speech'  # only available for chrome
]

You can override these options per widget object:

WysiwygInput(toolbar_items=[
    'fonts', 'font-sizes', 'alignments'
    ]))

The editor is a div element and by default a css class is added by the application. You can change it by the following setting:

WYSIWYG_DEFAULT_CSS_CLASS = 'editor'

Dependencies

bootsrap-wysiwyg dependencies

Adding new toolbar buttons

See https://developer.mozilla.org/en/docs/Rich-Text_Editing_in_Mozilla

Bitdeli Badge

Something went wrong with that request. Please try again.