Adds support for enabling custom tinymce plugins in Studio's HTML editor (#25695)

This commit is contained in:
Nizar
2021-01-11 19:28:20 +03:00
committed by GitHub
parent b49ebb93f8
commit 1e872d4e10
10 changed files with 169 additions and 11 deletions

View File

@@ -63,6 +63,9 @@ If you want to provide learners with new content experiences within courses, opt
* - **External Graders**
- Hold, Stable
- An external grader is a service that receives learner responses to a problem, processes those responses, and returns feedback and a problem grade to the edX platform. You build and deploy an external grader separately from the edX platform. An external grader is particularly useful for software programming courses where learners are asked to submit complex code. See the `external grader documentation`_ for details.
* - **TinyMCE (Visual Text/HTML Editor) Plugins**
- Trial, Limited
- TinyMCE's functionality can be extended with so-called Plugins. Custom TinyMCE plugins can be particularly useful for serving certain content in courses that isn't available yet; they can also be used to facilitate the educator's work. `You can follow this guide to install and enable custom TinyMCE plugins`_.
For a more detailed comparison of content integration options, see `Options for Extending the edX Platform`_ in the *Open edX Developer's Guide*.
@@ -72,6 +75,7 @@ For a more detailed comparison of content integration options, see `Options for
.. _Options for Extending the edX Platform: https://edx.readthedocs.io/projects/edx-developer-guide/en/latest/extending_platform/extending.html
.. _custom JavaScript application: https://edx.readthedocs.io/projects/edx-developer-guide/en/latest/extending_platform/javascript.html
.. _external grader documentation: https://edx.readthedocs.io/projects/open-edx-ca/en/latest/exercises_tools/external_graders.html
.. _You can follow this guide to install and enable custom TinyMCE plugins: extensions/tinymce_plugins.rst

View File

@@ -0,0 +1,65 @@
TinyMCE (Visual Text/HTML Editor) Plugins
-----------------------------------------
The flexibility of the TinyMCE Visual Text and HTML editor makes it possible to configure and extend the editor using different plugins. In order to make use of that modularity in Studio, you'll need to follow two different steps.
Installing Plugins
==================
Initially, we'll need to specify which plugins need to install so that they can be bundled with the static assets.
There's a decent `guide on installing the plugins through the edX configuration`_, specifically using the ``TINYMCE_ADDITIONAL_PLUGINS_LIST`` configuration variable.
Enabling Plugins
================
Enabling the plugins requires adding a Studio environment setting which the JavaScript code can access, ``JS_ENV_EXTRA_CONFIG``. It is simply a dictionary which would contain different extra JavaScript configurations.
The extra JavaScript configuration that's responsible for enabling TinyMCE plugins is ``TINYMCE_ADDITIONAL_PLUGINS``. This is a list of different TinyMCE plugins which you would want to enable.
Each TinyMCE plugin has the following attributes.
.. list-table::
:header-rows: 1
:widths: 15 10 75
* - attribute
- type
- description
* - ``name``
- string
- The name of the TinyMCE plugin which would be included in the editor's list of plugins.
* - ``toolbar``
- boolean
- Indicates whether this plugin should be displayed in the toolbar or not.
* - ``extra_settings``
- object
- Specifies the extra plugin settings that need to be added to the TinyMCE editor's configuration.
Here's an example:
.. code:: yaml
EDXAPP_CMS_ENV_EXTRA:
JS_ENV_EXTRA_CONFIG:
TINYMCE_ADDITIONAL_PLUGINS:
- name: adsklink
toolbar: true
extra_settings:
linktypes:
- Download
- Offer
filetypes:
- PDF
- ZIP
- Video
- Design
orientations:
- Vertical
- Horizontal
styles:
- Primary
- Normal
- Secondary
.. _guide on installing the plugins through the edX configuration: https://github.com/edx/configuration/blob/master/playbooks/roles/tinymce_plugins/README.rst