yangyi
/
DjangoUeditor3


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
							<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

    <style type="text/css">
        * {margin: 0; padding: 0}
        table { margin: 10px;font-size: 12px}
        table tr { height: 25px}
        input { width: 110px;border: 1px solid #ccc;}
        select { width: 76px;margin-left:6px\9; }
        span.strong {font-weight: bold;}
    </style>
</head>
<body>
<table>
    <tr>
        <td width="70"><span class="strong"><var id="lang_background"></var></span></td>
        <td><input id="bgColor" type="text" value="#FFFFFF"></td>
    </tr>
    <tr>
        <td rowspan="2"><span class="strong"><var id="lang_alignment"></var></span></td>
        <td><var id="lang_horizontal"></var>:&nbsp;<select id="align">
                <option value="">默认</option>
                <option value="center">居中</option>
                <option value="left">居左</option>
                <option value="right">居右</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><var id="lang_vertical"></var>:&nbsp;<select id="vAlign">
                <option value="">默认</option>
                <option value="middle">居中</option>
                <option value="top">顶端对齐</option>
                <option value="bottom">底端对齐</option>
            </select>
        </td>
    </tr>

</table>
<script type="text/javascript" src="../internal.js"></script>
<script type="text/javascript">
    addColorPickListener();
    dialog.onok = function () {
        var tdItem = {
            bgColor:$G( "bgColor" ).value || "#FFFFFF",
            align:$G( "align" ).value || "",
            vAlign:$G( "vAlign" ).value || ""
        };
        editor.execCommand( "edittd", tdItem );
    };
    (function () {
        if ( !editor.currentSelectedArr.length ) {
            var range = editor.selection.getRange();
            var td = domUtils.findParentByTagName( range.startContainer, 'td', true );
            if ( td ) {
                $G( "bgColor" ).value = (td.bgColor || "#FFFFFF").toUpperCase();
                $G( "align" ).value = td.align || "";
                $G( "vAlign" ).value = td.vAlign || "";
            }
        }
    })();
    /**
     * 绑定取色器监听事件
     */
    function addColorPickListener() {
        var colorPicker = getColorPicker(),
                ids = ["bgColor"];
        for ( var i = 0, ci; ci = $G( ids[i++] ); ) {
            domUtils.on( ci, "click", function () {
                var me = this;
                showColorPicker( colorPicker, me );
                colorPicker.content.onpickcolor = function ( t, color ) {
                    me.value = color.toUpperCase();
                    colorPicker.hide();
                };
                colorPicker.content.onpicknocolor = function () {
                    me.value = '';
                    colorPicker.hide();
                };
            } );
            domUtils.on( ci, "keyup", function () {
                colorPicker.hide();
            } );
        }
        domUtils.on( document, 'mousedown', function () {
            UE.ui.Popup.postHide( this );
        } );
    }

    /**
     * 实例化一个colorpicker对象
     */
    function getColorPicker() {
        return new UE.ui.Popup( {
            content:new UE.ui.ColorPicker( {
                noColorText:lang.noColor,
                editor:editor
            } )
        } );
    }

    /**
     * 在anchorObj上显示colorpicker
     * @param anchorObj
     */
    function showColorPicker( colorPicker, anchorObj ) {
        colorPicker.showAnchor( anchorObj );
    }
</script>
</body>
</html>