Tích hợp Moodle 1.5 - tinyMCE - Viettyping

Tích hợp Moodle 1.5 - tinyMCE - Viettyping

Bởi Trọng Thanh -
Số lượng các câu trả lời: 23

Xin chào mọi người.
Dựa trên các ý kiến thảo luận trong bài "Nhúng bộ gõ tiếng Việt vào Moodle", tôi đã thử tìm cách kết hợp Moodle - tinyMCE - Viettyping và đã đạt được một số thành công ban đầu tuy nhiên đây chỉ là giải pháp tạm thời cho các phiên bản Moodle 1.5+ hiện tại.

Ý tưởng thực hiện như sau:
Vì HTML Area được gắn quá sâu vào trong moodle (liên quan đến cả PHP và CSDL) nên tôi nghĩ nếu thay HTML Area thì phải lập trình lại rất nhiều do đó tôi chọn biện pháp tình thế là bật chế độ soạn thảo Plain Text. Khi đó Moodle sẽ dùng textarea cho phần soạn thảo nội dung. Việc sau đó là cài một đoạn script để tinyMCE "tìm" textarea này để xử lý thành một web editor với đầy đủ tính năng. Việc gắn Viettyping cũng khá đơn giản.

Sau đây là các bước:
1. Trước tiên bạn hãy download web editor tinyMCE tại địa chỉ: http://tinymce.moxiecode.com/download.php và Viettyping tại địa chỉ: http://vietdev.sourceforge.net/jscript/viettyping/viettyping_r10.051101.zip 
2. Sau khi giải nén, upload hai thư mục viettyping và tinymce của 2 chương trình vào thư mục lib của moodle (đây chỉ là đề nghị của tôi, bạn có thể tùy ý chọn thư mục khác cũng như tinh giảm các file không cần thiết nếu bạn có hiểu biết về java script)
3. Tìm đến thư mục quản lý giao diện website của bạn (ví dụ nếu tôi chọn theme Wood thì tôi sẽ vào thư mục theme/wood). Dùng trình soạn thảo HTML như Notepad để mở 2 file: header.html và footer.html
4. Trong file header.html bạn thêm vào đoạn mã sau ở giữa tag </head> và <body<?php...: (giả sử bạn đặt Moodle trong thư mục moodle/ bên dưới thư mục gốc)

<!-- script for tiny_mce editor -->
<script language="javascript" type="text/javascript" src="/moodle/lib/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
 mode : "textareas",
 theme : "advanced",
 plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu",
 theme_advanced_buttons1_add_before : "save,separator",
 theme_advanced_buttons1_add : "fontselect,fontsizeselect",
 theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor",
 theme_advanced_buttons2_add_before: "cut,copy,paste,separator,search,replace,separator",
 theme_advanced_buttons3_add_before : "tablecontrols,separator",
 theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print",
 theme_advanced_toolbar_location : "top",
 theme_advanced_toolbar_align : "left",
 theme_advanced_path_location : "bottom",
 plugin_insertdate_dateFormat : "%Y-%m-%d",
 plugin_insertdate_timeFormat : "%H:%M:%S",
 extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
 relative_urls : false
});
</script>
<!-- end script -->

Chú thích:
- "/moodle/lib/tinymce/jscripts/tiny_mce/tiny_mce.js" là đường dẫn tương đối đến file script của tinyMCE, bạn phải khai báo thật chính xác.
- Đây là cài đặt đầy đủ của tinyMCE. Bạn có thể bớt các nút của editor bằng cách xóa bớt tên các nút trong các khai báo theme_advanced_buttons...

5. Trong file footer.html bạn đặt đoạn mã sau ngay sau tag </html> (dòng cuối cùng):

<!-- script for viettyping -->
<script src="/moodle/lib/viettyping/viettypingplus.js"></script>

6. Việc cài đặt đã hoàn tất, bây giờ bạn chỉ việc tắt trình soạn thảo HTML Area của Moodle để chuyển sang dùng tinyMCE. Với Viettyping, bạn có thể gõ tiếng Việt trong tất cả các text box và trong tinyMCE mà không cần dùng thêm phần mềm nào khác.

