Package: django_tiptap
django_tiptapDjango admin TipTap integration. Provides aTipTapTextFieldandTipTapWidgetthat
allow you to use TipTap in your Django forms and admin pages.For more information about TipTap, check outtiptap.dev.https://user-images.githubusercontent.com/45892659/136865410-f13de924-8bb5-4729-b469-6e061a507ab5.mp4InstallationInstall or add django_tiptap to your PythonPath:pipinstalldjango_tiptapAdd django_tiptap to yourINSTALLED_APPSin Djangossettings.py:INSTALLED_APPS=[# ..."django_tiptap",]UsageFieldTo add HTML WYSIWYG text editing capabilities to your models use theTipTapTextFieldmodel field. It is a subclass of DjangosTextFieldconfigured to use theTipTapWidgetby default.fromdjango.dbimportmodelsfromdjango_tiptap.fieldsimportTipTapTextFieldclassNote(models.Model):content=TipTapTextField()WidgetYou can also use theTipTapWidgetdirectly when defining a custom form.fromdjangoimportformsfromdjango.contribimportadminfromdjango_tiptap.widgetsimportTipTapWidgetfromdemo_app.modelsimportNoteclassNoteAdminForm(forms.ModelForm):content=forms.TextField(widget=TipTapWidget())classMeta:model=Notefields='__all__'classNoteAdmin(admin.ModelAdmin):form=NoteAdminFormadmin.site.register(Note,NoteAdminForm)ConfigurationYou can configure some of the editor behaviour by modifying theDJANGO_TIPTAP_CONFIGdict insettings.py.DJANGO_TIPTAP_CONFIG={"width":"500px","height":"500px","extensions":[# to see what each extension does, refer to [tiptap.dev](https://www.tiptap.dev/)"bold","italic","underline","strikethrough","h1","h2","h3","h4","h5","h6","textAlign","indent","table","bulletList","orderedList","typography","clearFormat"],"placeholderText":"Begin typing here...",# set None to skip display"unsavedChangesWarningText":"You have unsaved changes",# set None to skip display"lang":"EN"# if you want to use default tooltips and translations, use this. Valid Options => EN/DE(for now)"tooltips":{# if you want to use your custom tooltips(maybe because you don't prefer default or the language you want isn't there)"bold":"Bold | (ctrl / ⌘) + B","italic":"Italic | (ctrl / ⌘) + I","underline":"Underline | (ctrl / ⌘) + U","strike":"Strikethrough | (ctrl / ⌘) + shift + X","h1":"Header 1 | (ctrl + alt) / (⌘ + ⌥) + 1","h2":"Header 2 | (ctrl + alt) / (⌘ + ⌥) + 2","h3":"Header 3 | (ctrl + alt) / (⌘ + ⌥) + 3","h4":"Header 4 | (ctrl + alt) / (⌘ + ⌥) + 4","h5":"Header 5 | (ctrl + alt) / (⌘ + ⌥) + 5","h6":"Header 6 | (ctrl + alt) / (⌘ + ⌥) + 6","alignLeft":"Align Left | (ctrl + shift ⇧) / (⌘ + shift ⇧) + L","alignCenter":"Align Center | (ctrl + shift ⇧) / (⌘ + shift ⇧) + E","alignRight":"Align Right | (ctrl + shift ⇧) / (⌘ + shift ⇧) + R","alignJustify":"Justify | (ctrl + shift ⇧) / (⌘ + shift ⇧) + J","indent":"Indent (Tab ↹)","outdent":"Outdent (shift ⇧ + Tab ↹)","bulletList":"Bullet List | (ctrl + shift ⇧) / (⌘ + shift ⇧) + 8","orderedList":"Numbered List | (ctrl + shift ⇧) / (⌘ + shift ⇧) + 7","addTable":"Add Table","deleteTable":"Delete Table","addColumnBefore":"Add Column Before","addColumnAfter":"Add Column After","deleteColumn":"Delete Column","addRowBefore":"Add Row Before","addRowAfter":"Add Row After","deleteRow":"Delete Row","mergeCells":"Merge Cells","splitCell":"Split Cell","toggleHeaderColumn":"Toggle Header Column","toggleHeaderRow":"Toggle Header Row","toggleHeaderCell":"Toggle Header Cell","clearFormat":"Clear Format",},"translations":{# if the lang you defined exists in the default langs, then no need to define translations"row":"Row","column":"Column","add":"Add"},"custom_extensions":[],"tiptapOutputFormat":"html",# options : "html", "json"}Custom extensionsYou can specify custom tiptap extensions that should be loaded using thecustom_extensionsconfig list.
This list contains dictionaries with the following options:source_staticorsource_url: where to load the extension from (mandatory)module_namethe name of the extension (mandatory)configuration_statementhow to configure the extension. Defaults to themodule_nameif not settoolbar_includepath of a html-template to include into the toolbarbuttonsconfig_includepath of a js-template to include into the tiptap buttonsconfigcss_includepath of a css-template to include into the textareadjango_tiptap_democontains an example of a custom extensionContributingThis project is a very rough draft of what a TipTap Editor experience in Django could
look like. If you're missing a feature and want to contribute to this project you are more than
welcome to!DevelopmentWe use black and isort to auto-format the code base. Both are set up as pre-commit hooks and in the tox testmatrix.pipinstallblackisortpre-commit
pre-commitinstallFor development purposes it is encouraged to add thedjango_tiptapanddjango_tiptap_demomodules to your PythonPath. You can either configure this via
your shell of choice or through your IDE.
VSCode users can use the following setting to automatically add the current workspace
to the PythonPath. If you're an OSX/MacOS user, replaceenv.linuxwithenv.osx."terminal.integrated.env.linux":{"PYTHONPATH":"${workspaceFolder}"},