Skip to main content

FCKEDITOR table cell background Image implementation

Add

Add
<tr>
<td nowrap ><span >Backgrund Image</span>:</td>
<td><input id="txtUrl" style="WIDTH: 100%" type="text" onblur="UpdatePreview();"></td>
<td id="tdBrowse"><input id="btnBrowse" onclick="BrowseServer();" type="button" value="Browse Server" fckLang="DlgBtnBrowseServer"></td>
</tr>
code in fck_tablecell.html after
<tr>
<td nowrap><span fckLang="DlgCellBorderColor">Border Color</span>:</td>
<td> <input id="txtBorderColor" type="text" size="8" name="txtCellPadding"></td>
<td> <input type="button" fckLang="DlgCellBtnSelect" value="Select..." onclick="SelectColor( 'Border' )"></td>
</tr>

and add a js file for browsing and upload the image and the js file same as the
editor/dialog/fck_image/fck_image.js file name as editor/dialog/fck_image/fck_image_table.js and also i change some thing in this file ....

and the code is


/*******************/
/*
* FCKeditor - The text editor for internet
* Copyright (C) 2003-2005 Frederico Caldeira Knabben
*
* Licensed under the terms of the GNU Lesser General Public License:
* http://www.opensource.org/licenses/lgpl-license.php
*
* For further information visit:
* http://www.fckeditor.net/
*
* File Name: fck_image.js
* Scripts related to the Image dialog window (see fck_image.html).
*
* File Authors:
* Frederico Caldeira Knabben (fredck@fckeditor.net)
*/

var oEditor = window.parent.InnerDialogLoaded() ;
var FCK = oEditor.FCK ;
var FCKLang = oEditor.FCKLang ;
var FCKConfig = oEditor.FCKConfig ;

var bImageButton = ( document.location.search.length > 0 && document.location.search.substr(1) == 'ImageButton' ) ;


// Get the selected image (if available).
var oImage = FCK.Selection.GetSelectedElement() ;

if ( oImage && oImage.tagName != 'IMG' && !( oImage.tagName == 'INPUT' && oImage.type == 'image' ) )
oImage = null ;

// Get the active link.
var oLink = FCK.Selection.MoveToAncestorNode( 'A' ) ;

var oImageOriginal ;


window.onload = function()
{
// Translate the dialog box texts.
oEditor.FCKLanguageManager.TranslatePage(document) ;

GetE('btnLockSizes').title = FCKLang.DlgImgLockRatio ;
GetE('btnResetSize').title = FCKLang.DlgBtnResetSize ;

// Load the selected element information (if any).
LoadSelection() ;

// Show/Hide the "Browse Server" button.
GetE('tdBrowse').style.display = FCKConfig.ImageBrowser ? '' : 'none' ;
GetE('divLnkBrowseServer').style.display = FCKConfig.LinkBrowser ? '' : 'none' ;

UpdateOriginal() ;

// Set the actual uploader URL.
if ( FCKConfig.ImageUpload )
GetE('frmUpload').action = FCKConfig.ImageUploadURL ;

window.parent.SetAutoSize( true ) ;

// Activate the "OK" button.
window.parent.SetOkButton( true ) ;
}

function LoadSelection()
{
if ( ! oImage ) return ;

var sUrl = GetAttribute( oImage, 'src', '' ) ;

// TODO: Wait stable version and remove the following commented lines.
// if ( sUrl.startsWith( FCK.BaseUrl ) )
// sUrl = sUrl.remove( 0, FCK.BaseUrl.length ) ;

GetE('txtUrl').value = sUrl ;
GetE('txtAlt').value = GetAttribute( oImage, 'alt', '' ) ;
GetE('txtVSpace').value = GetAttribute( oImage, 'vspace', '' ) ;
GetE('txtHSpace').value = GetAttribute( oImage, 'hspace', '' ) ;
GetE('txtBorder').value = GetAttribute( oImage, 'border', '' ) ;
GetE('cmbAlign').value = GetAttribute( oImage, 'align', '' ) ;

if ( oImage.style.pixelWidth > 0 )
GetE('txtWidth').value = oImage.style.pixelWidth ;
else
GetE('txtWidth').value = GetAttribute( oImage, "width", '' ) ;

if ( oImage.style.pixelHeight > 0 )
GetE('txtHeight').value = oImage.style.pixelHeight ;
else
GetE('txtHeight').value = GetAttribute( oImage, "height", '' ) ;

// Get Advances Attributes
GetE('txtAttId').value = oImage.id ;
GetE('cmbAttLangDir').value = oImage.dir ;
GetE('txtAttLangCode').value = oImage.lang ;
GetE('txtAttTitle').value = oImage.title ;
GetE('txtAttClasses').value = oImage.getAttribute('class',2) || '' ;
GetE('txtLongDesc').value = oImage.longDesc ;

if ( oEditor.FCKBrowserInfo.IsIE )
GetE('txtAttStyle').value = oImage.style.cssText ;
else
GetE('txtAttStyle').value = oImage.getAttribute('style',2) ;

if ( oLink )
{
GetE('txtLnkUrl').value = oLink.getAttribute('href',2) ;
GetE('cmbLnkTarget').value = oLink.target ;
}

//UpdatePreview() ;
}


