Mike Slinn
Mike Slinn

WSIWYG HTML Editors for Django-Oscar

Published 2021-03-30.

This article is categorized under Django-Oscar.

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
TinyMCE

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
(oscar) $ 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
(oscar) $ 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>