Như vậy chỉ với một vài thao tác đơn giản, Moodle đã được trang bị một editor "cực mạnh" và một bộ gõ TV tuyệt vời. Tuy nhiên do chưa được thử nghiệm nhiều nên không biết có trục trặc gì không.cool Rất mong ý kiến đóng góp của mọi người. Chúc các bạn cài đặt thành công.

File đính kém Moodle-tinymce-viettyping.jpg
Trung bình điểm đánh giá: -
Để phản hồi tới Trọng Thanh

Trả lời: Tích hợp Moodle 1.5 - tinyMCE - Viettyping

Bởi Đinh Lư Giang -
Tuyệt tuyệt tuyệt. Nhưng các plugin thì có chạy không nhỉ ? Thí dụ gắn flash hay Mp3 chẳng hạn ? Tôi đang làm thử theo hướng dẫn trên với một trang demo, khi nào xong sẽ phản hồi ngay. Cám ơn Thanh Tran rất nhiều.
Giang
Để phản hồi tới Trọng Thanh

Trả lời: Tích hợp Moodle 1.5 - tinyMCE - Viettyping

Bởi Vu Hung -
Hi Thanh,
Very goog job. Mình sẽ thử và có phản hồi.
Để phản hồi tới Vu Hung

Trả lời: Tích hợp Moodle 1.5 - tinyMCE - Viettyping

Bởi Tuan Anh Nguyen -
Chào mọi người.
Mọi người đã cài để dùng thử chưa? Sao chưa thấy phản hồi gì vậy?

Mình đang dùng Moodle phiên bản 1.5.4 và cũng đã cài đặt để dùng thử. Tuy nhiên còn nhiều thứ chưa biết nên mọi người có thể hướng dẫn chi tiết hơn được không?
1. Trong bước 4, và 5. Ví dụ mình thư mục moodle là D:\moodle; -> thư viện là D:\moodle\lib; theme sử dụng là D:\moodle\theme\greenshade15. Vậy trong hai script thì đường dẫn tới script sẽ là gì?

2. Trong bước cuối cùng, làm sao để tắt trình soạn thảo HTML Area của Moodle để chuyển sang dùng TinyMCE?
Quả thật là  còn nhiều chỗ mình chưa biết. Mong mọi người trả lời  ASAP  được không? Cám ơn nhiều!
Để phản hồi tới Tuan Anh Nguyen

Trả lời: Tích hợp Moodle 1.5 - tinyMCE - Viettyping

Bởi Trọng Thanh -

Tưởng mọi người chuyển qua phiên bản 1.6 hết rồi nên chẳng quan tâm đến bài viết của tôi nữa chứ. mixed

Trả lời câu hỏi của bạn Tuan Anh:

1. NẾU bạn đặt 2 folder titymce và viettyping trong thư mục lib của moodle thì trong trường hợp của bạn, đường dẫn tới script của tinymce và viettyping lần lượt sẽ là:
+ D:\moodle\lib\tinymce\jscripts\tiny_mce\tiny_mce.js
+ D:\moodle\lib\viettyping\viettypingplus.js

Còn đường dẫn D:\moodle\theme\greenshade15 là nơi bạn tìm thấy 2 tập tin header.html và footer.html

Trong hướng dẫn tôi sử dụng đường dẫn tương đối cho linh hoạt. Khi bạn upload lên server thì bạn phải sửa lại đường dẫn đến 2 script "tiny_mce.js" và "viettypingplus.js" cho thích hợp.

2. Để tắt trình soạn thảo HTML area của Moodle, bạn vào phần Cấu Hình (trên panel Điều hành) > Các thiết lập soạn thảo > ở mục "htmleditor", chọn "không cho phép".

Để phản hồi tới Trọng Thanh

Trả lời: Tích hợp Moodle 1.5 - tinyMCE - Viettyping

Bởi Vu Hung -
Chào Thanh,
Đúng là bây giờ mọi người đang nghĩ nhiều đến việc migrate sang 1.6 nhưng vấn đề là TinyCME vẫn chưa được tích hợp vào sad. Có lẽ, chúng ta phải đợi một thời gian nữa sau đó sẽ tích hợp phần gõ tiếng Việt của Thanh vào (Martin cũng đang chuẩn bị tích hợp code của TinyCME chính thức vào 1.6).
Để phản hồi tới Vu Hung