function UpdateImage( e, skipId )
{
e.src = GetE('txtUrl').value ;
SetAttribute( e, "alt" , GetE('txtAlt').value ) ;
SetAttribute( e, "width" , GetE('txtWidth').value ) ;
SetAttribute( e, "height", GetE('txtHeight').value ) ;
SetAttribute( e, "vspace", GetE('txtVSpace').value ) ;
SetAttribute( e, "hspace", GetE('txtHSpace').value ) ;
SetAttribute( e, "border", GetE('txtBorder').value ) ;
SetAttribute( e, "align" , GetE('cmbAlign').value ) ;

// Advances Attributes

if ( ! skipId )
SetAttribute( e, 'id', GetE('txtAttId').value ) ;

SetAttribute( e, 'dir' , GetE('cmbAttLangDir').value ) ;
SetAttribute( e, 'lang' , GetE('txtAttLangCode').value ) ;
SetAttribute( e, 'title' , GetE('txtAttTitle').value ) ;
SetAttribute( e, 'class' , GetE('txtAttClasses').value ) ;
SetAttribute( e, 'longDesc' , GetE('txtLongDesc').value ) ;

if ( oEditor.FCKBrowserInfo.IsIE )
e.style.cssText = GetE('txtAttStyle').value ;
else
SetAttribute( e, 'style', GetE('txtAttStyle').value ) ;
}

function BrowseServer()
{
OpenServerBrowser(
'Image',
FCKConfig.ImageBrowserURL,
FCKConfig.ImageBrowserWindowWidth,
FCKConfig.ImageBrowserWindowHeight ) ;
}

function OpenServerBrowser( type, url, width, height )
{
sActualBrowser = type ;

var iLeft = (screen.width - width) / 2 ;
var iTop = (screen.height - height) / 2 ;

var sOptions = "toolbar=no,status=no,resizable=yes,dependent=yes" ;
sOptions += ",width=" + width ;
sOptions += ",height=" + height ;
sOptions += ",left=" + iLeft ;
sOptions += ",top=" + iTop ;

var oWindow = window.open( url, "FCKBrowseWindow", sOptions ) ;
}

var sActualBrowser ;

function SetUrl( url, width, height, alt )
{

if ( sActualBrowser == 'Link' )
{
GetE('txtLnkUrl').value = url ;
// UpdatePreview() ;
}
else
{
GetE('txtUrl').value = url ;
GetE('txtWidth').value = width ? width : '' ;
GetE('txtHeight').value = height ? height : '' ;

if ( alt )
GetE('txtAlt').value = alt;

//UpdatePreview() ;
//UpdateOriginal( true ) ;
}

window.parent.SetSelectedTab( 'Info' ) ;
}


var oUploadAllowedExtRegex = new RegExp( FCKConfig.ImageUploadAllowedExtensions, 'i' ) ;
var oUploadDeniedExtRegex = new RegExp( FCKConfig.ImageUploadDeniedExtensions, 'i' ) ;

courtsy : Anindita Nandi

Comments

Post a Comment

Popular posts from this blog

Financial Engineering

Financial Engineering: Key Concepts Financial engineering is a multidisciplinary field that combines financial theory, mathematics, and computer science to design and develop innovative financial products and solutions. Here's an in-depth look at the key concepts you mentioned: 1. Statistical Analysis Statistical analysis is a crucial component of financial engineering. It involves using statistical techniques to analyze and interpret financial data, such as: Hypothesis testing : to validate assumptions about financial data Regression analysis : to model relationships between variables Time series analysis : to forecast future values based on historical data Probability distributions : to model and analyze risk Statistical analysis helps financial engineers to identify trends, patterns, and correlations in financial data, which informs decision-making and risk management. 2. Machine Learning Machine learning is a subset of artificial intelligence that involves training algorithms t...
Post a Comment
Read more

Wholesale Customer Solution with Magento Commerce

The client want to have a shop where regular customers to be able to see products with their retail price, while Wholesale partners to see the prices with ? discount. The extra condition: retail and wholesale prices hasn’t mathematical dependency. So, a product could be $100 for retail and $50 for whole sale and another one could be $60 retail and $50 wholesale. And of course retail users should not be able to see wholesale prices at all. Basically, I will explain what I did step-by-step, but in order to understand what I mean, you should be familiar with the basics of Magento. 1. Creating two magento websites, stores and views (Magento meaning of website of course) It’s done from from System->Manage Stores. The result is: Website | Store | View ———————————————— Retail->Retail->Default Wholesale->Wholesale->Default Both sites using the same category/product tree 2. Setting the price scope in System->Configuration->Catalog->Catalog->Price set drop-down to...
Post a Comment
Read more

How to Prepare for AI Driven Career

  Introduction We are all living in our "ChatGPT moment" now. It happened when I asked ChatGPT to plan a 10-day holiday in rural India. Within seconds, I had a detailed list of activities and places to explore. The speed and usefulness of the response left me stunned, and I realized instantly that life would never be the same again. ChatGPT felt like a bombshell—years of hype about Artificial Intelligence had finally materialized into something tangible and accessible. Suddenly, AI wasn’t just theoretical; it was writing limericks, crafting decent marketing content, and even generating code. The world is still adjusting to this rapid shift. We’re in the middle of a technological revolution—one so fast and transformative that it’s hard to fully comprehend. This revolution brings both exciting opportunities and inevitable challenges. On the one hand, AI is enabling remarkable breakthroughs. It can detect anomalies in MRI scans that even seasoned doctors might miss. It can trans...
Post a Comment
Read more