Image Alignment Problem

[SimplyPM]

Hi,

I have image manager tool in Rad Editor. Once uploaded image using image manager i need to set image alignment to left. After that i need to change the image left -to- right or right -to- left. It's working before i saved into database.

Again i opened the page, now i try to change the image alignment left -to- right (or) right -to- left. But now i am not able to change.

I have attached javascript with this. Please help me.

----------Code---------------

var _editor = null;
var _resizeEditorInterval = null;

//---------------------------------
function resizeEditor(editor) {
    clearInterval(_resizeEditorInterval);

    var sizeInfo = null;
    var oldHeight = 0;
    var newHeight = 0;
    var availHeight = document.body.clientHeight;

    if (editor != null) {
        var elem = editor.get_element();
        sizeInfo = getElementPosition(elem);
        oldHeight = elem.clientHeight;
        newHeight = availHeight - sizeInfo.y - 50;
        if (Math.abs(newHeight - oldHeight) > 3)
            editor.setSize(elem.clientWidth, newHeight);
    }
}


//---------------------------------
var curTables = [];
function isObjectInArray(elem, array) {
    if (!array || !array.length) return false;
    for (var i = 0; i < array.length; i++) {
        if (elem == array[i]) return true;
    }
    return false;
}


//---------------------------------
function onClientPasteHTML(sender, args) {
    //alert('pasteHTML1:' + args.get_commandName());
    //alert('pasteHTML2:' + args.get_value());
}


//---------------------------------
function onClientEditorLoad(sender, args) {
    //alert('load');
    var editor = sender;

    var colors = editor.get_colors();
    colors.shift();
    colors.unshift('#ffffff');
    editor.set_colors(colors);

    _resizeEditorInterval = window.setInterval(resizeEditor, 100);

    var oTool = editor.getToolByName("InsertTable");
    if (oTool == null) { return; }
    oTool._element.onclick =
        function() {
            window.setTimeout(
                function() {
                    var elemCol = findElementByClass('span', 'SetTableProperties');
                    //alert(elemCol.parentNode.parentNode.parentNode.innerHTML);
                    elemCol.parentNode.parentNode.parentNode.style.display = 'none';

                    /*
                    for(i=0; i< elemCol.length; i++)    
                    {    
                    var elem = elemCol[i];    
                    if(elem.className=="TableWizard")    
                    {    
                    elem.parentNode.parentNode.parentNode.style.visibility = "hidden";    
                    }    
                    if(elem.className=="SetCellProperties" || elem.className=="SetTableProperties")    
                    {    
                    elem.parentNode.parentNode.style.visibility = "hidden";    
                    }    
                    }
                    */
                }, 50);
        };

}


//---------------------------------
var _alignImage = null;
function onClientCommandExecuting(editor, args) {
    debugger;
    var cmd = args.get_commandName();
    var contentArea = editor.get_contentArea();

    _editor = editor;

    switch (cmd) {
        case 'SetImageProperties':
            args.set_cancel(true);

            _alignImage = editor.getSelectedElement();
            alert(_alignImage);
            if (_alignImage.tagName == "BODY") {
                alert('Please select any image before set image properties');
            }
            else {
                alignImage();
            }
            break;

        case 'ImageManager':
            args.set_cancel(true);
            addImage();
            break;

        case 'InsertTable':
            var tables = contentArea.getElementsByTagName("TABLE");
            for (var i = 0; i < tables.length; i++) {
                curTables[curTables.length] = tables[i];
            }
            break;

        case 'InsertAnchor':
            args.set_cancel(true);
            addAnchor();
            break;

        case 'SetColumnWidth':
            args.set_cancel(true);
            setColumnWidth(_editor, args);
            break;

        case 'PageBreak':
            args.set_cancel(true);
            pageBreak(editor, args);
            break;

        default:
            /*
            var selection = _editor.getSelection();           
            var selectedText = selection.getText();
            var selectedHTML = selection.getHtml();
            var selElement = _editor.getSelectedElement();
            alert(selectedHTML);
            */
            break;
    }
}


//---------------------------------
function onClientCommandExecuted(editor, args) {
    var COL_WIDTH = 80;

    switch (args.get_commandName()) {
        case 'InsertTable':
            var cArea = editor.get_contentArea();
            var tables = cArea.getElementsByTagName("TABLE");
            for (var i = 0; i < tables.length; i++) {
                var tbl = tables[i];

                //Check if this table existed before the InsertTable executed.
                if (!isObjectInArray(tbl, curTables)) {
                    // it's a new table, so size it reasonably
                    // set the column widths
                    try {
                        var numCols = tbl.getElementsByTagName('TR')[0].childNodes.length;
                        tbl.style.tableLayout = 'fixed';
                        tbl.style.pageBreakInside = 'avoid';
                        //tbl.style.width = (COL_WIDTH*numCols) + 'px';                              

                        //alert(numCols);
                        var colgroup = document.createElement("COLGROUP");
                        for (var i = 0; i < numCols; i++) {
                            var col = document.createElement("COL");
                            col.style.width = COL_WIDTH + 'px';

                            colgroup.appendChild(col);
                        }

                        tbl.insertBefore(colgroup, tbl.childNodes[0]);
                    }
                    catch (oErr) { }
                }
            }
            break;

        case 'BackColor':
            /*
            var selection = _editor.getSelection();           
            var selectedText = selection.getText();
            var selectedHTML = selection.getHtml();
            var selElement = _editor.getSelectedElement();

            alert(selectedHTML);
            */
            break;
    }

}