Trả lời: Tích hợp Moodle 1.5 - tinyMCE - Viettyping

Bởi Tuan Anh Nguyen -
Chào Thanh,
Đã chạy được rồi. Lý do lỗi là vì mình đặt sai đường dẫn đến mấy cái Script thôi. big grin. Cám ơn Thanh nhiều!
Nhưng hình như là nó không chạy trên firefox có phải ko nhỉ?
Để phản hồi tới Tuan Anh Nguyen

Trả lời: Tích hợp Moodle 1.5 - tinyMCE - Viettyping

Bởi Tuan Anh Nguyen -
:P
Xin lỗi mọi người vì spam bài nhé. Nhưng tính năng này cũng chạy tốt trên cả firefox.
Để phản hồi tới Tuan Anh Nguyen

Trả lời: Tích hợp Moodle 1.5 - tinyMCE - Viettyping

Bởi Trọng Thanh -

Xin lỗi mọi người vì dạo này tôi không quan tâm đến Moodle lắm. Lý do là vì kế hoạch cài đặt moodle cho khoa bị gián đoạn do server của trường có một khai báo không tương thích với Moodle. Đó là khai báo session_auto_start được bật (để Moodle chạy được thì nó phải tắt). Nhóm thực hiện chúng tôi đã liên hệ với admin của trường để xin quyền override setting nhưng không được chấp nhận sad. Chỉ riêng việc xin thay đổi một thông số như thế đã không được chấp nhận thì nghĩ gì đến việc xin nâng cấp server để cài Moodle 1.6!

To Tuan Anh: chúc mừng bạn đã cài đặt thành công và cám ơn bạn đã tích cực thử nghiệm bài hướng dẫn của tôi.

To anh Hung: như anh nói là Moodle 1.6 vẫn chưa được tích hợp tinymce. Vậy thì cách cài đặt này có lẽ cũng áp dụng được cho Moodle 1.6. Đây cũng chỉ là giải pháp tình thế thôi nhưng cũng đem lại sự thuận tiện hơn cho những người sử dụng Moodle.

Để phản hồi tới Trọng Thanh

Trả lời: Tích hợp Moodle 1.5 - tinyMCE - Viettyping

Bởi Vu Hung -
Xin chia sẻ lỗi buồn với Thanh. Bên em là Trung tâm Tin học quản lý hệ thống server đúng không? Cố gắng thuyết phục họ dựa trên lợi ích của một hệ thống e-learning mang lại cho nhà trường. Em thử gặp những người cấp cao hơn xem. Hình như bên trường em các lãnh đạo cũng rất quyết tâm ứng dụng CNTT trong giáo dục.

PS: Năm ngoái anh có vào trường ĐHSP TPHCM và đã gặp hiệu phó nhưng không gặp em.
Để phản hồi tới Vu Hung

Trả lời: Tích hợp Moodle 1.5 - tinyMCE - Viettyping

Bởi Tuan Anh Nguyen -
big grin toe toét
"Xin chia sẻ lỗi buồn với Thanh." Bác Vũ Thanh Hùng nhà ta sai lỗi chính tả kìa. cool Lâu lắm mới thấy nhỉ! Vụ này có gì làm Vũ Hùng mất tập trung rồi đây! toe toét
Để phản hồi tới Trọng Thanh

Trả lời: Tích hợp Moodle 1.5 - tinyMCE - Viettyping

Bởi dungiis dungiis -

i use Viettyping  for my code but it not work in firefox

Để phản hồi tới dungiis dungiis

Trả lời: Tích hợp Moodle 1.5 - tinyMCE - Viettyping

Bởi Kien pham van -

Em da tich hop duoc va dang dung thu. cam on anh trong thanh nhe. Van de viet hoa no em cung da lam duoc mot chut. nhung thay anh Hong da lam roi nen thoi.

Em thay viec chen hinh anh va media con kha phuc tap. co cach nao tot hon khong, tuc la chi can browse la duoc?

mpng phuc dap!

Để phản hồi tới Kien pham van

Trả lời: Tích hợp Moodle 1.5 - tinyMCE - Viettyping

Bởi Trọng Thanh -

