数据载入...
时间记忆
数据载入...
登录
数据载入...
最新日志
最新回复
数据载入...
最新留言
数据载入...
加入群组
数据载入...
我的好友
数据载入...
我的照片
用tinymce编辑器替换Moodle的html editor
在实现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以下的版本估计都很容易用上去。
本文原始出处:www.jsblog.cn/user1/2592/115190.html
（注：本文也算是本人近阶段潜心实践研究的结果，转载最好能保留出处，谢谢！）
感谢您提供修改后的tinymce，试用后发现一个问题，就是在设置超链接时不能选择图片以外的文件，一选择图片以外的文件就弹出网页警告。请问怎么修改？我的email:mapleleaf.cn@gmail.com以下为江万里的回复：
请使用最新集成包内的相关文件！
请使用最新集成包内的相关文件！