• 博客园logo
  • 会员
  • 周边
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录

学无止境

学习的记录
  • 博客园
  • 联系
  • 订阅
  • 管理

公告

View Post

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)    收藏  举报

刷新页面返回顶部
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3