0

My editors want to have an ability to edit raw html within editor. For example, we can have simple list markup:

<ul>
   <li>Some text<li>
</ul>

Or with custom classes and event tags:

<ul>
   <li class="my_class">Some text
       <span class="special">Some additional info</span>
   <li>
</ul>

And so on.

I know that built-in Draftail doesnt support html editing. But using third-party editor comes with problem:

Losing integration with system. For example, i cant just put image like with draftail. Or, preview mode cant handle all functionality of third-party editor.

So, maybe someone has working solution for this situation. I thought about using special StreamField panels, but it seems to be overhead of blocks. Dont like this idea of having lots of blocks with little differences

Vladislav
  • 47
  • 1
  • 7

2 Answers2

1

Wagtail does not support raw HTML editing within the page editor out of the box intentionally. The philosophy (zen) of Wagtail is to help editors and developers 'wear the right hat' when working in Wagtail.

HTML editing is usually best provided to developers, where there is an expected knowledge of what is required for things like accessibility, security and the benefit of tooling (like git).

However, if HTML editing is a must, you will probably need to build your own editor field for that purpose or find a suitable package that works with HTML markup such as django-markupfield. Adding image/snippet/page chooser functionality however will have to be built for whatever you end up using. You may also want to look at the Wagtail markdown package either as an alternative to HTML or a starting point, it allows for a syntax of linking to pages/images.

Wagtail lets you use any kind of Django field or widget with the FieldPanel.

Please ensure you consider all the risks when implementing this feature, such as accessible HTML (e.g. heading levels), security (disallow some tags such as script tags), malformed HTML leaking into the rendered template and of course the end user experience.

LB Ben Johnston
  • 4,751
  • 13
  • 29
  • Thank for your answer. I`ve already implemented it. Using tinymce and a little customization of built-in html converter. I know about wagtail zen, but my client wants this functionality... – Vladislav Feb 01 '22 at 10:50
  • 1
    Awesome, glad to hear you got it working. May I suggest you write a new answer to the question with a quick overview of how you got it working - it may help other users find a solution in the future. And yes - I understand, in the end of the client wants it we often just have to make it work. – LB Ben Johnston Feb 01 '22 at 19:11
0

At the end i made my own solution Simple rewrite some methods in wagtail`s Html DbWhiteLister and HtmlConverter. This gives me an opportunity to allow any tags with any attributes.

https://github.com/Chenger1/wagtailtinymce.-Full-Rich-Text-Editor

Vladislav
  • 47
  • 1
  • 7