Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Editor file management: Difference between revisions

From MoodleDocs
 
(25 intermediate revisions by 3 users not shown)
Line 1: Line 1:
This document is to start a usability discussion about the best way to implement a particular new feature in Moodle 2.0.  
This document is a specification that describes how how the handling of embedded media and attachments will work with and around the editor in Moodle 2.0.  


HTML texts may have associated embedded media, such as images, videos and sounds.  These are added to the HTML file using the HTML editor (which in Moodle 2.0 is a modified version of TinyMCE) and stored in the "file area" associated with the text.  This applies to all texts in Moodle 2.0, ranging from simple forum posts to full-blown mini-web sites in the Resource module.
==Embedding media in a text==


There may be more than one file, and files may change or require deletion, so they need to be managed.
Embedded media includes images, videos and sounds that are embedded within a single given HTML text.  These are added using the HTML editor (which in Moodle 2.0 is a modified version of TinyMCE) and stored in the "file area" associated with the text.  This applies to all HTML texts in Moodle 2.0, ranging from simple forum posts to full pages in the Resource module.  These files can be stored in one flat virtual folder, they do not need to be in sub-directories.


The question we need to solve is: "What is the best interface to manage and browse these files?"
The basic procedure for embedding an image is:


== Conventions ==
* Click on the image button in the editor
* Click on the "Choose..." button in the editor dialog
* Use Filepicker to select the file from a repository (or recent files, or upload) with a name
* IF A FILE WITH THAT NAME ALREADY EXISTS THEN ALTER THE NAME IN MOODLE (eg file.jpg --> file2.jpg)
* Add metadata and preferences in the editor dialog
* Insert the image into the text


Example 1: Office document (Word, OpenOffice, Google Docs).  Once the "Open" dialog is used to bring the media into the page, the only way it can be removed from the document is by deleting it from the document directly.  Office applications do not have a way of managing media separately from the document view.
(This procedure is almost identical for video and audio files as well)


Example 2: Dreamweaver.  
Note: Like most operating system "Open file" dialogs, the filepicker only shows those media types that you are searching for at that time.  For example, if you are looking for video files then repositories which don't support video files are not shown, and only video files are shown in the remaining repositories (even if other files may be there).


Example 3: Box net.  Documents can be made an images added, but there is no interface in the document to manage media.  However, when looking at the filesystem view one can see the media in a folder and can edit it.  Obviously changing names and deleting things will break the links in the HTML.
[[Image:Adding_an_image.png]]


(TODO: more examples)
(click on this diagram to see the full-sized version of this example)


== Related Moodle 2 features ==  
==Attaching files==


===File picker ===
Attached files are for whenever you have a set of files that you want to store and display.  These include forum attachments, assignment submissions, and resource files (including whole mini web-sites).  Attachments need to support subdirectories and require more file management.


The file picker is designed to mimic the file open dialog.
The file manager form element is designed for this.


As usual, the button/link/menu that initiates the file picker can specify what mime types are being looked for, and the resulting display is limited to those repositories that support those mime types, and only files matching the mime types are shown.
* Click on "Add" in the file manager form element
* Select a file from a repository (or upload)
* File is added


===File manager form element ===
This is what the new "file manager" form element will look like in a Moodle form (example is from the "File" resource module):


The file manager form element allows any form to have a set of files, such as a set of attachments to a forum.  Files can be added (by calling the file picker) or deleted (by pressing a little X next to any file).
[[Image:Filemanager.png]]


[[Image:Filemanagerform.png]]
A second separate menu under the file manager allows you to pick a "main" file for this case.


==Mockups==
==Components to build==


Click on this diagram to see the full-sized version:
===Recent files repository===


[[Image:Editor_file_management.png]]
Displays a complete paged history of all the files uploaded by the current user, sorted from newest to oldest.


=== Mockup A ===
===File manager===


File manager in the Insert/Edit dialog. 
====AJAX version====


Pros:
* Management is kept separate from the file picker
* Interface is similar to file manager forms element
* No extra icon needed in editor toolbar


Cons:
The default interface shows the "root" of the file area (screenshots from MDL-16597):
* Insert/Edit image dialog needs to be modified, and maintained
* harder to deal with many files
* Interface clutter for people who won't use this feature


http://tracker.moodle.org/secure/attachment/18132/File+manager+interface+%28on+root%29.png


=== Mockup B ===
And once you click on any folder you can go down in the tree:


