PaintWeb an image editor in TinyMCE

PaintWeb an image editor in TinyMCE

by Patrick Juhl -
Number of replies: 10

Hello everyone!

I have recently taken over the impressive work of Mihai Sucan in integrating the PaintWeb image editing application in moodle. I'm writing this post in order to give an idea of the work in progress and to coordinate with moodle developers in order to hopefully include this application in a future release of moodle.

About PaintWeb -

PaintWeb is an online image editor program making use of HTML5's canvas element. It is standalone but also extends TinyMCE as a plugin and can be used directly from the editor.

Try PaintWeb within TinyMCE and get a feeling of what could be offered to moodle!

 

Integration -

Work has been done to integrate it in previous versions of moodle (1.9 & 2.0) but unfortunately was never fully included in moodle and it now needs minor modifications to work with the more recent versions. I am now hoping to join moodle developers to fully integrate this feature in a future release of moodle as an addition to the TinyMCE editor.

I have started testing this feature inside my own copy of moodle 2.2.2+ and I'm pretty close to having a fully functional image editor inside TinyMCE. See my results so far in the image below:

PaintWeb in moodle 2.2.2+

The next step is to coordinate my work with moodle developers in order to include in a future release of moodle (2.4 would be awesome! ;).

For this purpose, I am trying to revive the originally posted feature to gather some interest and attention upon my work. So, if you drop by and you'd like to see this happen in moodle 2.4, please add your vote!


Work in progress -

I'll post my progress to this forum, so you can keep track of what is happening. Right now I am trying to adapt the current code in order to have it work with moodle's current file API in order to allow saving the edited image.

 

Comments and questions are welcome. I hope to hear from people around the moodle community!

Cheers,

 

Patrick Juhl

Average of ratings: Useful (3)
In reply to Patrick Juhl

Re: PaintWeb an image editor in TinyMCE

by Dan Poltawski -
Hi Patrick,

Thanks for sharing and taking on this work! It'd be really great to see Mihai's work get used more widely!

Do you have an idea for what the browser support is for paintweb is now? I have feeling that browser support has come a long way since the work was done and it might be much more widely supported in IE and such. Does it work on iOS?

thanks!

dan
Average of ratings: -
In reply to Dan Poltawski

Re: PaintWeb an image editor in TinyMCE

by Patrick Juhl -

Hello Dan!

Thanks for your support! Well, I'll have to investigate further but as it is it works fine in Safari, Opera, Chrome and Firefox. IE8 doesn't support canvas natively but IE9 should. iOS on the other hand I don't know. I guess this could be in the list of improvements for paintweb!

Cheers,

 

Patrick

Average of ratings: -
In reply to Patrick Juhl

Re: PaintWeb an image editor in TinyMCE

by Itamar Tzadok -

Intrigued by your post I decided to give this a try in the ... Dataform (where else? wink).

.getAttribute in the markup parsing didn't work, so I replaced it with an alternate function. I Also had to disable html5 default form validation. And it works.

That's an extension of the picture field.

In entry editing if there is no image it opens the file manager.

After an image has been uploaded and and the entry saved, re-editing the entry opens the Paintweb editor.

The image can then be modified and saved.

smile

 

 

Average of ratings: Useful (1)
In reply to Itamar Tzadok

Re: PaintWeb an image editor in TinyMCE

by Nadav Kavalerchik -
Picture of Core developers Picture of Plugin developers Picture of Testers Picture of Translators

Itamar,

Is this available for Moodle 2.7 version of dataform?

How complicated do you think will be porting it to Atto?

Nadav

Average of ratings: -
In reply to Nadav Kavalerchik

Re: PaintWeb an image editor in TinyMCE

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Nadav

I had the PoodLL whiteboards going as a plugin for Dataform, but the latest changes have broken it. I think it would not be too hard to get it going again though.

Average of ratings: -
In reply to Nadav Kavalerchik

Re: PaintWeb an image editor in TinyMCE

by Itamar Tzadok -

I'll try to port the field type and will let you know how it goes. Shouldn't be too difficult though because the dataform field merely renders an img tag and PaintWeb js does the rest.

smile

Average of ratings: -
In reply to Itamar Tzadok

Re: PaintWeb an image editor in TinyMCE

by Ketan Deore -

Hi Itamar Tzadok

                                Please tell me installation steps for how paintweb install in moodle 2.7  or How install with  dataform. Please help.

Average of ratings: -
In reply to Patrick Juhl

Odp: PaintWeb an image editor in TinyMCE

by Józek Woźny -

Hello Patrick!

I have integrated PaintWeb in my Moodle 2.4.1 as described in http://docs.moodle.org/dev/Paint_tool_integration and it not works (I have no PaintWeb button in TinyMce editor. I have integrated this version http://repo.or.cz/w/moodle/mihaisucan.git?a=shortlog;h=refs/heads/mdl20-paintweb.

Works this plugin version in 2.4.1?

I work in school in Poland (children 13 years) and PaintWeb is great and very helpfull plugin.

 

Tinymce in  Moodle 2.4 have two different plugin folder - is the problem there?

Have you a version for 2.4?

Or can you help me and explain, how can I integrate PaintWeb in Moodle 2.4.

Sorry for my bad english

Cheers,

 

JozekW

Average of ratings: -
In reply to Patrick Juhl

Re: PaintWeb an image editor in TinyMCE

by Ketan Deore -
Hello Patrick
                           Please tell me PaintWeb installation step on moodle 2.7
Average of ratings: -