'Using Froala editor in Wagtail 2.14

I have been using Froala within Wagtail v1.13 and it works great, using the following: https://github.com/jaydensmith/wagtailfroala

Now upgraded to Wagtail 2.14. But the above plugin doesn't support v2 but there is a fork and a pull request that say they support Wagtail v2+

So I've tried manually implemented the changes from each of the following:

The editor seems to works apart from trying to insert an image, it shows the image library, but then when you try to select an image rather than allowing you to select image formats it loads the following URL:

http://127.0.0.1:8000/admin/images/chooser/133/select_format/

Which returns the following JSON:

html:   "\n\n\n\n\n<header class=\"  \">\n    \n    <div class=\"row nice-padding\">\n        <div class=\"left\">\n            <div class=\"col header-title\">\n                <h1>\n                Choose a format</h1>\n            </div>\n            \n        </div>\n        <div class=\"right\">\n            \n                \n            \n        </div>\n    </div>\n</header>\n\n\n<div class=\"row row-flush nice-padding\">\n    <div class=\"col6\">\n        <img alt=\"Photo\" class=\"show-transparency\" height=\"450\" src=\"/media/images/Photo.max-800x600_zft9HEG.png\" width=\"800\">\n    </div>\n    <div class=\"col6\">\n        <form action=\"/admin/images/chooser/133/select_format/\" method=\"POST\" novalidate>\n            <input type=\"hidden\" name=\"csrfmiddlewaretoken\" value=\"5q5yNdUY3xt8BPbIbrulWQopP6bp7iqGYRDuzQQpee4LhJ0eMxRxM1xOaxpufXo8\">\n            <ul class=\"fields\">\n                \n                    \n<li class=\"required  label-above \">\n    \n<div class=\"field choice_field radio_select \" data-contentpath=\"format\">\n    <label for=\"id_image-chooser-insertion-format_0\">Format:</label>\n    <div class=\"field-content\">\n        <div class=\"input  \">\n            \n                <ul id=\"id_image-chooser-insertion-format\">\n    <li><label for=\"id_image-chooser-insertion-format_0\"><input type=\"radio\" name=\"image-chooser-insertion-format\" value=\"fullwidth\" required id=\"id_image-chooser-insertion-format_0\">\n Full width</label>\n\n</li>\n    <li><label for=\"id_image-chooser-insertion-format_1\"><input type=\"radio\" name=\"image-chooser-insertion-format\" value=\"left\" required id=\"id_image-chooser-insertion-format_1\">\n Left-aligned</label>\n\n</li>\n    <li><label for=\"id_image-chooser-insertion-format_2\"><input type=\"radio\" name=\"image-chooser-insertion-format\" value=\"right\" required id=\"id_image-chooser-insertion-format_2\">\n Right-aligned</label>\n\n</li>\n</ul>\n            \n\n            \n            <span></span>\n        </div>\n        \n\n        \n    </div>\n\n    \n</div>\n\n</li>\n                \n                    \n<li class=\"  label-above \">\n    \n<div class=\"field boolean_field checkbox_input \" data-contentpath=\"image_is_decorative\">\n    <label for=\"id_image-chooser-insertion-image_is_decorative\">Image is decorative:</label>\n    <div class=\"field-content\">\n        <div class=\"input  \">\n            \n                <input type=\"checkbox\" name=\"image-chooser-insertion-image_is_decorative\" id=\"id_image-chooser-insertion-image_is_decorative\">\n            \n\n            \n            <span></span>\n        </div>\n        \n\n        \n    </div>\n\n    \n</div>\n\n</li>\n                \n                    \n<li class=\"  label-above \">\n    \n<div class=\"field char_field text_input \" data-contentpath=\"alt_text\">\n    <label for=\"id_image-chooser-insertion-alt_text\">Alt text:</label>\n    <div class=\"field-content\">\n        <div class=\"input  \">\n            \n                <input type=\"text\" name=\"image-chooser-insertion-alt_text\" value=\"Photo\" id=\"id_image-chooser-insertion-alt_text\">\n            \n\n            \n            <span></span>\n        </div>\n        \n\n        \n    </div>\n\n    \n</div>\n\n</li>\n                \n                <li><input type=\"submit\" value=\"Insert image\"  class=\"button\" /></li>\n            </ul>\n        </form>\n    </div>\n</div>\n"
step:   "select_format"

Also trying to click on "next page" within the image library dialog doesn't work either, instead it seems to send the click to the main page under the dialog.

Any idea's?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source