Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,027

HOME > PHP > PHP Forum > jQuery UI Dialog + ckeditor มีปัญหา ใช้ tool table ไม่ได้ครับไม่รู้ติดตรงไหน

jQuery UI Dialog + ckeditor มีปัญหา ใช้ tool table ไม่ได้ครับไม่รู้ติดตรงไหน

เริ่มหัวข้อใหม่

Bee

โพสกระทู้ ( 52 )
บทความ ( 0 )

รบกวนผู้มีประสบการณ์ช่วยดูโค๊ดให้ผมนิดนึงครับ พอดีผมจะเขียนใช้ jQuery UI Dialog กับ ckeditor แล้ว tool table มันคลิกกำหนดโล คอลัมไม่ได้ครับ
ตรง "content test" dialog-form5 ตัวล่างอะครับ เอา mouse over แล้วเปิด dialog open ckeditor ได้
แต่แล้วพอคลิกที่ tool สร้าง table มันกำหนดเลือกจำนวน rows & columns ไม่ได้อะครับ
แต่ตัวบน dialog-form6 ใช้ ckeditor เพียว เรียกใช้ได้ครับ ไม่ทราบเป็นที่อะไร

แบบปรับตัด Code ให้ดูง่ายขึ้น ( PHP)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Dialog + ckeditor</title>
<?php
session_start();
$_SESSION["Level"]=1; // 1 = admin
$folder_at='admin/';
?>
    <link rel="stylesheet" href="<?php echo $folder_at;?>plugins/jqueryui/css/cupertino/jquery-ui-1.8.18.custom.css" />
    <script type="text/javascript" src="<?php echo $folder_at;?>plugins/jqueryui/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="<?php echo $folder_at;?>plugins/jqueryui/js/jquery-ui-1.8.18.custom.min.js"></script>
    <script type="text/javascript" src="<?php echo $folder_at;?>plugins/ckeditor/ckeditor.js"></script>
<style type="text/css">
<!--
/* Begin Create hide/show menu edit content */
/* Area dialog at editable */
.area-dialog {
    position: relative;
}
.area-dialog:hover {
    border: 1px dashed red;
}
/* menu image ตอนปกติ */
.area-dialog img.link-open-dialog {
    margin: 0;
    padding: 4px;
    background: #999;
    border: 2px solid white;
    cursor: pointer;
}
/* menu image ตอน  hover */
.area-dialog img.link-open-dialog:hover {
    margin: 1px;
    padding: 3px 2px 3px 4px;
    background: #ffffff;
    border: 2px solid lime;
    cursor: pointer;
}
/* เมื่อเอาเมาส์ไปชี้ที่รูปภาพ ให้แสดงตัว caption ขึ้นมา โดยกำหนดความโปร่งแสงไว้ที่ 85%*/
.area-dialog:hover .desc {
    display: block;
    font-size: 1.2em;
    padding: 10px 0;
    background: #111;
    filter:alpha(opacity=85);
    opacity:.85;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; /*--IE 8 Transparency--*/
    color: #fff;
    position: absolute;
    padding: 10px;
    margin: 0;
    left: 0px;
    top: 0px;
    border-top: 1px solid #999;
}
/* ตอนแสดงขึ้นมาครั้งแรก ให้ซ่อน caption ไว้ก่อน*/
.area-dialog .desc {
    display: none;
}
/* End Create hide/show menu edit content */
-->
</style>

</head>
<body>

<div id="dialog-form6" title="Edit" class="dialog-form-edit">
        <form id="frmContent6" name="frmContent6">
            <input type="hidden" name="tb_name6" id="tb_name6" value="content_show" />
            <input type="hidden" name="field_id6" id="field_id6" value="6" />
            <textarea id="txtaContent6" name="txtaContent6">content test</textarea>
        </form>
</div>
<script type="text/javascript">
    $("#btnSaveFrmContent_6").button();
    //<![CDATA[
        CKEDITOR.replace( 'txtaContent6' );
    //]]>
</script>