Chào bà con!

Mình muốn chia sẻ với mọi người một tin vui: mình đã cài đặt thành công Moodle 1.5 trên server của trường bất chấp session.auto_start bật.
Ban đầu mình đã có ý định từ bỏ việc cài đặt Moodle cho website khoa vì yêu cầu sửa cấu hình của server không được đáp ứng. Nhưng mong mỏi thiết lập một kênh học tập trực tuyến cho SV trong khoa đã thôi thúc tôi quyết tâm bắt Moodle fải làm việc theo ý mình. Mất vài ngày nghiên cứu về session và object trong PHP, tôi đã chỉnh sửa mã nguồn của Moodle để Moodle hoạt động tốt trên server có cấu hình session.auto_start ON (bình thường Moodle bắt buộc session.auto_start phải OFF). Đã có lúc tôi gần như tuyệt vọng vì cái đống mã nguồn rối rắm và kiến thức hạn hẹp của mình. Nhưng cuối cùng tôi cũng đã thành công và cảm thấy thật vui vì mình đã hoàn tất một nhiệm vụ tưởng chừng như impossible này.smile

Tất nhiên đây chỉ mới là bước đầu. Tôi cần thêm thời gian để test kỹ lưỡng với hệ thống đã bị chỉnh sửa như vậy trước khi phổ biến cho các GV và SV trong khoa. Nhưng nói chung cho đến lúc này Moodle vẫn hoạt động bình thường. Để chứng minh cho công bố của mình, các bạn có thể vào trang web: http://khoaanh.hcmup.edu.vn/elearning/
Để xem thông tin cấu hình server, bạn có thể vào trang: http://khoaanh.hcmup.edu.vn/info.php

Những bạn nào gặp phải trường hợp tương tự mình có thể gửi yêu cầu lên đây. Mình sẽ upload các bản patch của Moodle (1.5) và hướng dẫn các bạn sửa lỗi.

Mặc dù bài viết của các bạn gửi đã lâu nhưng tôi cũng xin phúc đáp:

@dungiis: có thể Firefox của bạn bật chế độ an ninh khá cao nên nó đã chặn Java Script của TinyMCE. Dù sao tôi cũng chưa thử nghiệm trên Firefox. Tôi sẽ kiểm tra lại sau.

@Kien: giải pháp tôi đưa ra chỉ gắn tinyMCE vào lớp vỏ (front-end) của Moodle thôi nên có lẽ những tính năng như upload và chèn media trực tiếp vào trình soạn thảo là không thể (nhưng nếu chỉ chèn media theo dạng link đến tài nguyên có sẵn trên mạng thì vẫn được). Vì tinyMCE là một trình soạn thảo mạnh nên cửa sổ chèn ảnh/media khá phức tạp. (Để dễ thao tác bạn có thể cài gói TV cho nó). Muốn upload hình thì chúng ta tạm dùng chức năng gửi file đính kèm của Moodle vậy. File đính kèm dạng ảnh sẽ được tự động hiển thị ở cuối bài viết.

Để phản hồi tới Trọng Thanh

Trả lời: Tích hợp Moodle 1.5 - tinyMCE - Viettyping

Bởi Vu Hung -
Chúc mừng Thanh đã có bước đột phá mới trong nghiên cứu Moodle. Thanh thử chuyển sang bản 1.7 xem có được không vi bản 1.7 có nhiều tính năng mạnh hơn.

Nếu được Thanh (hoặc là ai đó sẽ giúp) đề nghị cộng đồng Moodle thế giới thay đổi code để có thể hỗ trợ hosting trên nhiều môi trường có safe_mode là on.

Cheers!
Để phản hồi tới Trọng Thanh

Trả lời: Tích hợp Moodle 1.5 - tinyMCE - Viettyping

Bởi Đinh Lư Giang -
Chào Trọng Thanh, không ngờ còn đường đến với Moodle của bạn đầy chông gai và cuối cùng là thành công. Nếu bạn cần một server có đủ các tính năng cho Moodle để thử nghiệm thì liên hệ với tôi, tôi sẽ cho bạn mượn trong một thời gian. Thân ái. Giang
Để phản hồi tới Đinh Lư Giang

