Claroline中修改tinyMCE中的路径和生成的HTML
近来在研究开源的在线学习系统Claroline,一个非常简单和实用的一个e-learning系统。
可以很容易的创建课程讲义和课程。通过“学习路径”可以创建进度跟踪的学习方式。
其中,遇到的问题是:创建一个media为主的课程讲义的时候,插入的流媒体文件路径会被系统替换掉。
问题描述:
1、claroline中使用了JS的在线编辑器tinyMCE作为讲义的编辑工具。
2、在tinyMCE中点击“insert/edit embedded media”后打开了一个插入流媒体文件的页面,页面上有一个输入文件名的地方和一个预览的地方。
3、插入media文件的页面时tinyMCE的htm文件,在tinyMCE目录下面,而课程中的视频文件是放在各个客户目录下面的,两个目录一点关系都没有。
4、选择文件的方式非常简单,只要把文件名输入在file文本输入框中即可。
5、问题出现:
当我保存这个讲义时,自动生成一个htm文件,这个文件中带有一个media player的播放器,找到文件就可以播放。
但是,在我提交了选择的文件的时候,发现编辑器中的html如下:
<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/claroline/document/10.wmv" />
<param name="width" value="400" />
<param name="height" value="400" />
<embed type="application/x-mplayer2" src="/Claroline/claroline/document/10.wmv" width="400" height="400"></embed>
</object>
问题出来了
第一:参数只有<param name="src",不能播放,需要参数<param name="url"
第二:文件路径错误,保存的路径是tinyMCE编辑器文件所在的目录,而需要的是课程的目录。
那么解决的方法:
第一个:在写html的时候把"src"修改为"url";
第二个:修改那个预览和保存时候的路径,找到课程的目录;
第一个问题的解决:
1、在编辑器的目录下有一个editor_plugin.js文件,还有一个editor_plug_src.js两个文件
文件中的内容基本一样,只是editor_plug_src.js文件中的内容很规整,但是editor_plug.js文件内容没有排版,无法读懂。
2、在两个文件中都有一个方法_getEmbed(),实在提交讲义的时候生成html文件的方法
方法的参数P就是各个param的参数名和数值。
在这个_getEmbed()方法中整合完整的<object>...</object>
于是我打算在其中加入<param name='url',它的value和'src'的value一致。
3、到底修改那个js
一开始我始终修改editor_plugin_src.js因为我觉得这个很工整,应该修改这个。
但是同学的话给了我提示:“编辑器都有俩到三种编辑模式,每种编辑模式都会有自己的js”。
于是我想:是不是带有_src的js是在html模式下使用的js呢?于是我对照editor_plugin_src.js在editor_plugin.js中找到修改的地方,增加url的param。
4、问题解决。
5、看来对于在线编辑器的实现还有待进一步的学习和了解阿。
第二个问题:
1、为什么保存的时候会加上编辑器所在目录的路径呢?
依然是对tinyMCE的解读。
2、在editor.class.php中有一个tinyMCE.Init方法,设定了很多的参数
其中有参数convert_urls 和relative_urls。这两个参数默认是false,即默认使用绝对路径。
3、修改上面两个参数为true,则修改使用相对路径
4、这个时候再增加视频文件,发现路径中的/Claroline/claroline/document/自动消失了,不会自动加入代码中。有进展。
5、那么在课程中播放是可以了,但是预览会有问题
6、读取media.htm文件,发现预览调用了media.js中的generatePreview()方法。
7、generatePreview()方法中,调用了一个转换路径的方法
pl.src = tinyMCE.convertRelativeToAbsoluteURL(tinyMCE.settings['base_href'], pl.src);
pl.src就是制定了预览的时候视频的位置
8、其中tinyMCE.settings['base_href']不知道base_href参数不知道如何设置的,也许默认就是编辑器所在路径。
9、第三点中提到使用了相对路径后,tinyMCE可是设定一个参数document_base_url
当我设定了这个参数后,可以用tinyMCE.settings['document_base_url'] 在js中获取设定的值
10、那么我就把课程文件的路径放入其中就可以了
11、问题又出现了,每个课程的名字是不定的,如何把课程名字传到这个路径中呢?
12、联想到进入一个课程后,在课程的各个栏目中切换,系统都会知道进入的是那个课程,那么一定有地方保存了课程的信息。
13、发现系统中有这么一个语句
$_course = claro_get_current_course_data();
从语句看来就是得到当前课程的数据
用php的echo $_course发现$_course是一个array
那么一定有一个数组值是课程名字的
14、在文件夹中查找有$_course["name"]存放了课程的名字
15、于是在editor.class.php的tinyMCE.init中设置
$_course = claro_get_current_course_data();
$_courseName=$_course['name'];
document_base_url : "/Claroline/courses/"+ "'.$_courseName.'"+"/document", '."\n"
16、修改media.js中generatePreview()方法中的语句
pl.src = tinyMCE.convertRelativeToAbsoluteURL(tinyMCE.settings['base_href'], pl.src);
为
pl.src = tinyMCE.convertRelativeToAbsoluteURL(tinyMCE.settings['document_base_url'], pl.src);
17、预览搞定
18、保存的时候是相对路径,那么讲义的制作也搞定了。
发现几个需要注意的问题:
1、讲义的文件名不能以数字开头
2、讲义的文件名不要写成中文
posted on 2008-10-13 16:27 littlebamboo 阅读(998) 评论(0) 收藏 举报