Recently I have been studying the open-source Online Learning System claroline, a very simple and practical e-learning system.
You can easily create course handouts and courses. You can use the "learning path" to create a learning method for progress tracking.
The problem is that when a media-based course handout is created, the inserted streaming media file path will be replaced by the system.
Problem description:
1. claroline uses the JS online editor tinymce as the handout editing tool.
2. Click "insert/edit embedded media" in tinymce to open a page for inserting a streaming media file. There is a place for the input file name and a preview place on the page.
3. When the page of the media file is inserted, the HTM file of tinymce is under the tinymce directory, and the video file in the course is placed under the directory of each customer. There is no relationship between the two directories.
4. Selecting a file is very simple. You only need to input the file name in the file text input box.
5. Problems:
When I save this handout, an HTM file is automatically generated. The file contains a media player, which can be played after the file is found.
However, when I submitted the selected file, I found the HTML in the editor as follows:
<Object classid = "CLSID: 6bf52a52-394a-11d3-b153-00c04f79faa6" codebase = "http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" width = "400" Height = "400">
<Param name = "src" value = "/claroline/document/10.wmv"/>
<Param name = "width" value = "400"/>
<Param name = "height" value = "400"/>
<Embed type = "application/x-mplayer2" Src = "/claroline/document/10.wmv" Width = "400" Height = "400"> </embed>
</Object>
The problem arises.
First, the parameter is only <Param name = "src" and cannot be played. The parameter <Param name = "url" is required"
Second, the file path is incorrect. The saved path is the directory where the tinymce editor file is located, and the course directory is needed.
The solution is as follows:
First, modify "src" to "url" when writing HTML ";
Second, modify the path for previewing and saving and find the course directory;
Solution to the first problem:
1. There is an editor_plugin.js file under the editor directory, and there is an editor_plug_src.js file.
The content in the file is basically the same, but the content in the editor_plug_src.js file is quite regular, but the content of the editor_plug.js file is not typeset and cannot be understood.
2. There is a method _ getembed () in both files, which is used to generate an HTML file when submitting handouts.
The parameter P of the method is the parameter name and value of each Param.
Integrate the complete <Object>... </Object> In the _ getembed () method.
Therefore, I intend to add <Param name = 'url' to it, and its value is consistent with the value of 'src.
3. Modify the JS
At first, I always modified editor_plugin_src.js because I think this is neat and should be modified.
However, I was prompted: "There are two or three editing modes in the editor, and each editing mode has its own Js ".
So I thought: Is JS with _ SRC used in HTML mode? So I checked editor_plugin_src.js and found the modified location in editor_plugin.js to add the URL Param.
4. Solve the problem.
5. It seems that you still need to learn more about the implementation of the online editor.
Second question:
1. Why is the path of the editor's directory added during storage?
It is still an explanation of tinymce.
2. There is a tinymce. init method in editor. Class. php, which sets many parameters.
The convert_urls and relative_urls parameters are provided. The default value of these two parameters is false, that is, the absolute path is used by default.
3. If the preceding two parameters are set to true, the relative path is used for modification.
4. Add a video file at this time. The file/claroline/document/in the path disappears automatically and will not be added automatically. Code . Progress.
5. You can play the video in the course, but the preview may be faulty.
6. Read the media.htm file and find that the preview calls the generatepreview () method in media. js.
7. In the generatepreview () method, a conversion path method is called.
Pl. src = tinymce. convertrelativetoabsoluteurl (tinymce. settings ['base _ href '], pl. SRC );
Pl. SRC is used to specify the video position during preview.
8. tinymce. settings ['base _ href '] does not know how to set the base_href parameter. It may be the path of the editor by default.
9. After using the relative path, tinymce sets the document_base_url parameter.
After setting this parameter, you can use tinymce. settings ['document _ base_url '] To get the set value in Js.
10. Then I can put the path of the course file into it.
11. The problem arises again. The name of each course is not fixed. How can I upload the course name to this path?
12. After you enter a course, the system will know which course you are going to switch to in each topic of the course, so the course information must be stored.
13. The system found such a statement
$ _ Course = claro_get_current_course_data ();
The statement indicates that the current course data is obtained.
Using PHP echo $ _ course to find $ _ course is an array
Then there must be an array value that is the course name
14. find $ _ course ["name"] in the folder and store the course name.
15. Set it in tinymce. init of editor. Class. php.
$ _ Course = claro_get_current_course_data ();
$ _ Coursename = $ _ course ['name'];
Document_base_url: "/claroline/courses/" + "'. $ _ coursename.'" + "/Document", '. "\ n"
16. Modify the statements in the generatepreview () method in media. js
Pl. src = tinymce. convertrelativetoabsoluteurl (tinymce. settings ['base _ href '], pl. SRC );
Is
Pl. src = tinymce. convertrelativetoabsoluteurl (tinymce. settings ['document _ base_url '], pl. SRC );
17. Preview
18. The relative path is used for saving the handouts.
Several notes are found:
1. the handout file name cannot start with a number
2. Do not write the handout file name in Chinese.