Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-75268

Create TinyMCE Premium plugins integration

XMLWordPrintable

    • MOODLE_401_STABLE, MOODLE_403_STABLE
    • MOODLE_403_STABLE
    • MDL-75268-master
    • Hide

      The following is a very basic set of instructions to confirm the plugins are behaving as expected. It is by no means exhaustive and it is encouraged that you experiment.

      Click on the headings to take you to the relevant Tiny Premium plugin page where you can learn more about their intended behaviour.

      Setup

      1. Login as an Admin
      2. Go to Site admin -> Plugins -> Mange editors and ensure TinyMCE is the preferred editor.
      3. Go to Site admin -> Plugins -> Tiny Premium and enter in a valid API key (reach out if you need assistance in getting one. You can also get a free trial at https://www.tiny.cloud/).
      4. Click on your user icon and choose 'Profile'. Then click 'Edit profile'. We just need a page with an editor on it.

      Smoke tests

      Advanced Tables

      1. Confirm that the ‘Table’ menu contains the new ‘Sort’ and ‘Row numbering’ items.
      2. Create a table, select the table and confirm that the intended behaviour for both items is working.

       

      Advanced Typography

      1. Confirm the ‘Typography’ icon is present to the right of the Italics button.
      2. Paste in this text to the editor: "It's over there", she said. "No. There" – -> – she pointed. (c) (tm)
      3. Highlight the text and click the ’Typography’ icon.
      4. Confirm the text has been converted.

       

      Case Change

      1. Confirm the ‘Capitalization’ icon has been added to the toolbar. Looks like ‘Aa’.
      2. Type some text, highlight the text and click the ‘Capitalization’ icon.
      3. Choose each of the options and confirm that they behave correctly

       

      Checklist

      1. Confirm that the ‘Checklist’ icon has been added to the toolbar. Looks like a list with ticks.
      2. Click the ‘Checklist’ icon and type in something to confirm that it is behaving correctly. It should create some checkboxes that can be interacted with next to each item.

       

      Enhanced Image Editing

      1. Confirm there is an ‘Edit image’ icon added to the toolbar next to our existing ‘Image’ icon.
      2. Insert an image into the editor
      3. Click the image.
      4. Confirm that there are new rotation, flipping and cropping buttons and that they behave as expected.
      5. Click ‘Edit image’ icon and check that the edit image behaviour is working as expected.

       

      Export

      1. With some text content in the editor, click the ‘Tools’ menu and choose ‘Export -> PDF’
      2. Confirm you get a downloaded PDF version of the editor’s contents.

       

      Footnotes

      1. Confirm that the ‘Insert footnote’ icon has been added to the toolbar.
      2. Confirm that the ‘Insert footnote’ menu item has been added to the ‘Insert’ menu.
      3. Type in some text and highlight it.
      4. Click the ‘Insert footnote’ icon or menu item.
      5. Confirm that the superscript item has been applied to the text and there is a footnote entry at the bottom of the editor.

       

      Format Painter

      1. Confirm that the ‘Format painter’ icon has been added to the toolbar. Looks like a paint roller.
      2. Type in some text and apply some formatting e.g. italics or bold
      3. Type in some new text on another line.
      4. Highlight the formatted text from step #2 and click the ‘Format painter’ icon. Your icon should change to the paint roller.
      5. Click on all or part of the new text from step #3 and confirm the formatting has been applied.

       

      Link Checker

      1. Insert a link using our existing ‘Link’ icon.
      2. In the ‘Enter a URL’ field, insert a URL that is incorrect like www.goooooogggle.com
      3. After the link has been insert, press ‘Enter’ to return a new line.
      4. Confirm that your link is highlighted in red.
      5. Right-click on the link and confirm there are options to remove, open and ignore.

       

      Page Embed

      1. Confirm there is a new ‘Embed iframe’ icon next to the ‘Record video’ icon in the toolbar.
      2. Confirm there is a new menu item called ‘Insert/edit iframe’ in the ‘Insert’ menu.
      3. Click on the icon or menu item and enter in a valid embeddable source url e.g. https://www.youtube.com/embed/vBAbahDUUuE
      4. Confirm that the iframe is populated with the source.

       

      Permanent Pen

      1. Confirm that the  ‘Permanent pen’ icon has been added to the toolbar. Looks like a marker.
      2. Confirm that the ‘Permanent pen’ and ‘Permanent pen properties’ items have been added to the ‘Format’ menu
      3. Click somewhere blank in the editor, and then click the ‘Permanent pen’ icon and type something in.
      4. Confirm that the formatting of the permanent pen is applied to the text.
      5. Right-click on the text and confirm you see the ‘Permanent pen properties’ option.

       

      PowerPaste

      1. Open up Microsoft Word or similar.
      2. Create something in there with some formatting (e.g. a table, a coloured heading, some other formatted text, etc.)
      3. Copy all the contents of the Microsoft Word document (ctrl + a, ctrl +c)
      4. Paste it in to the editor and confirm that the formatting has been retained. You may get a dialogue window asking to keep or discard formatting. This will depend on the source of your copied document.

       

      Spell Checker Pro

      1. Confirm there is a new icon called ‘Spellcheck…’ added to the toolbar.
      2. Confirm that ‘Spellcheck’ and Spellcheck language’ and ‘Spellcheck…’ have been added to the ‘Tools’ menu
      3. Type something that is spelled incorrectly into the editor
      4. Confirm that a red underline is applied to the misspelled word.
      5. Click the ’Spellcheck…’ icon in the toolbar.
      6. Confirm that it presents you with the spellcheck dialogue window.
      7. Go back to your editor and right-click on a misspelled word.
      8. Confirm you are presented with options to replace the word with.

       

      Spelling Autocorrect

      1. Confirm that ‘Auto correct’ and ‘Capitalization’ items have been added to the ‘Tools’ menu.
      2. Enable and disable these when typing to confirm their behaviour is working (using both together can sometimes cancel Capitalization out).

       

      Table of Contents

      1. Confirm there is a new ‘Table of contents’ icon added to the toolbar.
      2. Confirm that ‘Table of contents’ has been added to the ‘Insert’ menu.
      3. Type in some headings (i.e. H3, H4, etc).
      4. Click on the ‘Table of contents’ icon or menu item.
      5. Confirm that the table of contents is created.
      Show
      The following is a very basic set of instructions to confirm the plugins are behaving as expected. It is by no means exhaustive and it is encouraged that you experiment. Click on the headings to take you to the relevant Tiny Premium plugin page where you can learn more about their intended behaviour. Setup Login as an Admin Go to Site admin -> Plugins -> Mange editors and ensure TinyMCE is the preferred editor. Go to Site admin -> Plugins -> Tiny Premium and enter in a valid API key (reach out if you need assistance in getting one. You can also get a free trial at https://www.tiny.cloud/ ). Click on your user icon and choose 'Profile'. Then click 'Edit profile'. We just need a page with an editor on it. Smoke tests Advanced Tables Confirm that the ‘Table’ menu contains the new ‘Sort’ and ‘Row numbering’ items. Create a table, select the table and confirm that the intended behaviour for both items is working.   Advanced Typography Confirm the ‘Typography’ icon is present to the right of the Italics button. Paste in this text to the editor: "It's over there", she said. "No. There" – -> – she pointed. (c) (tm) Highlight the text and click the ’Typography’ icon. Confirm the text has been converted.   Case Change Confirm the ‘Capitalization’ icon has been added to the toolbar. Looks like ‘Aa’. Type some text, highlight the text and click the ‘Capitalization’ icon. Choose each of the options and confirm that they behave correctly   Checklist Confirm that the ‘Checklist’ icon has been added to the toolbar. Looks like a list with ticks. Click the ‘Checklist’ icon and type in something to confirm that it is behaving correctly. It should create some checkboxes that can be interacted with next to each item.   Enhanced Image Editing Confirm there is an ‘Edit image’ icon added to the toolbar next to our existing ‘Image’ icon. Insert an image into the editor Click the image. Confirm that there are new rotation, flipping and cropping buttons and that they behave as expected. Click ‘Edit image’ icon and check that the edit image behaviour is working as expected.   Export With some text content in the editor, click the ‘Tools’ menu and choose ‘Export -> PDF’ Confirm you get a downloaded PDF version of the editor’s contents.   Footnotes Confirm that the ‘Insert footnote’ icon has been added to the toolbar. Confirm that the ‘Insert footnote’ menu item has been added to the ‘Insert’ menu. Type in some text and highlight it. Click the ‘Insert footnote’ icon or menu item. Confirm that the superscript item has been applied to the text and there is a footnote entry at the bottom of the editor.   Format Painter Confirm that the ‘Format painter’ icon has been added to the toolbar. Looks like a paint roller. Type in some text and apply some formatting e.g. italics or bold Type in some new text on another line. Highlight the formatted text from step #2 and click the ‘Format painter’ icon. Your icon should change to the paint roller. Click on all or part of the new text from step #3 and confirm the formatting has been applied.   Link Checker Insert a link using our existing ‘Link’ icon. In the ‘Enter a URL’ field, insert a URL that is incorrect like www.goooooogggle.com After the link has been insert, press ‘Enter’ to return a new line. Confirm that your link is highlighted in red. Right-click on the link and confirm there are options to remove, open and ignore.   Page Embed Confirm there is a new ‘Embed iframe’ icon next to the ‘Record video’ icon in the toolbar. Confirm there is a new menu item called ‘Insert/edit iframe’ in the ‘Insert’ menu. Click on the icon or menu item and enter in a valid embeddable source url e.g. https://www.youtube.com/embed/vBAbahDUUuE Confirm that the iframe is populated with the source.   Permanent Pen Confirm that the  ‘Permanent pen’ icon has been added to the toolbar. Looks like a marker. Confirm that the ‘Permanent pen’ and ‘Permanent pen properties’ items have been added to the ‘Format’ menu Click somewhere blank in the editor, and then click the ‘Permanent pen’ icon and type something in. Confirm that the formatting of the permanent pen is applied to the text. Right-click on the text and confirm you see the ‘Permanent pen properties’ option.   PowerPaste Open up Microsoft Word or similar. Create something in there with some formatting (e.g. a table, a coloured heading, some other formatted text, etc.) Copy all the contents of the Microsoft Word document (ctrl + a, ctrl +c) Paste it in to the editor and confirm that the formatting has been retained. You may get a dialogue window asking to keep or discard formatting. This will depend on the source of your copied document.   Spell Checker Pro Confirm there is a new icon called ‘Spellcheck…’ added to the toolbar. Confirm that ‘Spellcheck’ and Spellcheck language’ and ‘Spellcheck…’ have been added to the ‘Tools’ menu Type something that is spelled incorrectly into the editor Confirm that a red underline is applied to the misspelled word. Click the ’Spellcheck…’ icon in the toolbar. Confirm that it presents you with the spellcheck dialogue window. Go back to your editor and right-click on a misspelled word. Confirm you are presented with options to replace the word with.   Spelling Autocorrect Confirm that ‘Auto correct’ and ‘Capitalization’ items have been added to the ‘Tools’ menu. Enable and disable these when typing to confirm their behaviour is working (using both together can sometimes cancel Capitalization out).   Table of Contents Confirm there is a new ‘Table of contents’ icon added to the toolbar. Confirm that ‘Table of contents’ has been added to the ‘Insert’ menu. Type in some headings (i.e. H3, H4, etc). Click on the ‘Table of contents’ icon or menu item. Confirm that the table of contents is created.
    • 6
    • Team Hedgehog 2023 Review 2, Team Hedgehog 2023 Sprint 3.1, Team Hedgehog 2023 Sprint 3.2

      TinyMCE offer a range of Premium plugins which can be loaded from their site after inserting a license key (paid addition).

      Pricing: https://www.tiny.cloud/pricing/
      List of plugins: https://www.tiny.cloud/docs/tinymce/6/plugins/

      To integrate with Moodle we should:

      • review the prototype I put together before and make sure it works
      • convert it into a new plugin (tiny_premium located in lib/editor/tiny/plugins/premium)
      • check each plugin and remove:
        • any plugin which requires server components
        • any plugin which requires administrator configuration (e.g. Advanced Templates - though this requires a newer version of Tiny than we currently use)
        • any plugin which conflicts with an existing Moodle feature (e.g. Accessibility checker, MoxieManager)
      • then for any of those plugins that we do not include, we should create an issue in which we will:
        • determine if we wish to have that feature or not (if no, we'll close the issue)
        • determine what UI changes are required for it (e.g. any site and/or user preferences)

      Ideally we'll have be able to make the plugin available in plugins DB for stables too.

      Old description:

      We should look into:

      • whether it would be technically possible to support the Premium plugins natively in Moodle without requiring code changes
      • whether Tiny themselves are a viable integration partner for Moodle (pinging carles.aguilo@moodle.com)
      • which plugins/integrations we can support

      I believe that we should be able to add support for a license key field within Moodle's site administration and, if present, make the premium plugins available. This would be basic premium features. It may be possible to integrate additional premium features via further configuration.

      Compatible Premium features

      We need to assess which of the premium features we can include.

      Server-side requirements

      The following premium features require additional server-side configuration which means that we would not enable by them without additional configuration (that is a checkbox/text field):

      • Spell checking
      • Export
      • Enhanced image editing
      • Enhanced media embed
      • Link checker

      Source: https://www.tiny.cloud/docs/tinymce/6/introduction-to-premium-selfhosted-services/

      Moodle-plugins better suited

      Some of the premium features will be better server as Moodle plugins anyway

      • a11y checker?
      • code editor
      • MoxieManager (File and image management)
      Simply incompatible with Moodle at this time

      Some are just not likely to be compatible with Moodle at this time:

      • Real-time collaboration
      • Checklists
      • Mentions

      Getting started

      Andrew has included a proof of concept to get things started, here are some notes on what's required to continue that work:

      1. Move the code to a tiny plugin
      2. Set up the configuration for the features that will be included and finish the implementation.
      3. Analyse and document which features are compatible with Moodle and make sense to include in Moodle. In case it needs further investigation, create a new issue for it inside the same epic.

      NOTE: Do NOT include in the plugin any features that need extra configuration, create a new issue for those.

        1. premium-toolbar.png
          premium-toolbar.png
          47 kB
        2. MDL-75268-Checklist.png
          MDL-75268-Checklist.png
          370 kB
        3. MDL-75268-Table of Contents.png
          MDL-75268-Table of Contents.png
          360 kB
        4. MDL-75268- Export.png
          MDL-75268- Export.png
          434 kB
        5. MDL-75268- PowerPaste.png
          MDL-75268- PowerPaste.png
          450 kB
        6. MDL-75268-Spelling Autocorrect.png
          MDL-75268-Spelling Autocorrect.png
          393 kB
        7. MDL-75268- Format Painter.png
          MDL-75268- Format Painter.png
          617 kB
        8. MDL-75268-Advanced Tables.png
          MDL-75268-Advanced Tables.png
          703 kB
        9. MDL-75268-Case Change.png
          MDL-75268-Case Change.png
          548 kB
        10. MDL-75268-Footnote.png
          MDL-75268-Footnote.png
          571 kB
        11. MDL-75268-Link Checker.png
          MDL-75268-Link Checker.png
          565 kB
        12. MDL-75268-Page Embed.png
          MDL-75268-Page Embed.png
          635 kB
        13. MDL-75268-Permanent Pen.png
          MDL-75268-Permanent Pen.png
          640 kB
        14. MDL-75268-Typography.png
          MDL-75268-Typography.png
          518 kB
        15. MDL-75268-Spell Checker Pro.png
          MDL-75268-Spell Checker Pro.png
          761 kB
        16. MDL-75268-Enhanced Image Editing.png
          MDL-75268-Enhanced Image Editing.png
          3.56 MB

            david.woloszyn@moodle.com David Woloszyn
            dobedobedoh Andrew Lyons
            Huong Nguyen Huong Nguyen
            Andrew Lyons Andrew Lyons
            Ron Carl Alfon Yu Ron Carl Alfon Yu
            Votes:
            0 Vote for this issue
            Watchers:
            16 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 week, 3 days, 5 hours, 27 minutes
                1w 3d 5h 27m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.