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

Atto: Remove atto-image-helper-* class(es) when necessary.

XMLWordPrintable

    • MOODLE_27_STABLE
    • wip-MDL-54757
    • Hide
      1. Login as an admin.
      2. In the navigation, expand "Site page".
      3. Under "Site page", click "Site blogs".
      4. Click "Add a new entry".
      5. In the atto editor, add an image.
      6. Open inspector.
      7. Manually add class "atto-image-helper-test" to image.
      8. Save.
      9. Open inspector for the image, and it should have no "atto-image-helper-test" class.
      Show
      Login as an admin. In the navigation, expand "Site page". Under "Site page", click "Site blogs". Click "Add a new entry". In the atto editor, add an image. Open inspector. Manually add class "atto-image-helper-test" to image. Save. Open inspector for the image, and it should have no "atto-image-helper-test" class.

      One of the use of MDL-54710 is to hide the original while resizing or add a border styling while resizing. These are accomplish by attaching classes to images (or other html elements) that is under a css rule. For instance:

      demo.css

      atto-helper-border {
        border: 1px solid black;
      }
      

      demo.html

      <div class="atto-helper-border">
        <!-- some contents. -->
      </div>
      

      The problem arises when save/autosave kicks in, saving unwanted styling. For instance, the border that is only intended as a helper will be saved.

      To solve this, I will need to point you to the atto's clean.js (found in atto javascript source files). It contains getCleanHTML which is called before save/autosave. So what needs to be done is remove all classes that starts with "atto-helper" so that styles attached to "atto-helper-*" classes are not saved. This is a perfect solution since it goes with the name of the function getCleanHTML, that is, the intended html.

            joeyandres Joey Andres
            joeyandres Joey Andres
            Mark Nelson Mark Nelson
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:
              Resolved:

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