CKEditor 4
Thu, 08/19/2004 - 17:02
#1
pyrokp
pyrokp's picture
Joined: 29/07/2004
Posts: 5

Why is there not a OK button ?

I added the "Image" button on my toolbar.
It seems to work fine (in IE, cause in Mozilla Firefox I still have "undefined" popup, and that's all T_T), but there is no OK or Submit button to send the data to the editor... There is only the Cancel button...

How can I activate it ?

And, more generally, why does it display "undefined" in Mozilla ?

I hope someone can help me to deal with this problem...
Thanks in advance !
Top
Thu, 07/29/2004 - 17:25
ralf57
ralf57's picture
Joined: 05/09/2004
Posts: 22

RE: Why is there not a OK button ?

The 2.0 version is still beta1 and the Image dialog simply doesn't work yet.
Please be patient...
Top
Fri, 07/30/2004 - 00:07
pyrokp
pyrokp's picture
Joined: 29/07/2004
Posts: 5

RE: Why is there not a OK button ?

Argh... OK. Thanks for the info !
I have to find another way to do that, because I have to make an admin interface with buttons to include such a stuff...
If anyone has idea... Thanks ;)

Top
Tue, 08/17/2004 - 01:17
subzane
subzane's picture
Joined: 17/08/2004
Posts: 12

fck_image.js SOURCE

var dialogArguments = window.parent.InnerDialogLoaded() ;
var FCK = dialogArguments.FCK ;

// Sets the Skin CSS
document.write( '<link href="' + dialogArguments.FCKConfig.SkinPath + 'fck_dialog.css" type="text/css" rel="stylesheet">' ) ;

//#### Dialog Tabs

// Set the dialog tabs.
window.parent.AddTab( 'Info', 'Image Info' ) ;
window.parent.AddTab( 'Browse', 'Browse Image', false) ;
window.parent.AddTab( 'Upload', 'Image Upload', false ) ;

// Function called when a dialog tag is selected.
function OnDialogTabChange( tabCode ) {
ShowE('divInfo' , ( tabCode == 'Info' ) ) ;
ShowE('divBrowse' , ( tabCode == 'Browse' ) ) ;
ShowE('divUpload' , ( tabCode == 'Upload' ) ) ;
}

var FCKConfig = dialogArguments.FCKConfig ;

// Get browsing configuration
var bCanBrowse = FCKConfig.ImageBrowser ;
var sBrowseURL = FCKConfig.ImageBrowserURL ;
var iBrowseWindowWidth = FCKConfig.ImageBrowserWindowWidth ;
var iBrowseWindowHeight = FCKConfig.ImageBrowserWindowHeight ;

// Get upload configuration
var bCanUpload = FCKConfig.ImageUpload && dialogArguments.BrowserInfo.IsIE55OrMore ;
var sUploadURL = FCKConfig.ImageUploadURL ;
var iUploadWindowWidth = FCKConfig.ImageUploadWindowWidth ;
var iUploadWindowHeight = FCKConfig.ImageUploadWindowHeight ;
var sUploadAllowedExtensions = FCKConfig.ImageUploadAllowedExtensions ;

// Gets the document DOM
var oDOM = dialogArguments.FCK.EditorDocument ;

// Gets the image if there is one selected.
var image ;
var e = FCK.Selection.GetSelectedElement( 'A' ) ;
if ( e && e.tagName == 'IMG' )
image = e ;

// this var is used to update the existing image
var imageSource = image ;

// Gets a copy of the image (for image size purposes)
var imageOriginal ;
if (image != null)
{
imageOriginal = new Image() ;
imageOriginal.src = image.src ;
}
else
imageOriginal = null ;

// Get the IMG tag.
function getImageHtml()
{
return '<IMG'
+ attr("src", document.getElementById('txtURL').value)
+ attr("alt", document.getElementById('txtAlt').value)
+ attr("align", document.getElementById('cmbAlign')[document.getElementById('cmbAlign').selectedIndex].value)
+ ((document.getElementById('txtWidth').value) ? attr("width" , document.getElementById('txtWidth').value) : "")
+ ((document.getElementById('txtHeight').value) ? attr("height", document.getElementById('txtHeight').value) : "")
+ '/>' ;
}

// Returns a formatted image attribute. Used by getImageHtml().
function attr(name, value)
{
if (!value || value == "") return "" ;
return ' ' + name + '="' + value + '"' ;
}