<div id="dialog-form5" title="Edit" class="dialog-form-edit">
        <form id="frmContent5" name="frmContent5">
            <input type="hidden" name="tb_name5" id="tb_name5" value="content_show" />
            <input type="hidden" name="field_id5" id="field_id5" value="5" />
            <textarea id="txtaContent5" name="txtaContent5">content test</textarea>
        </form>
</div>
<script type="text/javascript">
    $("#btnSaveFrmContent_5").button();
    //<![CDATA[
        CKEDITOR.replace( 'txtaContent5' );
    //]]>
</script>

<!--  dialog-form5 กับ 6 มันโค้ดเหมือนกัน แต่ตั้งแต่ตรงนี้ลงไปที่ต่างกันเลยคิดว่าทำให้มีปัญหาครับ แต่ไม่รู้ว่าปัญหาเกิดจากอะไรครับ -->
<div class="area-dialog">    
    <span class="desc">
        <img src="admin/images/edit_01.jpg" alt="Click to Edit" onclick="$('#dialog-form5').dialog('open')" class="link-open-dialog">
        <strong>Click to Edit</strong> Form 5 Edit
    </span>
    <div id="content_show_5">content test</div>
</div>

<script type="text/javascript">
    $(function() {
        $( "#dialog-form5" ).dialog( "destroy" );
        $( "#dialog-form5" ).dialog({
            autoOpen: false,
            height: 630,
            width: 850,
            modal: true,
            close: function() { $( "span[id^='mySpanFrmContent_']" ).html(''); }
        });
    });
</script>    

</body>
</html>

Code (PHP) ต้นฉบับ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Dialog + ckeditor</title>
<?php
session_start();
$_SESSION["Level"]=1; // 1 = admin
$folder_at='admin/';
?>
    <link rel="stylesheet" href="<?php echo $folder_at;?>plugins/jqueryui/css/cupertino/jquery-ui-1.8.18.custom.css" />
    <script type="text/javascript" src="<?php echo $folder_at;?>plugins/jqueryui/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="<?php echo $folder_at;?>plugins/jqueryui/js/jquery-ui-1.8.18.custom.min.js"></script>
    <script type="text/javascript" src="<?php echo $folder_at;?>plugins/ckeditor/ckeditor.js"></script>
<style type="text/css">
<!--
/* Begin Create hide/show menu edit content */
/* Area dialog at editable */
.area-dialog {
    position: relative;
}
.area-dialog:hover {
    border: 1px dashed red;
}
/* menu image ตอนปกติ */
.area-dialog img.link-open-dialog {
    margin: 0;
    padding: 4px;
    background: #999;
    border: 2px solid white;
    cursor: pointer;
}
/* menu image ตอน  hover */
.area-dialog img.link-open-dialog:hover {
    margin: 1px;
    padding: 3px 2px 3px 4px;
    background: #ffffff;
    border: 2px solid lime;
    cursor: pointer;
}
/* เมื่อเอาเมาส์ไปชี้ที่รูปภาพ ให้แสดงตัว caption ขึ้นมา โดยกำหนดความโปร่งแสงไว้ที่ 85%*/
.area-dialog:hover .desc {
    display: block;
    font-size: 1.2em;
    padding: 10px 0;
    background: #111;
    filter:alpha(opacity=85);
    opacity:.85;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; /*--IE 8 Transparency--*/
    color: #fff;
    position: absolute;
    padding: 10px;
    margin: 0;
    left: 0px;
    top: 0px;
    border-top: 1px solid #999;
}
/* ตอนแสดงขึ้นมาครั้งแรก ให้ซ่อน caption ไว้ก่อน*/
.area-dialog .desc {
    display: none;
}
/* End Create hide/show menu edit content */
-->
</style>
    <script type="text/javascript">
    function doContent_update(i) {
        $('#mySpanFrmContent_'+i).html('Please wait');
        var eleContent = 'CKEDITOR.instances.txtaContent'+i+'.getData()';
        $('#txtaContent'+i).val( eval(eleContent) );
        $.ajax({
            type: 'POST',
            url: '<?php echo $folder_at;?>control/process_db_update_content.php',
            data: $('#frmContent'+i).serialize()+'&key_num='+i,
            success: function(data){
                $('#mySpanFrmContent_'+i).html( data );
                if( $('#content_show_'+i).get(0) )   // ถ้ามี content_show_(i) พื้ันที่แสดงข้อมูลถ้ามีจะ update เลย
                    $('#content_show_'+i).html( $('#txtaContent'+i).val() );
            },
            error: function(data){    $('#mySpanFrmContent_'+i).html( data+'Error' );        }
        });
    }
    </script>
