Document how to use MDEWidget on a form

[bernd-wechner]

Title says it all. Just isn't obvious, and I'm having to work it out as best possible. Be nice to have a little doc on it, or a mention in the README. Basically my forms are rendering with a standard TextArea it seems and I'm thinking I need to do something to get the MDEWidget in its place.

[salemandreus]

Title says it all. Just isn't obvious, and I'm having to work it out as best possible. Be nice to have a little doc on it, or a mention in the README. Basically my forms are rendering with a standard TextArea it seems and I'm thinking I need to do something to get the MDEWidget in its place.

Did you ever manage to figure this out? I'm now struggling with the exact same thing!

[bernd-wechner]

I did. Memory is not so fresh, so I just checked my codebase. It's set here:

https://github.com/bernd-wechner/django-rich-views/blob/cd957a61d70e9f9bef81632cfae865e3713351ba/src/django_rich_views/views.py#L512C1-L512C1

Which is a very particular solution. More generally it seems you need to import the widget:

from markdownfield.widgets import MDEWidget

then on a form field explicitly set it:

field.widget = MDEWidget()

There may be a cleaner way, an easier way, I don't know. I find that a bit clunky and would like to think the widget could b specified sort of as a global option, say like when including markdownfield in Django's INSTALLED_APPS or somewhere in the settings.py as a global setting. Strikes me you either want this widget on the site or not (and I think most would) and so django setting that the markdownfield app is sensitive to would be a great way to go methinks.

Exploring other options on this repo I note of interest:

https://github.com/dmptrluke/django-markdownfield/blob/master/markdownfield/forms.py

and from this:

https://github.com/dmptrluke/django-markdownfield/blob/18fd339f85aa743ddb65e67b5c9db5f91346040c/markdownfield/models.py#L65

That setting the use_editor attribute on the model field would suffice, which can be passed as a parameter when instantiating the model field. Which actually looks rather cool. I've got to try that out some time. Thanks for the prompt.

This issue stands. A clear explanation in the README on how to use it would be very useful and have saved my confusion, yours and this issue.

[salemandreus]

Oh wow, that was a fast response! I was actually just about to reply "actually no worries I figured it out". Thanks though! I may end up looking into yours if I have to implement a required field at some point, since my solution glitched on that.

I'll share my method in case it helps anyone else. Basically I after I posted my question I thought to re-check the original EasyMDE ReadMe just in case there was any workaround that wasn't too finicky with Django/Python.

Turns out all I had to do in addition to the documentation already up on this project was some template modifications:

1. Add this to my form's template (uses the UNPKG CDN) as mentioned here:

`<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">`
`<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>`

2. Add a bit of JS to target the element as mentioned here:

<script>new EasyMDE({element: document.getElementById('id_content')});</script>

And as mentioned, I then ran into this error and issue which occurred when creating a new post but not when updating an existing post.

Fortunately the model field it corresponded to was allowed to have null=True, blank=True (just a bit odd to post a blog post without any text content), which fixed it.

[benjaoming]

Add this to my form's template

You can also use Django Forms for this: https://docs.djangoproject.com/en/4.2/topics/forms/media/

[benjaoming]

I've tried to document this now and tested it on a local project. Your comments are most welcome :+1:

[salemandreus]

Nice! Thanks, everyone!

[salemandreus]

Add this to my form's template

You can also use Django Forms for this: https://docs.djangoproject.com/en/4.2/topics/forms/media/

Yeah, I figured there must be a django back-end way to do this. Thanks!