All Projects → tortillagroup → django-trix

tortillagroup / django-trix

Licence: MIT license
Basecamp's Trix rich text editor widget for Django

Programming Languages

CSS
56736 projects
python
139335 projects - #7 most used programming language
javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to django-trix

react-trix-rte
React wrapper for Trix rich text editor created by Basecamp
Stars: ✭ 66 (+43.48%)
Mutual labels:  trix, trix-editor
trixcamp
Simple, distraction free writing app based on Basecamp's trix-editor.
Stars: ✭ 30 (-34.78%)
Mutual labels:  trix-editor
osx-trix
Handy Patches, Fixes, Tips and Tricks for Apples OS X Platform
Stars: ✭ 29 (-36.96%)
Mutual labels:  trix

django-trix

Trix rich text editor widget for Django, using Trix 0.10.1.

https://circleci.com/gh/istrategylabs/django-trix/tree/master.svg?style=shield

Using django-trix

django-trix includes a form widget, a model field, and a model admin mixin that enables the rich text editor. You can use any of these methods, but you do not need to use all.

Model

To enable the editor in the Django admin (or any form) via the model field, use the Trix model field TrixField which inherits from django.db.models.TextField:

from django.db import models
from trix.fields import TrixField

class Post(models.Model):
    content = TrixField('Content')

Admin

To enable the editor in the Django admin, inherit from TrixAdmin and set the trix_fields attribute to a list of the fields that use an editor:

from myawesomeblogapp.models import Post
from trix.admin import TrixAdmin

@admin.register(Post)
class PostAdmin(TrixAdmin, admin.ModelAdmin):
    trix_fields = ('content',)

Forms and Templates

The editor can be used in forms and templates by adding the TrixEditor widget to a form field:

from django import forms
from trix.widgets import TrixEditor

class EditorForm(forms.Form):
    content = forms.CharField(widget=TrixEditor)

In the template, just use the form as you normally would, but be sure to include the associated media:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Trix Editor Test</title>
        {{ form.media.css }}
    </head>
    <body>
        <form>
            {{ form }}
        </form>
        {{ form.media.js }}
    </body>
</html>

CSS in head, JS at end of body, because you are a responsible developer.

Installation

It's on PyPI:

pip install django-trix

Add to INSTALLED_APPS:

INSTALLED_APPS = (
    ...
    'trix',
    ...
)

Add route to urls.py:

urlpatterns = [
    ...
    url(r'^trixorwhateveryouwant/', include('trix.urls')),
    ...
]

TODO

  • A bunch of stuff!
  • Attachment uploads
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].