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

TinyMCE - Add source code formatting and styling

    XMLWordPrintable

Details

    • MOODLE_403_STABLE
    • MOODLE_403_STABLE
    • master_MDL-78613
    • Hide

      NOTES:
      Behat tests will not pass until MDL-76853 is done and this branch is rebased over it.
      Not everything is covered by Behat tests as tag suggestions and tag completion rely on keyboard events that are unreliable when mocked with JavaScript.

      Testing:

      Text formatting:

      1. Log into Moodle as an administrator
      2. Navigate to: Site administration > Plugins > TinyMCE editor
      3. Confirm "TinyMCE HTML formatter" is installed and enabled
      4. Navigate to anywhere that uses the TinyMCE editor. For example: the description field when you are editing your own user profile.
      5. Add text, tables and a mixture of differently formatted content to the WYSIWYG editor
      6. From the TinyMCE editor menu select "view > Source code"
      7. Confirm the "Source code" modal appears
      8. Confirm that the HTML for the content you entered in WYSIWYG mode is "pretty" formatted (indented etc.) and that the code tags are colored.

      Tag completion and suggestion:

      1. While the source code modal is open from the previous test. If it isn't follow the same setup instructions from that test
      2. In code view of the editor start to enter a new HTML tag. For example '<di'
      3. Confirm as you enter the partial tag a list of matching potential tags appears
      4. Select one of the tags with either your mouse or arrow keys and enter.
      5. Confirm that the tag is completed by the editor (without the closing >)
      6. Enter the closing '>' and confirm that a mathing closing tag for the one you entered is automatically generated
      7. Finish entering your content then click "save"
      8. Confirm that your new content is displayed in the WYSIWYG editor
      9. From the TinyMCE editor menu select "view > Source code"
      10. Confirm the newly entered HTML code has been formatted and contains coloring.
      Show
      NOTES: Behat tests will not pass until MDL-76853 is done and this branch is rebased over it. Not everything is covered by Behat tests as tag suggestions and tag completion rely on keyboard events that are unreliable when mocked with JavaScript. Testing: Text formatting: Log into Moodle as an administrator Navigate to: Site administration > Plugins > TinyMCE editor Confirm "TinyMCE HTML formatter" is installed and enabled Navigate to anywhere that uses the TinyMCE editor. For example: the description field when you are editing your own user profile. Add text, tables and a mixture of differently formatted content to the WYSIWYG editor From the TinyMCE editor menu select "view > Source code" Confirm the "Source code" modal appears Confirm that the HTML for the content you entered in WYSIWYG mode is "pretty" formatted (indented etc.) and that the code tags are colored. Tag completion and suggestion: While the source code modal is open from the previous test. If it isn't follow the same setup instructions from that test In code view of the editor start to enter a new HTML tag. For example '<di' Confirm as you enter the partial tag a list of matching potential tags appears Select one of the tags with either your mouse or arrow keys and enter. Confirm that the tag is completed by the editor (without the closing > ) Enter the closing '>' and confirm that a mathing closing tag for the one you entered is automatically generated Finish entering your content then click "save" Confirm that your new content is displayed in the WYSIWYG editor From the TinyMCE editor menu select "view > Source code" Confirm the newly entered HTML code has been formatted and contains coloring.
    • 1
    • Team Hedgehog 2023 Sprint 3.1

    Description

      Currently in the Moodle LMS implementation of the TinyMCE editor when the source code view is used all the code representing the editor content is displayed in one continuous block (depending on how it was created).

      This makes it very hard to read in general and hard to find, edit or add to specific areas of the content code.

      Adding code formatting (indenting) as well as code style (tag color) will make it easier to make code edits when viewing the editor content in source code view. This is functionality that was present with the atto editor.

      NOTE:
      The code provided in this patch is the entire plugin in a single patch.
      The full development commits can be seen in the original repository: https://github.com/mattporritt/moodle-tiny_html

      Attachments

        Issue Links

          Activity

            People

              matt.porritt@moodle.com Matt Porritt
              matt.porritt@moodle.com Matt Porritt
              Stevani Andolo Stevani Andolo
              Andrew Lyons Andrew Lyons
              Ron Carl Alfon Yu Ron Carl Alfon Yu
              Votes:
              1 Vote for this issue
              Watchers:
              9 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:

                Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 4 hours, 52 minutes
                  4h 52m

                  Clockify

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