django-tiptap / django_tiptap

TipTap Editor in Django
MIT License
50 stars 8 forks source link

can't interact with editor #20

Open odigity opened 2 years ago

odigity commented 2 years ago

I wanted to try this out, so I created a new Django v3.2.13 project and created a single model:

class Story(models.Model):
    title    = models.CharField(max_length=255)
    contents = TipTapTextField()

When I try to add a story in Django Admin, I see a resizable white rectangle that looks like a text box - however, I can't interact with it at all. Clicking does nothing, not even placing a cursor.

Screenshot from 2022-07-09 20-45-07

I tried both Firefox and Chromium on Ubuntu 20.04.

sereneinserenade commented 2 years ago

I would need more info. What does the network tab of the devtools say about request to skypack CDN. I suspect that the files are taking too much time in loading it...

odigity commented 2 years ago

I opened the network tab and clicked Add. The list was too long to capture in a single screenshot, so there's two slightly-overlapping ones:

Screenshot from 2022-07-10 14-05-55 Screenshot from 2022-07-10 14-06-59

I also chose "Save All As HAR File", but GitHub won't let me attach it.

However, I think a better clue is the contents of the Console:

Screenshot from 2022-07-10 14-07-27

sereneinserenade commented 2 years ago

have you provided it with the tiptapOutputFormat parameter? take a look here https://github.com/django-tiptap/django_tiptap/blob/ba895a973bcde48506adb4b53e830ff85f38fd08/django_tiptap/templates/forms/tiptap_textarea.html#L1350-L1354. if you don't provide anything, it would not be able to set that variable and so it'll throw an error.

valid values are "html" or "json"

odigity commented 2 years ago

have you provided it with the tiptapOutputFormat parameter?

I didn't know that was required. Based on the README,md, all I did was:

  1. add "django_tiptap" to INSTALLED_APPS
  2. add a model field of type django_tiptap.fields.TipTapTextField

Where/how am I supposed to set the value? Is it in the config? Because the config section of README.md indicates that DJANGO_TIPTAP_CONFIG["tiptapOutputFormat"] already defaults to "html".

sereneinserenade commented 2 years ago

Locally it works for me, maybe @solen0id might be able to help out on this one

farin commented 8 months ago

Django 5, letest package, same error Uncaught ReferenceError: initialEditorContent is not defined

and editor doesn't work

enzedonline commented 3 months ago

I had this problem (also using Django 5) then noticed that the css hadn't been included anywhere. Needed to add the following to my form template -

<link rel="stylesheet" href="{% static 'django_tiptap/css/styles.css' %}">

Once I had that, the form renders (although the toolbar only starts to render once the widget gets focus). The formatting is all over the place for the toolbar, though I think this may just be that the svg's aren't particularly consistent in size and centering.

There's a problem with the tippy dropdown for table. It renders off-screen (and hidden) if the button is at the right. Seems some text/fields missing from it as well:

image image

The form template also has a syntax error - line 3-4, the include directive is split over 2 lines so is not interpreted by django, should be:

{% include "django/forms/widgets/attrs.html" %}