Atto: Sketch

Maintained by Picture of Matthew Davidson Matthew Davidson
Simple image "paint like" editor for atto.
181 sites
8 fans


Adds a simple "Paint" like program to the atto editor. Features include simple shape tools, drawing, typing, colors, undo/redo. Utilizes the open source "Literally Canvas" image editor.


Create the lib/editor/atto/plugins/sketch folder and place all files there. Run through standard Moodle update/install process.


Set cursor in the editor and click the sketch icon. The editor will open full screen. Use a stylus, finger or mouse to create/edit image. Click "Insert Sketch" to add to editor.


Screenshot #0
Screenshot #1


Picture of Matthew Davidson
Matthew Davidson (Lead maintainer)
Please login to view contributors details and/or to contact them

Comments RSS

Show comments
  • Picture of Enrique Castro
    Fri, 25 Aug 2017, 4:25 AM
    Hi Matthew, thanks for your tip. I've been changing some sizes, and looks better (in my opinion) .
    But I have realized a problem that's a showstopper for us.

    Sketch works well on pages managed by teachers. It works also on forum posts, and the raw data is saved to database. BUT on display the content is filtered out by format_text() function in forum_print_post(). The only way to show it in the discussion page is to use "noclean". That's not acceptable for a production site.

    As I commented, we are interested on Sketch as an image annotator. Te purpose is to allow students (or teachers) to add marks and signs to an existing image. I'lve lived a s a teacher many moments of "ahh, I'd it in front of my eyes without knowing where to look at" by students. So, having Sketch working in forum pages is a must.

    In addition. Currently Sketch return a base64 encoded text embedded, That may scare most users, in my opinion. Both problems would be solved if the return from Sketch would be a file in the editor area, and a link to that in the editor text ¿Is that possible, feasible?
  • Picture of Matthew Davidson
    Fri, 25 Aug 2017, 8:12 PM
    @Enrique I will look into this today. If true, that is very strange because the content it returns is an tag.
  • Picture of Thomas LE MONS
    Fri, 1 Sep 2017, 5:55 PM
    Hello Matthew,
    I would like to use Sketch for a maths test. Nevertheless, the image created with sktech in a "comment question" (Test Plugin") appears in the preview BUT NOT in the final answer that has to be noted by the teacher.
    Do you have a solution? Is it an editor problem?
  • Picture of Matthew Davidson
    Fri, 1 Sep 2017, 8:11 PM
    @Thomas Le MONS @Enrique Castro Ok, so I now understand what is going on. Moodle uses a code cleaner called HTMLPurify in places where students can also enter data. (glossary, forums, quiz questions, etc). Part of the code cleanup is removing the data:image/png:base64 string that this plugin uses. The fix is very easy, but requires a core change. See In the workaround section it will have 2 ways around this issue. Hint, don't use the first workaround. smile I am working on getting this fixed in Moodle as soon as possible.
  • Picture of Enrique Castro
    Fri, 1 Sep 2017, 11:51 PM
    Hi Matthew, I'n sorry I was NOT clearer in my first message. Yes, the problem is the cleaning by the function format_text().
    But that cleaning is there for a reason. Input from students, even form teachers, MUST be cleaned. People tend to copy-paste any type of things. We have had some incidents with teachers inadvertently pasting hidden malicious scripts, or just inconvenient advertisements.
    A much better way to deal with the issue would be to store the image file in the editor draft filearea. But it's a significant more work, I understand.

  • Picture of Matthew Davidson
    Fri, 1 Sep 2017, 11:55 PM
    @Enrique Castro Thanks again for the feedback. I have been looking into ways to do what you are requesting. However with the change I've submitted in MDL-59997, it would be strictly allowing only 3 mime types. I've search all over about security issues with Data URI and the only issues I've seen are with text mime types. So I've submitted it to Moodle with "possible" security questions, to see what they think.
  • Picture of Rob Johnson
    Tue, 5 Sep 2017, 4:55 AM
    Hi Matthew,
    I have not altered the setup in any way. I was using Firefox as my browser.
  • Picture of Matthew Davidson
    Wed, 6 Sep 2017, 3:52 AM
    @Rob Johnson I am running Moodle 3.3 with Adaptable 1.5, running Firefox. Still unable to recreate the issue. Please install the latest version of the plugin and let me know if it is still not working for you.
  • Picture of Matthew Davidson
    Tue, 12 Sep 2017, 9:28 PM
    @Enrique Castro Both the tinymce and atto version of sketch now support uploading into the Moodle repo as normal Moodle images. Please test it out and see if it does what you hope. Latest version just released today. Version 2017090800
  • Picture of Irith Herman
    Mon, 12 Feb 2018, 7:21 PM
    Is there any way to add more features to the sketch like magic wand?
  • Picture of Matthew Davidson
    Mon, 12 Feb 2018, 9:21 PM
    @Irith Herman Yes, there is a way to add additional features. However I'm not sure how difficult a magic wand would be. I will look into it and see what would be involved. Thanks for the comment.
  • Picture of Irith Herman
    Tue, 13 Feb 2018, 3:43 PM
    Thank you Mattew . I"m waiting for youranswer.
  • Picture of Florian Krause
    Mon, 5 Mar 2018, 10:52 PM
    super! für smartphones und tabletts einfach der hit! hat kurz gedauert, bis ich kapiert hatte, dass man das icon bei den einstellungen vom editor noch hinzufügen muss (-: und im css vom template habe ich die höhe auf 95% gesetzt, sonst war auf dem ipad der button zum bestätigen außerhalb der anzeige ... jetzt hab ich viel spaß mit dem touchpen. eine nutzerin hat mir sogar gesagt, dass sie jetzt moodle nutzt, um ihre zeichnungen als bild zu speichern ...
  • Picture of Michal Wazana
    Tue, 13 Mar 2018, 6:05 PM
    it would be even better if you will be able to edit shapes and text (fixing, moving, resizing..) after placing them..
  • Picture of j s
    Thu, 5 Jul 2018, 12:30 AM
    Hi not sure if it's here that i should ask or comment. Is it possible for to shift the "Insert Image" button that is currently at the bottom of the page to the top or to the side bar? Was using it on the phone and on a another small screen and everything works, but could not insert the image because the button was inaccessible. Possible? Any help?
1 2
Please login to post comments