// Update any image (the selected or preview one)
function updateImage(imgTarget) {
if ( document.getElementById('txtURL').value.length == 0 ) {
imgTarget.style.display = "none" ;
} else {
imgTarget.removeAttribute("style") ;
imgTarget.removeAttribute("height") ;
imgTarget.removeAttribute("width") ;

imgTarget.src = document.getElementById('txtURL').value ;
setAttribute(imgTarget, "alt" , document.getElementById('txtAlt').value) ;
setAttribute(imgTarget, "width" , document.getElementById('txtWidth').value) ;
setAttribute(imgTarget, "height", document.getElementById('txtHeight').value) ;
try {
setAttribute(imgTarget, "align" , document.getElementById('cmbAlign').options[ document.getElementById('cmbAlign').selectedIndex ].value) ;
} catch (error) {
}
}
}

function setAttribute(element, attribute, value)
{
if (value == null || value == "")
element.removeAttribute(attribute, 0) ; // 0 = case insensitive
else
element.setAttribute(attribute, value, 0) ; // 0 = overwrite
}

// Fired when any field change to update the preview image.
function updatePreview() {
updateImage(document.getElementById('imgPreview'));
}

// Fired when the user press the OK button
function Ok() {
if ( document.getElementById('txtURL').value.length == 0 ) {
alert('ingen url');
cancel() ;
return ;
}
dialogArguments.FCK.InsertHtml( getImageHtml() || "" ) ;
window.parent.Cancel() ;

/*
if (imageSource == null) {
dialogArguments.FCK.InsertHtml( getImageHtml() || "" ) ;
window.parent.Cancel() ;
} else {
alert('imageSource != null');
updateImage( imageSource ) ;
window.returnValue = null ;
}
*/
// window.close() ;
}

// Fired when the user load the window. It sets the fields with the
// actual values if an image is selected in the editor.
function setDefaults()
{
// Activate the "OK" button.
window.parent.SetOkButton(true) ;

// First of all, translate the dialog box texts
dialogArguments.FCKLanguageManager.TranslatePage(document) ;

if (image == null) return ;

if (image.getAttribute("src",2) != null) document.getElementById('txtURL').value = image.getAttribute("src",2) ;
if (image.getAttribute("alt",2) != null) document.getElementById('txtAlt').value = image.getAttribute("alt",2) ;

if ( image.getAttribute("width",2) > 0 )
document.getElementById('txtWidth').value = image.getAttribute("width",2) ;

if (image.getAttribute("height",2) != null)
document.getElementById('txtHeight').value = image.getAttribute("height",2) ;

if (image.getAttribute("align") != null)
document.getElementById('cmbAlign').value = image.getAttribute("align") ;

// Show the initial dialog content.
GetE('divInfo').style.display = '' ;
updatePreview() ;

}

// Fired when the width or height input texts change
function sizeChanged(axe)
{
// Verifies if the aspect ration has to be mantained
if (imageOriginal && document.getElementById('chkLockRatio').checked)
{
if ((axe) == "Width")
{
if ( document.getElementById('txtWidth').value != "")
{
if (! isNaN(document.getElementById('txtWidth').value))
document.getElementById('txtHeight').value = Math.round( imageOriginal.height * ( document.getElementById('txtWidth').value / imageOriginal.width ) ) ;
}
else
document.getElementById('txtHeight').value = "" ;
}
else
if (document.getElementById('txtHeight').value != "")
{
if (! isNaN(document.getElementById('txtHeight').value))
document.getElementById('txtWidth').value = Math.round( imageOriginal.width * ( document.getElementById('txtHeight').value / imageOriginal.height ) ) ;
}
else
document.getElementById('txtWidth').value = "" ;
}

updatePreview() ;
}

// Fired when the Lock Ratio checkbox is clicked
function onLockRationClick()
{
sizeChanged("Width") ;
}

// Fired when the Reset Size button is clicked
function resetSize()
{
if (! imageOriginal) return ;

document.getElementById('txtWidth').value = imageOriginal.width ;
document.getElementById('txtHeight').value = imageOriginal.height ;
updatePreview() ;
}

