PaintWeb an image editor in TinyMCE

PaintWeb an image editor in TinyMCE

- Patrick Juhl の投稿
返信数: 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

評点平均:Useful (3)
Patrick Juhl への返信

Re: PaintWeb an image editor in TinyMCE

- 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
Dan Poltawski への返信

Re: PaintWeb an image editor in TinyMCE

- 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

Patrick Juhl への返信

Re: PaintWeb an image editor in TinyMCE

- Itamar Tzadok の投稿

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

.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.

笑顔

 

 

Itamar Tzadok への返信

Re: PaintWeb an image editor in TinyMCE

- Nadav Kavalerchik の投稿
画像 Core developers 画像 Plugin developers 画像 Testers 画像 Translators

Itamar,

Is this available for Moodle 2.7 version of dataform?

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

Nadav

Nadav Kavalerchik への返信

Re: PaintWeb an image editor in TinyMCE

- Justin Hunt の投稿
画像 Particularly helpful Moodlers 画像 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.

Nadav Kavalerchik への返信

Re: PaintWeb an image editor in TinyMCE

- 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.

笑顔

Itamar Tzadok への返信

Re: PaintWeb an image editor in TinyMCE

- 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.

Patrick Juhl への返信

Odp: PaintWeb an image editor in TinyMCE

- 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