Thứ Hai, 13 tháng 10, 2008

Sử dụng TinyMCE, iBrowser với CakePHP

TinyMCE



  • Cài đặt


+ Download TinyMCE http://tinymce.moxiecode.com/download.php

+ Sau khi download giải nén ra thư mục TinyMCE, và  copy nguyên thư mục /tiny_mce vào /webroot/js trong cakephp.

  • Cấu hình


+ Đưa đoạn mã vào layout  (hoặc vào view nếu không muốn sử dụng mặc định cho tất cả các layout) :
<?php
if(isset($javascript)):
echo
$javascript->link('tiny_mce/tiny_mce.js');
endif;
?>

+ Khai báo sử dụng javascript helper trong Controller :
var $helpers = array('Javascript' );

+ Sử dụng tinyMCE trong view :
<script type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode : "textareas",
convert_urls : false
});
</script>

* mode : "textareas" Tất cả các textarea sẽ biến thành tinyMCE editor

iBrowser



  • Cài đặt


+ Download the ibrowser plugin from http://j-cons.com/downloads/

+ Copy into folder /tiny_mce/plugins/

  • Cấu hình


+ Cấu hình file config.inc.php trong folder config  dòng 96 :

$cfg['ilibs'] = array (
array (
'value' => '/bitcms/app/webroot/img/uploads/,
'
text'        => 'Site Pictures',
),

...
);

* 'value' => '/bitcms/app/webroot/img/uploads/ Đường dẫn tới folder chứa ảnh.


+  Copy file tinyMCE.editor_plugin.js từ folder interface trong folder ibrowser tới folder chính ibrowser và đổi tên thành editor_plugin.js

+ Khai báo  plugin ibrowser và include ibrowser button.

<script type="text/javascript">
tinyMCE.init({
plugins : "ibrowser",
theme : "advanced",
theme_advanced_buttons3_add : "ibrowser",
mode : "textareas",
convert_urls : false
});
</script>


* Error: ib is undefined

khai báo biến ib trong file editor_plugin.js :
var ib = null;

* Thay đổi trang index trong ibrowser thành trang  Insert .

Sửa file ibrowser.php thêm code sau dưới dòng 129 (  btnStage(); )
/*
imDiv that contain adv content
call changeClass(0,'imDiv','hideit'); to hide  adv content
*/
changeClass(0,'imDiv','hideit');

/*
inDiv that contain insert form
call changeClass(0,'inDiv','showit'); to showit
*/
changeClass(0,'inDiv','showit');

Không có nhận xét nào:

Đăng nhận xét