function openNewWindow(sURL, sName, iWidth, iHeight, bResizable, bScrollbars)
{
var iTop = (screen.height - iHeight) / 2 ;
var iLeft = (screen.width - iWidth) / 2 ;

var sOptions = "toolbar=no" ;
sOptions += ",width=" + iWidth ;
sOptions += ",height=" + iHeight ;
sOptions += ",resizable=" + (bResizable ? "yes" : "no") ;
sOptions += ",scrollbars=" + (bScrollbars ? "yes" : "no") ;
sOptions += ",left=" + iLeft ;
sOptions += ",top=" + iTop ;

var oWindow = window.open(sURL, sName, sOptions)
oWindow.focus();

return oWindow ;
}

function setImage(sImageURL) {
if (image != null)
{
image = new Image() ;
image.src = sImageURL ;
}

imageOriginal = new Image() ;
imageOriginal.onload = resetSize ;
imageOriginal.src = sImageURL ;

document.getElementById('txtURL').value = sImageURL ;
updatePreview() ;
}

function selectImage(src, alt) {
if (document.getElementById('usethumbnail').checked) {
var end = src.indexOf('images/');
var part1 = src.substring(0, end+7);
var part2 = src.substring(end+7);
var path = part1+'thumbs/'+part2;
src = path;
}
setImage(src);
document.getElementById('txtAlt').value=alt;
updatePreview();
window.parent.SetSelectedTab('Info');
}

function changeCategory() {
document.forms[0].submit();
}
Top
Tue, 08/17/2004 - 01:18
subzane
subzane's picture
Joined: 17/08/2004
Posts: 12

fck_image.html SOURCE

<!--
* FCKeditor - The text editor for internet
* Copyright (C) 2003-2004 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.html
* Image dialog window.
*
* Version: 2.0 Beta 1
* Modified: 2004-05-31 23:07:51
*
* File Authors:
* Frederico Caldeira Knabben (fredck@fckeditor.net)
-->