File manager is implemented as a separate repository inside the filepicker eg "Current files".
http://tracker.moodle.org/secure/attachment/18130/File+manaager+interface+%28on+subdir%29.png


Pros:
When moving a file or folder, you get a little popup browser to choose the destination.
* Very easy to implement across Moodle, no changes to editors are needed.
* Makes sense when re-choosing images already chosen (eg to add another copy of the same image).


Cons:
http://tracker.moodle.org/secure/attachment/18128/moving+file+interface.png
* Breaks the paradigm of the "file picker" because files can be deleted, zips uploaded etc.  
* "Current files" difficult to separate logically from the "Local files".  
* Files can be deleted here resulting in missing media from the HTML.
* Constantly clutters repository list with an item that many will not use.
* Inconsistent with the filemanager form element (used for attachments etc)
* Either we show all files (ignore mimetype) or only show files matching mimetype (incomplete management)


====Non-JS version====


=== Mockup C ===
(spec to come)


File manager is implemented separately from file picking, as a new tinymce plugin.
==Discussion==


Pros:
Discussion: [http://moodle.org/mod/forum/discuss.php?d=127238 RFC: Editor file management in Moodle 2.0]
* Functionality is separate from the file picker so file picker paradigm preserved
Discussion document:  [https://docs.moodle.org/en/index.php?title=Development:Editor_file_management&oldid=60871 August 3 version of this page]
* People who don't need it don't have to see it (unclutters interface)
* Interface is very similar to the file manager form element
 
Cons:
* Requires a new tinymce plugin that needs maintenance
* Requires a whole new icon in the editor toolbar.

Latest revision as of 08:54, 7 August 2009

This document is a specification that describes how how the handling of embedded media and attachments will work with and around the editor in Moodle 2.0.

Embedding media in a text

Embedded media includes images, videos and sounds that are embedded within a single given HTML text. These are added using the HTML editor (which in Moodle 2.0 is a modified version of TinyMCE) and stored in the "file area" associated with the text. This applies to all HTML texts in Moodle 2.0, ranging from simple forum posts to full pages in the Resource module. These files can be stored in one flat virtual folder, they do not need to be in sub-directories.

The basic procedure for embedding an image is:

  • Click on the image button in the editor
  • Click on the "Choose..." button in the editor dialog
  • Use Filepicker to select the file from a repository (or recent files, or upload) with a name
  • IF A FILE WITH THAT NAME ALREADY EXISTS THEN ALTER THE NAME IN MOODLE (eg file.jpg --> file2.jpg)
  • Add metadata and preferences in the editor dialog
  • Insert the image into the text

(This procedure is almost identical for video and audio files as well)

Note: Like most operating system "Open file" dialogs, the filepicker only shows those media types that you are searching for at that time. For example, if you are looking for video files then repositories which don't support video files are not shown, and only video files are shown in the remaining repositories (even if other files may be there).

Adding an image.png

(click on this diagram to see the full-sized version of this example)

Attaching files

Attached files are for whenever you have a set of files that you want to store and display. These include forum attachments, assignment submissions, and resource files (including whole mini web-sites). Attachments need to support subdirectories and require more file management.

The file manager form element is designed for this.

  • Click on "Add" in the file manager form element
  • Select a file from a repository (or upload)
  • File is added

This is what the new "file manager" form element will look like in a Moodle form (example is from the "File" resource module):

Filemanager.png

A second separate menu under the file manager allows you to pick a "main" file for this case.

Components to build

Recent files repository

Displays a complete paged history of all the files uploaded by the current user, sorted from newest to oldest.

File manager

AJAX version

The default interface shows the "root" of the file area (screenshots from MDL-16597):

http://tracker.moodle.org/secure/attachment/18132/File+manager+interface+%28on+root%29.png

And once you click on any folder you can go down in the tree:

http://tracker.moodle.org/secure/attachment/18130/File+manaager+interface+%28on+subdir%29.png

When moving a file or folder, you get a little popup browser to choose the destination.

http://tracker.moodle.org/secure/attachment/18128/moving+file+interface.png

Non-JS version

(spec to come)

Discussion

Discussion: RFC: Editor file management in Moodle 2.0 Discussion document: August 3 version of this page

Retrieved from "https://docs.moodle.org/dev/index.php?title=Editor_file_management&oldid=15164"
Powered by MediaWiki