Dropdown Plugin Help

Hi,

I want to create a Dropdown Plugin (similar to the Font dropdowns) which list a number of values, for example [abc],[def],[ghi],..., and when I select these values they get inserted into the HTML code at the point of the cursor/selection.

Any ideas how this can be achieved?

TIA,

trappy123

Sun, 04/17/2005 - 10:05

stripe-man

Joined: 30/11/2006

Posts: 143

RE: Dropdown Plugin Help

oh yea... thats a good one Trapp123.... any replies (email?))

Mon, 04/18/2005 - 14:33

stripe-man

Joined: 30/11/2006

Posts: 143

RE: Dropdown Plugin Help

ok.. I got it figured out... This mod below will allow you to have a custom drop down that will place in html (formated as u wish (as stated in your custom html file).

HEre are the file contents ... I will note them as best I can...

Custom Dialog File: (dialog Direcotory) fck_classify.html
Change the entries as u see fit.
___________________________________________
Please note: The line:
oEditor.FCK.InsertHtml( '<b>'+ GetE('txtName').value + '</b>' ) ;

is where all the html is happening (file below).
_________________________________________

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<html>
   <head>
      <title>Classify Properties</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta content="noindex, nofollow" name="robots">
      <script src="common/fck_dialog_common.js" type="text/javascript"></script>
      <script type="text/javascript">

var oEditor = window.parent.InnerDialogLoaded() ;

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

var oActiveEl = oEditor.FCKSelection.GetSelectedElement() ;

window.onload = function()
{
   // First of all, translate the dialog box texts
   oEditor.FCKLanguageManager.TranslatePage(document) ;

   if ( oActiveEl && oActiveEl.tagName == 'A' && oActiveEl.name.length > 0 && oActiveEl.getAttribute('href').length == 0 )
      GetE('txtName').value = oActiveEl.name ;
   else
      oActiveEl = null ;

   window.parent.SetOkButton( true ) ;
}

function Ok()
{
   if ( GetE('txtName').value.length == 0 )
   {
      alert( oEditor.FCKLang.DlgAnchorErrorName ) ;
      return false ;
   }

   //oEditor.FCK.InsertHtml( '<a name="' + GetE('txtName').value + '"></a>' ) ;
   oEditor.FCK.InsertHtml( '<b>'+ GetE('txtName').value + '</b>' ) ;
   return true ;
}

      </script>
   </head>
   <body style="OVERFLOW: hidden" scroll="no">
      <table height="100%" width="100%">
         <tr>
            <td align="center">
               <table border="0" cellpadding="0" cellspacing="0" width="80%">
                  <tr>
                     <td>
                        <span fckLang="DlgClassifyName">Classification Name</span><BR>
                        <!-- <input id="txtName" style="WIDTH: 100%" type="text"> -->
                        <select name="txtName" style="WIDTH: 100%">
                        <option value="None">Select Classification to Enter</option>
                        <option value="TS//test Classify 1">TS//test Classify 1</option>
                        <option value="TS//test Classify 2">TS//test Classify 2</option>
                        <option value="TS//test Classify 3">TS//test Classify 3</option>
                        <option value="TS//test Classify 4">TS//test Classify 4</option>
                        </select>
                        
                     </td>
                  </tr>
               </table>
            </td>
         </tr>
      </table>
   </body>
</html>

___________________________________________________________________________

fckeditorcode_ie_2.js - chnage in howerver many of the browser files u need to. Note also the page to the html file mentioned above.

There are two changes to this that you need to make

Look for Anchor and insert after (and alter as nessesary)
Note the second entry .. that is mine.

Change 1:
break;case 'Anchor':oCommand=new FCKDialogCommand('Anchor',FCKLang.DlgAnchorTitle,'dialog/fck_anchor.html',370,170);
break;case 'Classify':oCommand=new FCKDialogCommand('Classify',FCKLang.DlgClassifyTitle,'dialog/fck_classify.html',370,170);

Change 2: agian.. mine is the second one.

break;case 'Anchor':oItem=new FCKToolbarButton('Anchor',FCKLang.Anchor);
break;case 'Classify':oItem=new FCKToolbarButton('Classify',FCKLang.Classify);

____________________________________________________
en.js - again.. look for anchor... and add entries below ... modify as needed.

Classify : "Insert/Edit Classify Label",
ClassifyProp : "Classify Properties",
// Classify Dialog
DlgClassifyTitle : "Classify Properties",
DlgClassifyName : "Classify Name",
DlgClassifyErrorName : "Please type the Classify name",

_________________________________________________
fckconfig.js add the entry 'Classify', where ever you want the button to appear. 2 places to change

IE:
FCKConfig.ToolbarSets["Default"] = [
['Source','Bold','Italic','Underline','TextColor','BGColor','-','Preview','Cut','Copy','Paste','-','Find','Replace'],
['OrderedList','UnorderedList','-','Outdent','Indent','JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['SelectAll','Image','Table','Rule','Link','Unlink','Anchor','-','RemoveFormat','-','Classify','FontName','FontSize']
] ;

----------------AND------------------

FCKConfig.ContextMenu = ['Generic','Link','Anchor','Classify','Image','Select','Textarea','Checkbox','Radio','TextField','HiddenField','ImageButton','Button','BulletedList','NumberedList','TableCell','Table','Form'] ;

_______________________________________________________________

Create an image called classify.gif (transparent) and place in the images folder under toolbar.

Thanks should be it!! Let me know how it works out for u!

Mon, 04/18/2005 - 14:41

stripe-man

Joined: 30/11/2006

Posts: 143

RE: Dropdown Plugin Help

bt the way ... that image is 12x13 @ 96 dpi

Mon, 04/18/2005 - 14:43

stripe-man

Joined: 30/11/2006

Posts: 143

RE: Dropdown Plugin Help

Crap.. forgot to say...

in the above code:
break;case 'Classify':oItem=new FCKToolbarButton('Classify',FCKLang.Classify);

classify is the image name. it automatically grabs the image name with the same name. (it apears NOT to be caps sensitive.)

Sun, 04/17/2005 - 12:16

trapp123

Joined: 16/04/2005

Posts: 13