<html>
   <head>
      <meta name="vs_targetSchema" content="<a href="http://schemas.microsoft.com/intellisense/ie5" target="_blank">http://schemas.microsoft.com/intellisense/ie5</a>">
      <script src="js/fck_dialog_common.js" type="text/javascript"></script>
      <script src="js/fck_image.js" type="text/javascript"></script>
      <style type="text/css">
         .ImagePreviewArea {
            border-right: #000000 1px solid;
            padding-right: 5px;
            border-top: #000000 1px solid;
            padding-left: 5px;
            padding-bottom: 5px;
            overflow: auto;
            border-left: #000000 1px solid;
            width: 100%;
            padding-top: 5px;
            border-bottom: #000000 1px solid;
            height: 150px;
            background-color: #ffffff;
         }
      body {
        margin: 5px;
        padding: 0px;
      }
      </style>
   </head>
   <body onload="setDefaults()" scroll="no">
  <div id="divInfo" style="DISPLAY: visible">
      <table cellspacing="1" cellpadding="1" border="0" width="100%" class="dlg" height="100%">
         <tr>
            <td>
               <table cellspacing="0" cellpadding="0" width="100%" border="0">
                  <tr>
                     <td valign="top" colspan="2">
                        <span fckLang="DlgImgURL">URL</span><br>
                        <input style="WIDTH: 100%" type="text" id="txtURL" onblur="updatePreview();">
                     </td>
                  </tr>
               </table>
               <hr width="100%" color="#000000" size="2">
            </td>
         </tr>
         <tr>
            <td><span fckLang="DlgImgAlt">Alternative Text</span><BR>
               <input style="WIDTH: 100%" type="text" id="txtAlt" onkeyup="updatePreview();">
            </td>
         </tr>
         <tr height="100%">
            <td>
               <table cellspacing="0" cellpadding="0" width="100%" border="0" height="100%">
                  <tr>
                     <td valign="top">
                        <br>
                        <table cellspacing="0" cellpadding="0" border="0">
                           <tr>
                              <td><span fckLang="DlgImgWidth">Width</span>&nbsp;</td>
                              <td><input type="text" size="3" id="txtWidth" onkeyup="sizeChanged('Width');"></td>
                           </tr>
                           <tr>
                              <td><span fckLang="DlgImgHeight">Height</span>&nbsp;</td>
                              <td><input type="text" size="3" id="txtHeight" onkeyup="sizeChanged('Height');"></td>
                           </tr>
                        </table>
                        <input type="checkbox" class="CheckBox" checked id="chkLockRatio" onclick="onLockRationClick();">
                        <span fckLang="DlgImgLockRatio">Lock Ratio</span>
                        <br>
                        <input type="button" fckLang="DlgBtnResetSize" value="Reset Size" onclick="resetSize();"><br>
                        <br>
                        <table cellspacing="0" cellpadding="0" border="0">
                           <tr>
                              <td><span fckLang="DlgImgAlign">Align</span>&nbsp;</td>
                              <td><select id="cmbAlign" onchange="updatePreview();">
                                    <option value="" selected></option>
                                    <option fckLang="DlgImgAlignLeft" value="left">Left</option>
                                    <option fckLang="DlgImgAlignCenter" value="middle">Center</option>
                                    <option fckLang="DlgImgAlignRight" value="right">Right</option>
                                 </select></td>
                           </tr>
                        </table>
                     </td>
                     <td>&nbsp;&nbsp;&nbsp;</td>
                     <td width="100%">
                        <table cellpadding="0" cellspacing="0">
                           <tr>
                              <td><span fckLang="DlgImgPreview">Preview</span></td>
                           </tr>
                           <tr>
                              <td valign="top">
                                 <div class="ImagePreviewArea" style="width:309px;">
                                    <img id="imgPreview" style="DISPLAY: none">Magnus es, domine, et laudabilis 
                                    valde: magna virtus tua, et sapientiae tuae non est numerus. et laudare te vult 
                                    homo, aliqua portio creaturae tuae, et homo circumferens mortalitem suam, 
                                    circumferens testimonium peccati sui et testimonium, quia superbis resistis: et 
                                    tamen laudare te vult homo, aliqua portio creaturae tuae.tu excitas, ut laudare 
                                    te delectet, quia fecisti nos ad te et inquietum est cor nostrum, donec 
                                    requiescat in te. da mihi, domine, scire et intellegere, utrum sit prius 
                                    invocare te an laudare te, et scire te prius sit an invocare te. sed quis te 
                                    invocat nesciens te? aliud enim pro alio potest invocare nesciens. an potius 
                                    invocaris, ut sciaris? quomodo autem invocabunt, in quem non crediderunt? aut 
                                    quomodo credent sine praedicante? et laudabunt dominum qui requirunt eum. 
                                    quaerentes enim inveniunt eum et invenientes laudabunt eum. quaeram te, domine, 
                                    invocans te, et invocem te credens in te: praedicatus enim es nobis. invocat 
                                    te, domine, fides mea, quam dedisti mihi, quam inspirasti mihi per humanitatem 
                                    filii tui, per ministerium praedicatoris tui.
                                 </div>
                              </td>
                           </tr>
                        </table>
                     </td>
                  </tr>
               </table>
            </td>
         </tr>
      </table>
    </div>
    <div id="divBrowse" style="DISPLAY: none">
<form action="" method="get">
<table cellspacing="1" cellpadding="1" border="0" width="100%" class="dlg" height="100%">
<tr>
  <td>
    <table cellspacing="0" cellpadding="0" width="100%" border="0">
      <tr>
        <td valign="top" colspan="2">
          <span fckLang="DlgImgCategory">Image Category</span><br></td>
      </tr>
    </table>
    <hr width="100%" color="#000000" size="2">
  </td>
