TinyMCE: Sketch

Maintained by Picture of Matthew DavidsonMatthew Davidson
Simple image "paint like" editor for tinymce.
237 sites
8 fans
Moodle 3.0, 3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7, 3.8, 3.9


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


Create the lib/editor/tinymce/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 Matthew Davidson
    Fri, Jun 1, 2018, 4:45 AM
    @Mauricia Meza The reason is that Moodle sometimes strips images that are inline base64 encoded. I plan on making the setting ON by default in future versions.
  • Picture of Mauricio Meza
    Fri, Jun 1, 2018, 4:53 AM
    I did, but student made the drawing and "Insert Sketch" button doesnt work
  • Picture of Mauricio Meza
    Fri, Jun 1, 2018, 5:01 AM
    So, it wont work in students answers?
  • Picture of Matthew Davidson
    Mon, Jun 4, 2018, 8:33 PM
    If using "Store as image file" it will work because it is literally adding the image just like Moodle adds any other image. However, student sketches made before the setting change still might not work. There is a workaround, by changing a weblib.php file. Go to lib/weblib.php:

    Look for

    $config->set('URI.AllowedSchemes', array(
    under it you will see a bunch of array values set to true. Add the following to the top of the array()

    'data' => true,
  • Picture of Mauricio Meza
    Sat, Jun 16, 2018, 12:46 AM

    The problem was solved.
    Used "task" plugin and not the "lesson" because with this it does not work.
    Thank you so much.
    Excellent plugin
  • Picture of John Michael
    Sat, Sep 19, 2020, 12:26 PM
    Awesome plugin... does the job when you have the doodles. Mike from sprinkler repair fresno
  • Picture of Esther I.K
    Wed, Sep 23, 2020, 10:07 AM
    I have the same issue, I cannot see student's answer in sketch (but teacher can do that without any issue). Tried to turn on "Store as image file", but the "insert sketch" button become unresponsive. Could you please help? Thank you.
  • Picture of Matthew Davidson
    Wed, Sep 23, 2020, 8:22 PM
    @Esther Can you tell me what version of the plugin you are running. What version of Moodle. And what browser you are using?
  • Picture of Micah Degner
    Wed, Sep 30, 2020, 3:16 AM
    We are trying to find a way to have a background image for students to respond by writing over the top of. (graphing a line on a coordinate plane) Whenever we link an image in the response template, the "insert sketch" button no longer functions. We are using Moodle version 3.8 in Chrome.
  • Picture of Matthew Davidson
    Wed, Sep 30, 2020, 3:59 AM
    @Micah Degner In my experience, selecting an image in TinyMCE isn't always the easiest. I've found right clicking on an image and then opening the editor works. Just tested the latest version in Chrome with the TinyMCE editor. I did however see an issue where the screen scrolls or shifts in a way that the top menu becomes hidden. When I have some time I'll look at this again.
  • Picture of Micah Degner
    Fri, Oct 2, 2020, 4:17 AM
    @Matthew Davidson Where we are having the issue is not with students adding an image in the editor, but in submitting responses when there is a pre-loaded image that we have added in the response template from Moodle... When students click "insert sketch" nothing happens. If students add the image themselves in the editor, then it works. But not if we have the image automatically loaded in the response template. Thanks!! Micah
  • Picture of Matthew Davidson
    Fri, Oct 2, 2020, 5:47 AM
    @Micah Degner I'm assuming you are talking about using Sketch in a quiz essay question. So the issue is that Moodle only allows you to link images and not save images to a local storage in the response template. So most modern browsers will prevent that image from running through certain functions because of cross-origin issues. if you look in the browser console you will see an error when you click the "Insert Sketch" button that speaks to this. The solution is to make sure your grid image is local. So my workaround is to create a Page in moodle. Make this page hidden but available to students. Add any images you might want to use on that page. Save it, and then right click and copy the image location url from that Page. Make sure the image url looks like ".../pluginfile.php/1234567890/mod_page/content/1/someimage.jpg" and not ".../draftfile.php/...". Then use this URL in the response template. Since it is local to your server, it should work.
  • Picture of Micah Degner
    Fri, Oct 2, 2020, 10:24 PM
    @Matthew Davidson THANK YOU!!! This worked exactly how we want it to. The timely response is much appreciated.
  • Picture of Matthew Davidson
    Sat, Oct 3, 2020, 2:19 AM
    @Micah Degner I have just made commits to both the tinymce and atto branch (see https://github.com/Syxton/atto_sketch/commits/master) that may fix this issue.
1 2
Please login to post comments