<?php
class Plugin_ckeditor {
    var $key_num = '1';
    var $title = 'Edit';
    var $tb_name = 'content_show';
    var $where_field_name = 'id';
    var $where_field_id = 1;
    var $permission = 0;
    var $folder_image = '';
    function Plugin_ckeditor ($permission_1_is_ok){
        $this->setPermission($permission_1_is_ok);
    }
    function setPermission ($value = 0) {
        $this->permission = $value;
    }
    function setFolderImage ($value = '') {
        $this->folder_image = $value;
    }
    function setKeyNum ($value = '1') {
        $this->key_num = $value;
    }
    function setTitle ($value = 'Edit') {
        $this->title = $value;
    }
    function setTbName ($value = 'content_show') {
        $this->tb_name = $value;
    }
    function setWhereFieldName ($value = 'id') {
        $this->where_field_name = $value;
    }
    function setWhereFieldID ($value = 1) {
        $this->where_field_id = $value;
    }

    function create_ckeditor_textarea ($divName, $where_field_id) {
        $this->setKeyNum($divName);
        $this->setWhereFieldID($where_field_id);
        $objResult['content'] = 'content test';
        if ($this->permission==1) {
echo <<<STRHTML
    \n<div id="dialog-form$this->key_num" title="$this->title" class="dialog-form-edit">
        <form id="frmContent$this->key_num" name="frmContent$this->key_num">
            <input type="hidden" name="tb_name$this->key_num" id="tb_name$this->key_num" value="$this->tb_name" />
            <input type="hidden" name="field_id$this->key_num" id="field_id$this->key_num" value="$this->where_field_id" />
            <textarea id="txtaContent$this->key_num" name="txtaContent$this->key_num">$objResult[content]</textarea>
            <button type="button" id="btnSaveFrmContent_$this->key_num" onclick="javascript:doContent_update('$this->key_num')">Save</button>
            <span id="mySpanFrmContent_$this->key_num"></span>
        </form>
    </div>
    <script type="text/javascript">
    $("#btnSaveFrmContent_$this->key_num").button();
    //<![CDATA[
        CKEDITOR.replace( 'txtaContent$this->key_num' );
    //]]>
    </script>
STRHTML;
        }
        return $objResult;
    }
}
class Plugin_dialog extends Plugin_ckeditor {
    var $str_DialogName = '#dialog-form1';
    var $dialog_width = 850;
    var $dialog_height = 630;
    function Plugin_dialog ($permission_1_is_ok) {
        $this->Plugin_ckeditor($permission_1_is_ok);
    }
    function use_dialog_open_ckeditor ($divName, $where_field_id) {
        $objResult = $this->create_ckeditor_textarea($divName, $where_field_id);
        echo "\n<div ",($this->permission==1) ? 'class="area-dialog"' : '' ,'>';
        if ($this->permission==1) {
echo <<<STRHTML
    <span class="desc">
        <img src="{$this->folder_image}images/edit_01.jpg" alt="Click to Edit" onclick="$('#dialog-form$this->key_num').dialog('open')" class="link-open-dialog">
        <strong>Click to Edit</strong> Form $this->key_num $this->title
    </span>
STRHTML;
        }
        echo '<div id="content_show_',$this->key_num,'">',$objResult['content'],'</div>';
        echo "</div>\n";
        return false;
    }
    function setDialogName ($str_DialogName_N) {
        $this->str_DialogName = $str_DialogName_N;
    }
    function setDialogSize ($width, $height) {
        $this->dialog_width = $width;
        $this->dialog_height = $height;
    }
    function use_jquery_dialog () {
        if ($this->permission==1) {
echo <<<STRHTML
    <script type="text/javascript">
    $(function() {
        $( "$this->str_DialogName" ).dialog( "destroy" );
        $( "$this->str_DialogName" ).dialog({
            autoOpen: false,
            height: $this->dialog_height,
            width: $this->dialog_width,
            modal: true,
            close: function() { $( "span[id^='mySpanFrmContent_']" ).html(''); }
        });
    });
    </script>
STRHTML;
        }
        return false;
    }
}
?>
</head>
<body>
<?php
    $obj_ckEdit = new Plugin_dialog( $_SESSION["Level"] );
    $obj_ckEdit->setFolderImage($folder_at);
    
    $obj_ckEdit->create_ckeditor_textarea(6,6);

    $obj_ckEdit->use_dialog_open_ckeditor(5,5);
    $obj_ckEdit->setDialogName('#dialog-form5');
    $obj_ckEdit->use_jquery_dialog();