</tr>
<tr height="100%">
  <td>
    <table cellspacing="0" cellpadding="0" width="100%" border="0" height="100%">
      <tr>
   <td valign="top">

            <img height="95" onclick="selectImage(this.src, 'my image');" src="<a href="http://www.subzane.com/files/ad.gif" target="_blank">http://www.subzane.com/files/ad.gif</a>" alt="AD Martin" style="float:left; margin-right: 5px;margin-bottom:5px;cursor:pointer">
            <img height="95" onclick="selectImage(this.src, 'my image');" src="<a href="http://www.subzane.com/files/ad.gif" target="_blank">http://www.subzane.com/files/ad.gif</a>" alt="AD Martin" style="float:left; margin-right: 5px;margin-bottom:5px;cursor:pointer">
            <img height="95" onclick="selectImage(this.src, 'my image');" src="<a href="http://www.subzane.com/files/ad.gif" target="_blank">http://www.subzane.com/files/ad.gif</a>" alt="AD Martin" style="float:left; margin-right: 5px;margin-bottom:5px;cursor:pointer">
            <img height="95" onclick="selectImage(this.src, 'my image');" src="<a href="http://www.subzane.com/files/ad.gif" target="_blank">http://www.subzane.com/files/ad.gif</a>" alt="AD Martin" style="float:left; margin-right: 5px;margin-bottom:5px;cursor:pointer">
            <img height="95" onclick="selectImage(this.src, 'my image');" src="<a href="http://www.subzane.com/files/sz.gif" target="_blank">http://www.subzane.com/files/sz.gif</a>" alt="AD Martin" style="float:left; margin-right: 5px;margin-bottom:5px;cursor:pointer">
            <img height="95" onclick="selectImage(this.src, 'my image');" src="<a href="http://www.subzane.com/files/sz.gif" target="_blank">http://www.subzane.com/files/sz.gif</a>" alt="AD Martin" style="float:left; margin-right: 5px;margin-bottom:5px;cursor:pointer">
            <img height="95" onclick="selectImage(this.src, 'my image');" src="<a href="http://www.subzane.com/files/sz.gif" target="_blank">http://www.subzane.com/files/sz.gif</a>" alt="AD Martin" style="float:left; margin-right: 5px;margin-bottom:5px;cursor:pointer">
            <img height="95" onclick="selectImage(this.src, 'my image');" src="<a href="http://www.subzane.com/files/sz.gif" target="_blank">http://www.subzane.com/files/sz.gif</a>" alt="AD Martin" style="float:left; margin-right: 5px;margin-bottom:5px;cursor:pointer">
            <img height="95" onclick="selectImage(this.src, 'my image');" src="<a href="http://www.subzane.com/files/sz.gif" target="_blank">http://www.subzane.com/files/sz.gif</a>" alt="AD Martin" style="float:left; margin-right: 5px;margin-bottom:5px;cursor:pointer">
            <img height="95" onclick="selectImage(this.src, 'my image');" src="<a href="http://www.subzane.com/files/sz.gif" target="_blank">http://www.subzane.com/files/sz.gif</a>" alt="AD Martin" style="float:left; margin-right: 5px;margin-bottom:5px;cursor:pointer">
          </td>
      </tr>
    </table>
  </td>
</tr>
</table>
</form>
    </div>
    <div id="divUpload" style="DISPLAY: none">
      <table cellspacing="1" cellpadding="1" border="0" width="100%" class="dlg" height="100%">
        <tr>
          <td>test</td>
        </tr>
      </table>
    </div>
   </body>
</html>
Top
Tue, 08/17/2004 - 01:19
subzane
subzane's picture
Joined: 17/08/2004
Posts: 12

The above code

The above code should work on both mozilla and IE6.

You may want to remove some of the stuff since it's a bi specialized, but I've used that code for weeks so it's quite bug free

enjoy! :)

Top
Tue, 08/17/2004 - 19:54
infectedrhythms
infectedrhythms's picture
Joined: 19/10/2005
Posts: 7

RE: Why is there not a OK button ?

I cut and paste the html in fck_image.html and I create the fck_image.js

I refershed thebrowser but I get nothing. The uplaod tab stilldont work!
Top
Wed, 08/18/2004 - 02:52
subzane
subzane's picture
Joined: 17/08/2004
Posts: 12

RE: Why is there not a OK button ?

as I said, it's a bit specialized
and the upload doesn't work since it never worked, ever. I just haven't removed it.

the error "get nothing" is for me unusable since it doesnt explain anything
Top
Thu, 08/19/2004 - 16:53
funkyboy
funkyboy's picture
Joined: 16/06/2004
Posts: 5

RE: The above code

IE6:
http://deian.maquett.com/fckEditorImage01.jpg

Mozilla:
http://deian.maquett.com/fckEditorImage02.jpg

Top
Thu, 08/19/2004 - 17:02
funkyboy
funkyboy's picture
Joined: 16/06/2004
Posts: 5

RE: The above code

that's a quite strange forum, i can't edit my posts...

anyway,
first of all, 10x to frederico for the great tool!

Andreas N, unfortunatelly, i can't understand your code, so above are screenshots from error in IE6 and from mozilla -> nothing happends inside ...
Top
Twitter Facebook Facebook Instagram Medium Linkedin GitHub Arrow down Phone Menu Close icon Check