G  Project releasedjango-wysihtml5 v1.0

Bring all the functionality of the Wysihtml5 rich text editor to your Django project.

Features

  1. Easy integration of the Wysihtml5 rich-text editor through a Django widget.
  2. Toolbar with a simple set of icons to trigger editor's actions.
  3. Optional customization of two commands:
  4. Create Link
  5. Insert Image

Django-Wysihtml5 WidgetDjango-Wysihtml5 widget in action. Look at the Wysihtml5 site to know more. See the list of features provided with the Wysihtml5 rich text editor.

Installation

The app has no extra dependency. The Wysihtml5 code is included with the app. Just clone the repository or install it from PyPI, then:

  1. Add wysihtml5 to INSTALLED_APPS in your settings module.
  2. Create a model with a field of type Wysihtml5TextField.
  3. Create an admin class for that model by inheriting from both wysihtml5.admin.AdminWysihtml5TextFieldMixin and Django's admin.ModelAdmin.
  4. Hit your app's admin URL and use your wysihtml5 widget.

Demo site

There's a demo site in the sources that you can use to see the app in action. It's just a simple example of an Article model with two TextFields: abstract and body. The body field uses the Wysihtml5 editor while the abstract uses the regular Django TextArea widget. The demo has no bells and whistles, it's as simple as it can be to illustrate the basic functionality of the plugin.

The steps to quickly install the demo site:

  1. Cd into the demo directory: cd django-wysihtml5/example/demo
  2. Run syncdb with --no-input: python manage.py syncdb --noinput (user: admin, pwd: admin)
  3. Run the dev web server: python manage.py runserver
  4. Hit the demo URL: localhost:8000 to see the example article fully formatted with Wysihtml5.
  5. Hit the demo admin URL: localhost:8000/admin/ to see the widget in action.

Customization

You can customize two commands: Create Link Insert Image

To customize each command create a function to render the dialog and the javascript code to handle the result. Visit the commands wiki pages (createLink, insertImage) to see how.

Once you have the function edit your settings file and declare the key that corresponds with the command you have customize. The default values are:

  • WYSIHTML5_FUNC_CREATE_LINK_DIALOG = "wysihtml5.widgets.render_create_link_dialog"
  • WYSIHTML5_FUNC_INSERT_IMAGE_DIALOG = "wysihtml5.widgets.render_insert_image_dialog"
Have questions?

Drop a comment, or contact me.

w send your comment

Required for comment verification