//---------------------------------
function alignImage() {
    try {
        var oManager = GetRadWindowManager();

        var wnd = oManager.open(_appRoot + 'pages/dlg/alignImage.htm', null);
        wnd.set_behaviors(Telerik.Web.UI.WindowBehaviors.Move + Telerik.Web.UI.WindowBehaviors.Close);
        wnd.setSize(350, 200);
        wnd.set_modal(true);
        wnd.add_close(closeAlignImage);
        wnd.get_contentFrame().style.overflow = 'hidden';

    }
    catch (oErr) { alert(oErr); }
}


//---------------------------------
function addImage() {
    try {
        var oManager = GetRadWindowManager();

        var wnd = oManager.open(_httpRoot + 'pages/dlg/FileUpload.aspx?m=add&cp=' + _cID, null);
        wnd.set_behaviors(Telerik.Web.UI.WindowBehaviors.Move + Telerik.Web.UI.WindowBehaviors.Close);
        wnd.setSize(300, 200);
        wnd.set_modal(true);
        wnd.add_close(closeAddImage);
        wnd.get_contentFrame().style.overflow = 'hidden';

        setTimeout(resizeFileDlg, 400);

        /*
        var arg = new dialogArgument();
        arg.closeCallback = closeAddImage;
        var wnd = showDialog('pages/dlg/FileUpload.aspx?m=add&cp=<%=this.CompanyID%>', 300, 200, arg);
        wnd.set_behaviors(Telerik.Web.UI.WindowBehaviors.Move + Telerik.Web.UI.WindowBehaviors.Close);
        */
    }
    catch (oErr) { alert(oErr); }
}


 

 


//---------------------------------
// sender = radWindow
function closeAddImage(sender, eventArgs) {
    try {
        var fileID = 0;
        debugger;
        sender.remove_close(closeAddImage);
        debugAlert('a');
        if (_editor == null) { return; }

        var result = sender.get_contentFrame().contentWindow.getResult();
        debugAlert(result);
        if (result != null && result.indexOf('success') == 0) {
            var fileParts = result.split(':');

            if (fileParts.length > 1) {
                fileID = parseInt(fileParts[1], 10);
                if (fileID > 0) {
                    var imgWidth = -1;
                    var imgHeight = -1;
                    if (fileParts.length > 2) {
                        var sizeParts = fileParts[2].split('x');
                        imgWidth = parseInt(sizeParts[0], 10);
                        imgHeight = parseInt(sizeParts[1], 10);
                    }

                    //var img = _editor.get_document().createElement("IMG");
                    //img.src = _appRoot + 's/img.ashx?f=' + fileID;
                    var imgHTML = '<img src="' + _appRoot + 's/img.ashx?f=' + fileID + '" ';
                    if (imgWidth > 0 && imgHeight > 0) {
                        // limit image size somewhat arbitrarily. we have no firm definition of
                        // a 'good' size, but the user can size back up if they want to. Size
                        // width down first; only check height if no width adjustment was needed.
                        if (imgWidth > 300) {
                            imgWidth = 300;
                        }
                        else if (imgHeight > 300) {
                            imgHeight = 300;
                        }

                        imgHTML += 'width="' + imgWidth + '" ';
                        imgHTML += 'height="' + imgHeight + '" ';
                        imgHTML += 'align=left';
                        imgHTML += ' style="marginRight:8px; padding:5px 5px 5px 5px;" ';
                    }
                    imgHTML += '/>';
                    debugger;
                    _editor.pasteHtml(imgHTML);

                    //var contentArea = _editor.get_contentArea();
                    //contentArea.appendChild(img);
                }
            }
        }
        else {
            if (result.indexOf('load') < 0)
                alert(result);
        }
    }
    catch (oErr) { }
}

//---------------------------------
// sender = radWindow
function closeAlignImage(sender, eventArgs) {
    try {
        debugger;
        var fileID = 0;

        sender.remove_close(closeAlignImage);
        if (_alignImage == null) { return; }
        alert(_alignImage);
        var wnd = sender.get_contentFrame().contentWindow;
        var text = wnd.getAlign();
        if (text.length == 0) { return; }
        debugger;
        _alignImage.setAttribute('align', text);  //style.textAlign = 'left';
        if (text == 'left') {
            _alignImage.style.marginRight = '8px';
        }
        else {
            _alignImage.style.marginLeft = '8px';
        }

    }
    catch (oErr) {
        alert(oErr);
     }
}




Thanks in advance.

[Dobromir]

Hi Lisa,

The provided JavaScript code looks OK, however, I am not able to fully examine the issue due to the use of custom dialogs. In order to be able to provide any further assistance we will need to examine these dialogs as well. Could you please open a support ticket and provide a sample project replicating the problem?

In addition, I noticed that you are setting align property to the image. If RadEditor has enabled ConvertToXhtml content filter the image tag will be changed to be a XHTML compliant, e.g.:

<img src="myImage.jpg" align="left" />
is modified to
<img alt="" src="myImage.jpg" style="float: left;" />

A possible reason for the problem might be that the value returned by the wnd.getAlign() function is the correct one.


Best wishes,
Dobromir
the Telerik team