Trả lời: Tích hợp Moodle 1.5 - tinyMCE - Viettyping

Bởi Trọng Thanh -

@ anh Giang: cám ơn anh đã ngỏ lời giúp đỡ. Nhưng em có thể test trên localhost cũng được rồi. Vì với localhost em có thể giả lập cấu hình server của trường để từ đó chỉnh sửa Moodle phù hợp nhất. Chứ test trên server đầy đủ quá thì lúc cài trên server trường với nhiều hạn chế thì e là không chạy được. Có đối mặt với khó khăn mới tiến bộ được phải không anh?smile

@ anh Hùng: Em sử dụng Moodle 1.5 vì các yêu cầu cấu hình của nó phù hợp với server của trường nhất. Moodle 1.7 yêu cầu MySQL phiên bản 4.1.16 trở lên. Trong khi đó MySQL trên server của trường em chỉ là 4.0.21-log. Vậy theo anh em có thể cài Moodle 1.7 trên server trường em không? Em sẽ thử test trên localhost xem sao.
Về việc hỗ trợ server safe_mode on em cũng chưa nghĩ tới vì em chưa phải đối mặt với nó. Nếu có thời gian, em sẽ tìm hiểu thêm.

Để phản hồi tới Trọng Thanh

Trả lời: Tích hợp Moodle 1.5 - tinyMCE - Viettyping

Bởi Vu Hung -
Anh nghĩ em nên khuyến cáo trường em nâng cấp lên bản MySQl và PHP mới vì MySQL và PHP đều có bản 5.x hết rồi, năm sau có thể là bản 6.x.
Để phản hồi tới Vu Hung

Trả lời: Tích hợp Moodle 1.5 - tinyMCE - Viettyping

Bởi nu bui -

mọi người ơi cho e hỏi để tắt chế độ html area vao trên panel Điều hành là vào đâu vậy. sao em cấu hình xong tinymce rùi nhưng sao khi viết nội dung vào thì nó cứ thông báo là chưa có  nội dung mà khi em để ở chế độ textarea thì vẫn insert bình thường. giờ em đang phải làm bài gấp mà mắc chỗ này em nhờ mọi người giúp em với. thank nhiu.

Để phản hồi tới nu bui

Trả lời: Tích hợp Moodle 1.5 - tinyMCE - Viettyping

Bởi Đinh Lư Giang -

Bạn vào đây: admin/settings.php?section=manageeditors (nhớ thêm URL trang của bạn), và nhấn vào biểu tượng mắt disable cho nó nhắm lại enable .

Chúc bạn thành công

Đinh Lư Giang

Để phản hồi tới Đinh Lư Giang

Re: Trả lời: Tích hợp Moodle 1.5 - tinyMCE - Viettyping

Bởi nu bui -
anh oi em vẫn chưa làm được. Em chỉ cấu hình mỗi tinymce thôi em không cấu hình viettyping thì nó có chạy được không ạ. Chỉ cấu hình tinymce thì có cần phải tắt chế độ gì không ạ.Mong sự giúp đỡ của mọi người. Em cảm ơn.
Để phản hồi tới Đinh Lư Giang

Re: Trả lời: Tích hợp Moodle 1.5 - tinyMCE - Viettyping

Bởi nu bui -
anh ơi anh có thể chỉ rõ cho em được không ạ. Em mới học PHP mà giờ đang chuẩn bị phải nộp bài mà em không làm được.
ví dụ trang em đang cấu hình là tinymce là: localhost/doan/themtailieu.php
vậy thì để vào được trang mà anh nói ở trên thì đường dẫn phải như thế nào mong anh giúp đỡ. Em cảm ơn anh
Để phản hồi tới nu bui

Trả lời: Re: Trả lời: Tích hợp Moodle 1.5 - tinyMCE - Viettyping

Bởi Đinh Lư Giang -

Có nghĩa là bạn phải vào: localhost/doan/admin/settings.php?section=manageeditors

Để phản hồi tới Đinh Lư Giang

Re: Trả lời: Re: Trả lời: Tích hợp Moodle 1.5 - tinyMCE - Viettyping

Bởi nu bui -
Em mở theo đương dẫn anh nói nhưng mà nó thông báo không tìm thấy trang đó anh ạ.