Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-34875 TinyMCE improvements in 2.4 - META
  3. MDL-33041

TinyMCE: Support custom plugins

XMLWordPrintable

    • MOODLE_24_STABLE
    • MOODLE_24_STABLE
    • w33_MDL-33041_m24_tinymceplugins
    • Hide

      You can test in almost any instance of the editor, but so as to clarify, I suggest that you go to any course settings page and use the 'Course summary' editor at top.

      Except for an improvement in caching behaviour, this test script should have the same result after this change as before.

      PART ONE - ENABLING PLUGINS

      0. If necessary, edit filter settings in admin and enable the TeX and emoticon filters.
      1. Look at the editor.
      * Verify that it contains all of the custom plugin buttons: no-link, smiley, media, dragmath, and spellchecker.
      2. In a separate tab, open the Filters page from under Course administration in Settings block. Turn Emoticons off and save changes.
      3. Reload the course settings page.
      * The emoticons button should have disappeared, while the other three remain.
      4. In the filters page, turn emoticons on again but turn off TeX. Reload course settings page.
      * The equation button should now have disappeared, but the smiley is back.
      5. Now turn both filters back to Default (On) again and save ready for further testing.
      6. Go to the TinyMCE settings page in admin, temporarily remove (cut to clipboard) the 'spell language list', and save changes.
      7. Reload the course settings page.
      * The spell checker button should have disappeared.
      8. Put the spell language list back and save changes again.

      Note: The 'insert media' button (and no-link) is always on and does not depend on filters. This is how it worked before too.

      PART TWO - PLUGINS STILL ACTUALLY WORK

      1. Type 'This is a frog.' into the editor and double-click to select the word 'frog'.
      2. Click the no-link button.
      3. Click HTML button to see source code
      * Should be: <p>This is a <span class="nolink">frog</span>.</p>
      4. Cancel out of the HTML view, then click the 'insert media' button.
      5. Click 'Find or upload...' button.
      6. Select or upload an mp3 file.
      * Once selected, a preview player for the mp3 should appear.
      7. Play the mp3 file from the preview.
      * Check it plays OK.
      8. Click 'Insert'.
      * A link to your mp3 file, with the text being the name of the file, should be added into the editor.
      9. Click the smiley button.
      * A dialog showing lots of smileys should appear.
      10. Scroll down to bottom of dialog and have a look.
      * There should be a Cancel button.
      11. Mouse over to the 'big grin' smiley and click it.
      * While mousing over, a highlight bar should display.
      * When you click it, the dialog should disappear and the smiley should be inserted in your text.
      12. Click the equation button. (You may have to confirm a security prompt and wait a bit for Java to load.)
      * Dialog should pop up containing the Java equation editor
      13. Piddle about with the editor a bit until you get it to actually insert something.
      14. Click the Insert button.
      * TeX code representing your piddling about (surrounded by $$ markers) should be inserted into the editor.
      15. Delete editor content and type the text 'frog frogg'. Click the spell checker button.
      * The incorrectly spelled word should be underlined.
      16. Click on the incorrectly spelled word.
      * A suggestion list should appear.

      PART THREE - CACHING

      You will need to use a tool such as Firebug or equivalent in other browsers to monitor downloads during this part of the test. Instructions are written for Firebug.

      0. Go into your server settings and set debugging to 'Developer' level.
      1. Open Firebug 'Net' panel and switch it to the 'JS' tab.
      2. Go to a course settings page (this part is to make sure editor is cached as much as it will allow) then go to the course page, then go back to course settings.
      3. Look for four editor_plugin.js requests beginning with lib/editor/tinymce/plugins/loader.php/dragmath/-1/editor_plugin.js.
      * The requests should be shown in bold and showing a 'Remote IP' value, indicating that the file was actually requested and not cached.
      4. Right-click on one of the files and choose 'Open in new tab'.
      * The file should have normal formatting with multiple lines.
      5. Now change debugging to the level just below 'Developer' (ALL).
      6. Go to the course settings page (again, to make sure editor is cached) then go to the course page, then back to course settings.
      7. Look in Firebug for the four .js requests.
      * The requests should be HTTP 200 OK but grey and without any 'Remote IP' value, indicating that they were loaded from cache.
      * The first URL should now be something like lib/editor/tinymce/plugins/loader.php/dragmath/2012051700/editor_plugin.js (containing a version number).
      8. Right-click on one of the files and choose 'Open in new tab'.
      * The file should be minimised (on a single line).
      9. Close all windows of your browser completely.
      10. Open the browser again, go back to Moodle, and log in.
      11. Open Firebug 'Net' panel if needed and switch to 'JS' tab.
      12. Go to a course settings page.
      13. Look in net panel for the four .js requests.
      * The requests should still be grey HTTP 200 OK without a 'Remote IP' value, indicating that they are still cached even after the session ended and no server requests were made.

      Show
      You can test in almost any instance of the editor, but so as to clarify, I suggest that you go to any course settings page and use the 'Course summary' editor at top. Except for an improvement in caching behaviour, this test script should have the same result after this change as before. PART ONE - ENABLING PLUGINS 0. If necessary, edit filter settings in admin and enable the TeX and emoticon filters. 1. Look at the editor. * Verify that it contains all of the custom plugin buttons: no-link, smiley, media, dragmath, and spellchecker. 2. In a separate tab, open the Filters page from under Course administration in Settings block. Turn Emoticons off and save changes. 3. Reload the course settings page. * The emoticons button should have disappeared, while the other three remain. 4. In the filters page, turn emoticons on again but turn off TeX. Reload course settings page. * The equation button should now have disappeared, but the smiley is back. 5. Now turn both filters back to Default (On) again and save ready for further testing. 6. Go to the TinyMCE settings page in admin, temporarily remove (cut to clipboard) the 'spell language list', and save changes. 7. Reload the course settings page. * The spell checker button should have disappeared. 8. Put the spell language list back and save changes again. Note: The 'insert media' button (and no-link) is always on and does not depend on filters. This is how it worked before too. PART TWO - PLUGINS STILL ACTUALLY WORK 1. Type 'This is a frog.' into the editor and double-click to select the word 'frog'. 2. Click the no-link button. 3. Click HTML button to see source code * Should be: <p>This is a <span class="nolink">frog</span>.</p> 4. Cancel out of the HTML view, then click the 'insert media' button. 5. Click 'Find or upload...' button. 6. Select or upload an mp3 file. * Once selected, a preview player for the mp3 should appear. 7. Play the mp3 file from the preview. * Check it plays OK. 8. Click 'Insert'. * A link to your mp3 file, with the text being the name of the file, should be added into the editor. 9. Click the smiley button. * A dialog showing lots of smileys should appear. 10. Scroll down to bottom of dialog and have a look. * There should be a Cancel button. 11. Mouse over to the 'big grin' smiley and click it. * While mousing over, a highlight bar should display. * When you click it, the dialog should disappear and the smiley should be inserted in your text. 12. Click the equation button. (You may have to confirm a security prompt and wait a bit for Java to load.) * Dialog should pop up containing the Java equation editor 13. Piddle about with the editor a bit until you get it to actually insert something. 14. Click the Insert button. * TeX code representing your piddling about (surrounded by $$ markers) should be inserted into the editor. 15. Delete editor content and type the text 'frog frogg'. Click the spell checker button. * The incorrectly spelled word should be underlined. 16. Click on the incorrectly spelled word. * A suggestion list should appear. PART THREE - CACHING You will need to use a tool such as Firebug or equivalent in other browsers to monitor downloads during this part of the test. Instructions are written for Firebug. 0. Go into your server settings and set debugging to 'Developer' level. 1. Open Firebug 'Net' panel and switch it to the 'JS' tab. 2. Go to a course settings page (this part is to make sure editor is cached as much as it will allow) then go to the course page, then go back to course settings. 3. Look for four editor_plugin.js requests beginning with lib/editor/tinymce/plugins/loader.php/dragmath/-1/editor_plugin.js. * The requests should be shown in bold and showing a 'Remote IP' value, indicating that the file was actually requested and not cached. 4. Right-click on one of the files and choose 'Open in new tab'. * The file should have normal formatting with multiple lines. 5. Now change debugging to the level just below 'Developer' (ALL). 6. Go to the course settings page (again, to make sure editor is cached) then go to the course page, then back to course settings. 7. Look in Firebug for the four .js requests. * The requests should be HTTP 200 OK but grey and without any 'Remote IP' value, indicating that they were loaded from cache. * The first URL should now be something like lib/editor/tinymce/plugins/loader.php/dragmath/2012051700/editor_plugin.js (containing a version number). 8. Right-click on one of the files and choose 'Open in new tab'. * The file should be minimised (on a single line). 9. Close all windows of your browser completely. 10. Open the browser again, go back to Moodle, and log in. 11. Open Firebug 'Net' panel if needed and switch to 'JS' tab. 12. Go to a course settings page. 13. Look in net panel for the four .js requests. * The requests should still be grey HTTP 200 OK without a 'Remote IP' value, indicating that they are still cached even after the session ended and no server requests were made.

      (NOTE: As this is a new feature, it is probably appropriate for Moodle 2.4. The version is set to 2.3 because there isn't an entry for 2.4 yet.)

      At present there are 4 moodle core custom plugins inside TinyMCE. These are stored within the versioned TinyMCE folder, and hardcoded into the TinyMCE options in the lib.php file. This approach sucks because:

      • The Moodle plugins shouldn't really be stored inside the third-party library folder, which changes every time the TinyMCE version is updated.
      • It is impossible to include extra TinyMCE plugins in a Moodle installation without making a change to core code (lib.php), as well as putting your own plugins inside that third-party library folder.

      My proposal is as follows:

      • Create a plugins folder directly inside lib/editor/tinymce.
      • As editors cannot have subplugins (only modules can), the contents of this folder will not be standard Moodle plugins, but will be a lightweight plugin type defined and handled specially within editor/tinymce.
      • lib.php for these plugins contains a suitable plugin class which will be able to do the following:

      a) Modify the TinyMCE options (e.g. add or remove plugins from the list of buttons, in whatever row)
      b) Return details of their own TinyMCE plugin name and JavaScript file(s) so it can be passed as parameter to the M.editor_tinymce.init_editor or something, so that it can end up calling this function before tinyMCE.init (example from Tim's plugin):

      tinymce.PluginManager.load('supsub', M.cfg.wwwroot + '/lib/editor/supsub/supsub_plugin.js');

      • Move the existing Moodle TinyMCE plugins into this new framework and remove the hardcoded conditions (about whether to use them or not) from the lib.php so that they are equivalent level to any new custom plugins that users may add.

        1. TinyMCE plugins.jpg
          TinyMCE plugins.jpg
          80 kB

            quen Sam Marshall
            quen Sam Marshall
            Petr Skoda Petr Skoda
            Dan Poltawski Dan Poltawski
            Tim Barker Tim Barker
            Votes:
            12 Vote for this issue
            Watchers:
            12 Start watching this issue

              Created:
              Updated:
              Resolved:

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