Django and Oscar

WSIWYG HTML Editors for Django-Oscar

Published 2021-03-30.
Time to read: 1 minutes.

This page is part of the django collection.

Django-oscar 3.0.2 uses v5.6.2 TinyMCE as a WSIWYG HTML Editor. TinyMCE is used in the django-oscar dashboard for all textarea elements with the class wysiwyg. For example, the Admin Emails Template Editor is powered by TinyMCE.

TinyMCE has successfully been used with Django and django-oscar for years and the combination is well understood. Django-summernote seems to have been getting more attention lately as a resource for Django apps, instead of reusing the TinyMCE arftifacts already provided by the Django admin apps. Is there a significant reason to use Summernote django-oscar custom code? I do not know the answer. Below is all I know at this point.

TinyMCE Use in Django-Oscar

Django-oscar.readthedocs.io shows where TinyMCE is used by django-oscar. Directly examining the django-oscar git repository shows more specific information:

Shell
(aw) $ git grep wysiwyg  # django-oscar GitHub project
docs/source/releases/v0.6.rst:the class ``wysiwyg``.  This has better browser support and is easier to
docs/source/releases/v0.6.rst:   *Textarea with class ``wysiwyg`` now use TinyMCE.*
src/oscar/forms/widgets.py:        kwargs['attrs']['class'] += ' wysiwyg'
src/oscar/static_src/oscar/js/oscar/dashboard.js:            $textareas.filter('form.wysiwyg textarea').tinymce(o.dashboard.options.tinyConfig);
src/oscar/static_src/oscar/js/oscar/dashboard.js:            $textareas.filter('.wysiwyg').tinymce(o.dashboard.options.tinyConfig);
src/oscar/templates/oscar/dashboard/catalogue/attribute_option_group_form.html:    <form class="form-stacked wysiwyg fixed-actions" method="post" data-behaviour="tab-nav-errors">
src/oscar/templates/oscar/dashboard/catalogue/category_form.html:    <form action="{% if request.GET.urlencode %}?{{ request.GET.urlencode }}{% endif %}" method="post" class="form-stacked wysiwyg fixed-actions" enctype="multipart/form-data" data-behaviour="tab-nav-errors" autocomplete="off">
src/oscar/templates/oscar/dashboard/catalogue/option_form.html:    <form class="form-stacked wysiwyg fixed-actions" method="post" data-behaviour="tab-nav-errors">
src/oscar/templates/oscar/dashboard/catalogue/product_class_form.html:    <form class="form-stacked wysiwyg fixed-actions" method="post" data-behaviour="tab-nav-errors">
src/oscar/templates/oscar/dashboard/catalogue/product_update.html:    <form action="{% if request.GET.urlencode %}?{{ request.GET.urlencode }}{% endif %}" method="post" class="form-stacked wysiwyg fixed-actions" enctype="multipart/form-data" data-behaviour="tab-nav-errors" autocomplete="off">
src/oscar/templates/oscar/dashboard/offers/step_form.html:            <form method="post" class="form-stacked wysiwyg fixed-actions">
src/oscar/templates/oscar/dashboard/pages/update.html:<form method="post" class="card card-body form-stacked wysiwyg" enctype="multipart/form-data">
src/oscar/templates/oscar/dashboard/partners/partner_user_form.html:    <form method="post" class="card card-body form-stacked wysiwyg" enctype="multipart/form-data">
src/oscar/templates/oscar/dashboard/ranges/range_form.html:    <form method="post" class="form-stacked card card-body bg-light wysiwyg">
src/oscar/templates/oscar/dashboard/shipping/weight_based_form.html:    <form method="post" class="form-stacked card card-body bg-light wysiwyg"> 

Git-grep shows that the django-oscar dashboard apps that use TinyMCE are: catalogue, offers, pages, partners, ranges, and shipping.

Shell
(aw) $ git grep tinymce
docs/source/releases/v0.6.rst:.. figure:: screenshots/0.6/tinymce.png
docs/source/releases/v0.6.rst:.. _`TinyMCE 4.0`: http://www.tinymce.com/
docs/source/releases/v2.0.rst:- Upgraded ``tinymce`` to version 4.8.3.
docs/source/releases/v2.1.rst:- Upgraded ``tinymce`` to version 5.3.
docs/source/releases/v3.0.rst:- Upgraded ``tinymce`` to version 5.6.
gulpfile.js/subtasks/copy.js:        "node_modules/tinymce/**/*.min.js",
gulpfile.js/subtasks/copy.js:        "node_modules/tinymce/**/*.min.css",
gulpfile.js/subtasks/copy.js:        "node_modules/tinymce/**/fonts/*",
gulpfile.js/subtasks/copy.js:        "node_modules/tinymce/**/img/*",
gulpfile.js/subtasks/copy.js:    ]).pipe(gulp.dest("src/oscar/static/oscar/js/tinymce"));
package-lock.json:    "tinymce": {
package-lock.json:      "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-5.6.2.tgz",
package.json:    "tinymce": "^5.6.2"
src/oscar/static_src/oscar/js/oscar/dashboard.js:            $textareas.filter('form.wysiwyg textarea').tinymce(o.dashboard.options.tinyConfig);
src/oscar/static_src/oscar/js/oscar/dashboard.js:            $textareas.filter('.wysiwyg').tinymce(o.dashboard.options.tinyConfig);
src/oscar/templates/oscar/dashboard/layout.html:    <script src="{% static "oscar/js/tinymce/tinymce.min.js" %}"></script>
src/oscar/templates/oscar/dashboard/layout.html:    <script src="{% static "oscar/js/tinymce/jquery.tinymce.min.js" %}"></script> 
* indicates a required field.

Please select the following to receive Mike Slinn’s newsletter:

You can unsubscribe at any time by clicking the link in the footer of emails.

Mike Slinn uses Mailchimp as his marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp’s privacy practices.