在实现Moodle在多域名/IP访问以后,发现插入的图片不显示问题,这是因为Moodle的html editor是把图片地址存为带域名/IP的绝对路径的形式,比如:
http://192.168.0.250/moodle/file.php/2/7_1_15/cpu.jpg,如果用另外一个服务器的域名/IP去访问就不能显示图片了。
开始想研究看看能不能修改Moodle自带的HTML editor,把它“自作多情”加上的域名/IP部分(如
http://192.168.0.250)去掉,发现这个很难解决,遍寻网络没找到方法。因此,决定把Moodle的这个HTML editor替换掉。这方面中文的资料也很少,只有硬着头皮去Moodle官方网站看英文(一把年纪了,英文底子是很差的了,不过半懂不懂地还能看懂个大概)。
试验研究了几种方法,这里隆重介绍把textarea渲染为Tinymce编辑器的方法。这个方法参考网上的各种文章,反复试验,修改整理了部分代码。下面公布详细的实现方法:
1、下载下面的tinymce编辑器压缩包(已经包含上传图片等功能了)。解压后,放在Moodle的lib/editor/tiny_mce文件夹里面。
tiny_mce.rar(←点此下载哦!)
2、打开当前使用的皮肤主题的head.html文件,把下面的代码放到<head>……</head>之间,保存。这段代码我精心整理过,在IE6浏览器下没有问题(在Moodle.org上看到的代码,IE下似乎不能正常使用的)。
<!-- TinyMCE -->
<script type="text/javascript" src="<?php echo $CFG->wwwroot; ?>/lib/editor/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
editor_selector : "form-textarea",
width : "650",
language : "zh",
file_browser_callback : 'moodleFileBrowser',
relative_urls : false,
remove_script_host : true,
debug : false,
theme : "advanced",
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",
// Theme options
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect,|,sub,sup,|,forecolor,backcolor",
theme_advanced_buttons2 : "undo,redo,|,cut,copy,paste,pastetext,pasteword,|,link,unlink,anchor,|,hr,charmap,emotions,|,media,image,|,code,preview,fullscreen",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : false
});
function moodleFileBrowser (field_name, url, type, win) {
if(type == 'file'){
var cmsURL = '<?php echo $CFG->wwwroot; ?>/lib/editor/tiny_mce/link.php';
var width = 480;
var height = 400;
}
if(type == 'image'){
var cmsURL = '<?php echo $CFG->wwwroot; ?>/lib/editor/tiny_mce/insert_image.php';
var width = 736;
var height = 430;
}
if(type == 'media'){
var cmsURL = '<?php echo $CFG->wwwroot; ?>/lib/editor/tiny_mce/insert_image.php';
var width = 736;
var height = 430;
}
var courseid = <?php print_r($COURSE->id); ?>;
tinyMCE.activeEditor.windowManager.open({
file : cmsURL + "?id=" + courseid,
width : width,
height : height,
resizable : "yes",
inline : "yes", // This parameter only has an effect if you use the inlinepopups plugin!
close_previous : "no"
}, {
window : win,
input : field_name
});
return false;
}
</script>
<!-- /TinyMCE -->
3、用管理员账号登录Moodle,打开“外观->HTML编辑器”,在右边窗口中把“使用HTML编辑器”项的勾去掉,保存更改。
下面你就可以去体验tinymce编辑器的强大功能了。这个方法根本没有修改到Moodle的核心代码,所以不影响程序的升级,也很容易改回默认,而且适应性强,Moodle2.0以下的版本估计都很容易用上去。
本文原始出处:
http://www.jsblog.cn/user1/2592/115190.html
(注:本文也算是本人近阶段潜心实践研究的结果,转载最好能保留出处,谢谢!)