?>

</body>
</html>

Tag : PHP, HTML/CSS, JavaScript, jQuery

ประวัติการแก้ไข
2012-03-16 18:22:11
2012-03-17 09:30:02
2012-03-17 09:33:12
2012-03-17 09:37:31

Date : 2012-03-16 18:20:11

By : Giguntic

View : 3854

Reply : 4

No. 1

Bee

โพสกระทู้ ( 52 )
บทความ ( 0 )

อ๋อ เจอแล้วครับ เป็นบรรทัดที่ 113. modal: true,

jQuery :: Dialog Method :: modal

config:modal
return type:boolean
content:ใช้กำหนดว่าเมื่อมี dialog ขึ้นมาแล้ว element อื่นๆจะถูก disabled ใช่หรือไม่ (default=false)
example:$("div#dialog").dialog ( { modal: true } );

ซึ่่งผมเองก็ยังไม่ค่อยเข้าใจว่า element อื่นๆจะถูก disabled นี่หมายถึง element ประเภท ชนิดแบบไหนบ้าง เพราะก็เห็นแต่มันทำงานได้ตลอด

Date : 2012-03-17 10:17:48

By : Giguntic

No. 2

Bee

โพสกระทู้ ( 52 )
บทความ ( 0 )

ต้องทำยังไงครับถ้าผมต้องการให้ เมนูที่โชว์ขึ้นมาหายไปตอนเมาส์ out ดีเลย์ซัก 4 วิ แล้วค่อยหายอะครับ

คือถ้าผมเอา mouse hover บน
<div class="area-dialog"> มันก็จะโชว์ <span class="desc"> แล้วพอเมาส์เอ้า มันก็จะหาย
แต่ถ้าผมต้องการให้มัน ดีเลย์ซํก 4 วิก่อนค่อยหายนี่ต้องทำยังไงเหรอครับ

.desc
.area-dialog:hover .desc {

.area-dialog .desc {

Date : 2012-03-17 13:01:45

By : Giguntic

No. 3

Bee

โพสกระทู้ ( 52 )
บทความ ( 0 )

โง่มานาน ไปนั่งเขียนคลาสเรียกใช้ ckedit แบบ php อยู่นาน จริงๆแล้ว มันมีอยู่แล้วนี่หว่า
อยู่ใน ckeditor\_samples\php จริงๆผมเองก็เห็นนานแล้ว แต่ไม่ถนัด eng แรกดูแล้วงง
อ่านไม่เข้าใจเลยข้ามเปิดผ่านไปดูอันอื่นจนลืมไป พอตอนนี้เริ่มเป็นแล้วกลับมาค้นดูใหม่แล้วเจอเลยถึงบ้างอ๋อ

Date : 2012-08-18 12:04:23

By : Giguntic

No. 4

Guest

like+1

Date : 2012-08-18 12:29:16

By : Mr.C

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : jQuery UI Dialog + ckeditor มีปัญหา ใช้ tool table ไม่ได้ครับไม่รู้ติดตรงไหน

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก