Dùng bộ soạn thảo tinymce với CakePHP
admin 
Trong bài viết này tôi sẽ hướng dẫn cách viết một helper để tích hợp bộ soạn thảo tinymce vào view, sử dụng để post các nội dung cần định dạng. Tôi cũng sẽ đưa phần config của tinymce thành một element để chúng ta dễ dàng thay đổi kiểu editor cần dùng.
Đầu tiên, bạn hãy vào trang sau để tải bộ soạn thảo tinymce về:
Trong trang này có 1 gói full (dùng cho mọi ngôn ngữ) và 1 gói dành riêng cho PHP, bạn tự chọn gói cho mình nhé!
Sau khi tải về, bạn giải nén và đưa vào thư mục app/webroot/js/editors
1. Tạo helper
- Tên helper: Tinymce
- Tên file: tinymce.php
- Nơi lưu: app/views/helpers/
Nội dung:
<?php class TinymceHelper extends HtmlHelper { var $width=500; var $height=300; function load($id) { $did = Inflector::camelize(str_replace('/', '_', $id)); $str = ' <script language="javascript" type="text/javascript"> tinyMCE.execCommand("mceAddControl", true, "'.$did.'"); </script>'; return $str; } } ?> |
2. Tạo element chứa thông tin cấu hình
- Ở đây tôi sẽ tạo ra 2 lựa chọn: đơn giản (simple) và nâng cao (advanced). Sở dĩ phải làm thế này vì khi dùng tinymce cho phần này tôi muốn nó có đầy đủ tính năng nhưng khi dùng cho phần khác tôi chỉ muốn có một số nút lệnh cơ bản (bôi đậm, in nghiêng, gạch chân, canh lề…)
2.1. simple_tinymce.ctp
<script type="text/javascript"> tinyMCE.init({ mode :"exact", elements: "<?php echo $el;?>", theme : "advanced", plugins : "media", theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink,image,media,anchor,formatselect", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", 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]" }); </script> |
2.2. advance_tinymce.ctp
<script type="text/javascript"> tinyMCE.init( { mode :"exact", elements: "<?php echo $el; ?>", height :"350", width :"660", theme :"advanced", plugins :"table,advhr,advlink,emotions,inlinepopups,preview,contextmenu,fullscreen,noneditable,visualchars,nonbreaking,advimage", // Theme options theme_advanced_buttons1 :"bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect,|,bullist,numlist,|,forecolor,backcolor,outdent,indent", theme_advanced_buttons2 :"link,unlink,anchor,image,cleanup,|,tablecontrols,|,hr,removeformat,|,sub,sup,|,charmap,emotions,advhr,|,code,fullscreen", theme_advanced_buttons3 :"", theme_advanced_toolbar_location :"top", theme_advanced_toolbar_align :"left", theme_advanced_statusbar_location :"bottom", theme_advanced_resize_horizontal :false, theme_advanced_resizing :true, apply_source_formatting :true, convert_urls :false, relative_urls :false }); </script> |
Bạn có thể tự mình thay đổi các thông tin trên cho phù hợp, để làm được điều này bạn cần đọc phần trợ giúp của tinymce hoặc xem demo của họ
3. Sử dụng
- Đảm bảo rằng bạn đã khai báo dùng hepler này trong controller
- Tại view muốn dùng tinymce, bạn dùng code:
<!-- TinyMCE --> <?php echo $this->render('elements/advanced_tinymce', array('el'=>'content'));?> <!-- /TinyMCE --> |
Trong đó:
- advance_tinymce: đây là tên element đã tạo ở trên
- el: id của input controller muốn gắn tinymce
ở đây, input control của tôi là:
<?php echo $form->input($this->params['models'][0].'/content',array('id'=>'content','label'=>'','error'=>'','cols'=>60)); ?> |
24 Comments to “Dùng bộ soạn thảo tinymce với CakePHP”
Post comment
Follow us on Twitter!Diễn đàn CakePHP cho người Việt Nam
Bài viết mới
- CakePHP version 1.3.12
- Tạo chuỗi ngẫu nhiên với 1 dòng code
- Kỹ thuật “bit field” trong phân quyền
- Làm việc với File và Folder
- CakePHP 1.3.8
- CakePHP 1.3.7 Released
- Ajax trong CakePHP
- Tạo và load file config trong CakePHP
- Làm site đa ngôn ngữ với CakePHP (Phần 1)
- CakePHP 1.3.6 and 1.2.9 released
- CakePHP 1.3.5 released
- Type hinting trong PHP
- CakePHP ra phiên bản mới 1.3.4
- Tích hợp Zend framework vào CakePHP
- Tạo virtual host trên local
- Sử dụng Acl trong cakephp – Phần 2
- Sử dụng Acl trong cakephp – Phần 1
- Sinh code tự động với cake console
- Tự động xóa record ở bảng con khi reocord ở bảng cha bị xóa
- Xác thực người dùng với component Auth
Thảo luận mới
- admin on Sử dụng session trong CakePHP
- admin on Sử dụng session trong CakePHP
- hanh on Sử dụng session trong CakePHP
- bich yen on Sử dụng session trong CakePHP
- admin on Sử dụng session trong CakePHP
- bich yen on Sử dụng session trong CakePHP
- bich yen on Sử dụng session trong CakePHP
- admin on Sử dụng Acl trong cakephp – Phần 1
- admin on Sử dụng session trong CakePHP
- Bich Yen on Sử dụng session trong CakePHP
TAG
Calendar
Lưu trữ
- September 2011 (3)
- July 2011 (1)
- March 2011 (1)
- February 2011 (1)
- November 2010 (4)
- October 2010 (1)
- September 2010 (2)
- August 2010 (9)
- July 2010 (9)
- June 2010 (22)
Blogroll
- Bakery
- Biển đảo Việt Nam
- CakePHP
- CakePHP Google Group
- CakePHP Manual
- CakePHP Questions
- Diễn đàn CakePHP VN
Đoạn code trên hay quá, rất sáng tạo, hi. trước giờ mình không nghĩ ra nghĩ, cái chỗ models ấy
Mục số 3 nói gì chả hiểu:
-Đảm bảo rằng bạn đã khai báo dùng hepler này trong controller ~~> khai báo sao, nói sơ sơ zị tui k bik làm
-id của input controller muốn gắn tinymce ~~> là cái giống gì????
Nghĩa là helper viết ra để đó mà không khai báo vào controller để xài nó thì sẽ không xài được!
Mỗi html control đều có 1 thuộc tính duy nhất là id, căn cứ vào cái id này mà thằng tinymce nó mới biết nó sẽ được gắn vào textarea nào!
Hi admin, khi mình render ”elements/advanced_tinymce” thì nó báo lỗi là không tìn thấy file index. Mình dùng thằng croogo cms.
Cho em hỏi chút về cakePHP được không, tích hợp tinyMCE vào cakephp, nhưng em làm giống như anh làm mà hắn ko hiện ra bộ soạn thảo đó tới, anh có thể giúp em lần nữa dc ko, chi tiết hơn, và nếu có thể anh gởi mã nguồn đó cho em tham khảo dc ko.
Em cảm ơn
Các bạn có làm theo cách này chưa? Minh làm không đc đến. Cho mình gỏi tí là hai file simple_tinymce.ctp và advance_tinymce.ctp đưa vào thư mục elements thì có cần tạo elements_controller k?
2 file simple_tinymce.ctp và advance_tinymce.ctp chứa code js để config cho bộ soạn thảo, chỉ việc đưa vào view để xài thôi, ko cần tạo thêm gì nữa cả!
Bạn cho mình hỏi có thể load 2 bộ soạn thảo này trong cùng 1 bài được không. Ví dụ mình có cái describe và content. Mình có thể load cho cả 2 được không???
Ở mục 3, bạn thấy tham số cần truyền vào để load bộ soạn thảo lên là id của textarea, do đó, bạn muốn load bao nhiêu cái cũng được, miễn id khác nhau. Bạn copy thêm 1 dòng nữa và thay cái el=>id mới
< ?php echo $this->render(‘elements/advanced_tinymce’, array(‘el’=>’describe’));?>
Ý mình là nó load cả 2 bộ soạn thảo cho cùng 1 id kìa…
Đã là id thì phải khác nhau chứ sao lại cùng được, trong html, csdl… khi dùng id là phải khác nhau, trong 1 form không thể có nhiều hơn 1 control có cùng id được. Cũng có thể config lại để nó bộ soạn thảo load vào bất cứ input nào có dạng textarea
Em muốn hỏi là cái này có thể upload image vào content ko nhỉ/
Được nhưng em phải thêm plugin cho nó, trên mạng có cái plugin ajaxfilemanager dùng cho tinymce được đó.
Hi anh Aadmin.
Em làm theo hướng dẫn của anh nhưng nó báo lỗi thế này nè :
Error: The view for BooksController::admin_add() was not found.
Error: Confirm you have created the file: E:\php\xampp\htdocs\croogo\app\views\books\elements\advanced_tinymce.ctp
Mong anh chỉ giúp
Hi anh có thể hướng dẫn cụ thể đc không nhỉ? nếu đc thì e cám ơn anh trước nhé.
Bạn chi mình cách tích hợp cái nút (3 nút) công thức toán ở đây http://www.imathas.com/editordemo/demo.html vào joomla 1.5 cho mình với.
MÌnh làm như vậy trong cms croogo nhưng nó vẫn lỗi
Missing View
Error: The view for BooksController::admin_add() was not found.
Error: Confirm you have created the file: E:\php\xampp\htdocs\croogo\app\views\books\elements\advanced_tinymce.ctp
Notice: If you want to customize this error message, create app\views\errors\missing_view.ctp
Xin moi nguoi chỉ giúp
Bạn phải tạo file advanced_tinymce.ctp và bỏ vào thư mục elements của ứng dụng. Nếu theo câu thông báo trên thì có thể bạn đã render sai đường dẫn tới file advanced_tinymce.ctp rồi. Không biết bạn đang dùng bản cake nào, bạn thử hàm:
hoặc
xem sao nhé!
Thanks admin.
Để mình sửa lại render xem sao
Mình thấy trên các diễn đàn khi thì đưa tinymce vào helper khi thì đưa vào plugins. Cái nào hay dùng nhất?
Đưa thành dạng nào cũng được, quan trọng là code cho phù hợp, mình thích dùng dạng element
Có ai dùng croogo cms chưa? Chỉ giúp mình dùng tinymce trong croogo với! Thanks
Hi all.
Mình có sử dụng helpers\ date_picker (calender). Mình chọn định dạng ngày nhập vào M -D -Y (và các định dạng khác cũng vây). ví dụ 05-20-2001 mình muốn lưu vao db mysql nhưng nó báo lỗi (mình in print_r($this->data) ) cũng không được luôn.
textbox ngày tháng mình như sau:
echo $datePicker->picker(‘start_date’, array(‘format’=>’%m-%d-%Y %H:%M’), ‘yes’);
picker là một function trong helpers\ date_picker
Mình muốn hỏi là dùng calender thì phải định dạng lại kêu ngày tháng ntn?
Thanks all
Nếu CSDL MySQL bạn thiết kế kiểu dữ liệu của field là date thì định dạng khi lưu phải là: Y-m-d
ví dụ: 2011-09-04