Link to Internal Pages possible?

Not sure it this will help but I've just posted some code that gets information from a select box and puts it in the editor.

With some minor modifications I believe it will suit your needs. The only downside is that its not going to be on the toolbar, but that is going to be my next task

i have also been searching hi and low for such an addition to the editor.

if anybody can post their code it would help greatly

It's unbelievable, they are a lot of peaple who want to do it, and nobody help or share his code when he realizes it.

Fckeditor works with a lot of cms so it's possible to do it, but if we don't use a cms how can you do it

I created this plugin for Site@School cms, you will need to change the Mysql queries and remove the includes of specific S@S files.

fckplugin.js:
// Register the related command.
FCKCommands.RegisterCommand( 'Sas_link', new FCKDialogCommand( 'Sas_link', FCKLang.Sas_linkDlgTitle, FCKPlugins.Items['sas_link'].Path + 'sas_link.php', 450, 500 ) ) ;

// Create the "S@S link" toolbar button.
var oSasLinkItem = new FCKToolbarButton( 'Sas_link', FCKLang.Sas_linkBtn ) ;
oSasLinkItem.IconPath = FCKPlugins.Items['sas_link'].Path + 'sas_link.gif' ;
FCKToolbarItems.RegisterItem( 'Sas_link', oSasLinkItem ) ;


// The object used for all S@S link operations.
var FCKSas_link = new Object() ;

// Add the S@S link at the actual selection.
FCKSas_link.Add = function( name )
{
this.Name = name;
}

sas_link.php:

<?php
include("../../../../../configuration/database.inc.php");                  // connecting to database
mysql_connect("$db_server", "$db_username", "$db_password");
mysql_select_db("$db_name");

include("../../../../../core/session.php");                        // create a session

if($_SESSION['site'] == "protected")
{
$table_sections = $dbprefix."prot_sections" ;
$table_pages = $dbprefix."prot_pages" ;
}

$query = "SELECT config_value FROM $table_configuration where config_key='url'";        // getting the site url
$result = mysql_query($query);
$site_url = mysql_result($result,0);
unset($query);
unset($result);
$query = "SELECT config_value FROM $table_configuration where config_key='language'";           // getting the language
$result = mysql_query($query);
$language = mysql_result($result,0);
include("../../../../../languages/$language/$language.php");               // including language file
unset($query);
unset($result);
?>

Hi,

You can rewrite the link button as a plugin. Just name it mylink, and place a code like this in your ckplugin.js file :

<code>
FCKCommands.RegisterCommand('InsertMyLink',
new FCKDialogCommand('Insert a link', 'Insertion a link',
FCKConfig.PluginsPath+"myLink/dialog.html",
400,400));
var oInsertMyLinkItem = new FCKToolbarButton( "InsertMyLink", "insert/edit a link" ) ;
oInsertMyLinkItem.IconPath = FCKConfig.PluginsPath + 'myLink/link.gif' ;
FCKToolbarItems.RegisterItem( 'InsertMyLink', oInsertMyLinkItem ) ;
</code>

This will create a simple button in the toolbar, that opens up a popup page (a FCKDialog), that contains the dialog.html file.

next, you need the dialog.html file. Just copy the one that link uses. It is in :
FCKFOLDER/www/editor/dialog/fck_link.html

this file uses a js file. It is in :
FCKFOLDER/www/editor/dialog/fck_link/fck_link.js.

You need to copy it also.

now you have your three files : fckplugin.js, dialog.html and fck_link.js.

What you want to do, is to fake a "browse server" funcionality that will give you a list of files present in the server (or database). You dont want to use the connectors and resolve that bloody XML 500 errors or something...

You can take a look at the dialog.html code and add a line like this :

<tr>
<td align="right">
<button type="button" onclick="showFiles();">browse server</button>
</td>
</tr>

in my case, i added it here : (just search for URL and for Select an Anchor, then place your code between them)

<span fcklang="DlgLnkURL">

URL

</span>
<br>
<input type="text" onchange="OnUrlChange();" onkeyup="OnUrlChange();" style="width: 100%;" id="txtUrl">
</td>
</tr>
<tr>
<td align="right">
<button type="button" onclick="showFiles();">Parcourir l'espace de travail </button>
</td>
</tr>

</tbody>
</table>

<br>
<div id="divBrowseServer">
<input type="button" onclick="BrowseServer();" fcklang="DlgBtnBrowseServer" value="Browse Server">
</div>
</div>
<div align="center" style="display: none;" id="divLinkTypeAnchor">
<div style="display: none;" id="divSelAnchor">
<table width="70%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td colspan="3">
<span fcklang="DlgLnkAnchorSel">

Select an Anchor

</span>


Now, you see, you have inserted a button that will browse the server when you click on it. You just have to code the proper javascript function that does the job. Here, i called it showFiles. You need to add it yo the js file attached to this html file (remember the fck_link.js ?). Now open it and add a line at the bottom of it :

function showFileTree () {
window.open("files.html","list of files on the server","width=400,height=500,top=200,left=400,scrollbars=yes");
}

You can add some controls to this function like if statements or so...

So when you push the browser button, you call the showfiles function that opens a(nother) popup window.

In your files.html page, you can do something like :

<html>
  <head>
    <!-- use the same style sheet for all your FCK windows -->
    <link type="text/css" rel="stylesheet" href="skins/default/fck_dialog.css" />     
  </head>
  <body>

  </body>
</html>

In you body section, you must enter the code that will get your files from you database. This is very dependent. You can write it in php if you run appache or asp if you run IIS, or even dtml or tal if you run a zope server (as in my case).

In all cases, you need to create links with the <a> element, and then, when you click on it, you must :
1) set the url of that link in the url input of the link popup window
2) close your list_files popup.

You can do so using : <a href="href" onclick="window.parent.opener.SetUrl(this.href);window.parent.close();"> filename</a>


For instance, in a zope implementation, i would write something like :

<html>
  <head>
    <link type="text/css" rel="stylesheet" href="../../skins/default/fck_dialog.css" /> 
  </head>
  <body>
    <dtml-tree expr="folder_that_i_want_to_list"
               nowrap=0 
          branches="objectValues">
          <img src="<dtml-var icon>" />
          <a href="<dtml-var absolute_url>" 
          onclick="window.parent.opener.SetUrl(this.href);window.parent.close();">
          <dtml-var title_or_id> 
          </a>
    </dtml-tree>
  </body>
</html>

Hope this helps.

Y.Chaouche

This is a correction of my precedent post about the myLink plugin tutorial. Some filenames and function names are corrected so that people don't get confused about file names and function names not mentioned earlier in their reading...

Happy coding folks.

Remember : this wa




Hi,

You can rewrite the link button as a plugin. Just name it mylink, and place a code like this in your fckplugin.js file :

<code>
FCKCommands.RegisterCommand('InsertMyLink',
new FCKDialogCommand('Insert a link', 'Insert a link',
FCKConfig.PluginsPath+"myLink/dialog.html",
400,400));
var oInsertMyLinkItem = new FCKToolbarButton( "InsertMyLink", "insert/edit a link" ) ;
oInsertMyLinkItem.IconPath = FCKConfig.PluginsPath + 'myLink/link.gif' ;
FCKToolbarItems.RegisterItem( 'InsertMyLink', oInsertMyLinkItem ) ;
</code>

This will create a simple button in the toolbar, that opens up a popup page (a FCKDialog), that contains the dialog.html file.

next, you need the dialog.html file. Just copy the one that link uses. It is in :
FCKFOLDER/www/editor/dialog/fck_link.html

this file uses a js file. It is in :
FCKFOLDER/www/editor/dialog/fck_link/fck_link.js.

You need to copy it also.

now you have your three files : fckplugin.js, dialog.html and fck_link.js.

What you want to do, is to fake a "browse server" funcionality that will give you a list of files present in the server (or database). You dont want to use the connectors and resolve that bloody XML 500 errors or something...

You can take a look at the dialog.html code and add a line like this :

<tr>
<td align="right">
<button type="button" onclick="showFiles();">browse server</button>
</td>
</tr>

in my case, i added it here (just search for OnUrlChange in the dialog.html file):
<code>
<span fcklang="DlgLnkURL">

URL

</span>
<br>
<input type="text" onchange="OnUrlChange();" onkeyup="OnUrlChange();" style="width: 100%;" id="txtUrl">
</td>
</tr>
<tr>
<td align="right">
<button type="button" onclick="showFiles();">browse server </button>
</td>
</tr>

</tbody>
</table>
</code>

Now, you see, you have inserted a button that will browse the server when you click on it. You just have to code the proper javascript function that does the job. Here, i called it showFiles. You need to add it the js file that dialog.html uses(remember the fck_link.js ?). Now open it and add a line at the bottom of it :

function showFiles () {
window.open("files.html","list of files on the server","width=400,height=500,top=200,left=400,scrollbars=yes");
}

You can add some controls to this function like if statements or so...

So when you push the browser button, you call the showFiles function that opens a(nother) popup window displaying the files.html page.

In your files.html page, you can do something like :

<html>
  <head>
    <!-- use the same style sheet for all your FCK windows -->
    <link type="text/css" rel="stylesheet" href="skins/default/fck_dialog.css" />     
  </head>
  <body>

  </body>
</html>

In your body section, you must enter the code that will get your files from you database. This is very dependent. You can write it in php if you run appache or asp if you run IIS, or even dtml or tal if you run a zope server (as in my case).

In all cases, you need to create links with the <a> element, and then, when you click on it, you must :
1) set the url of that link in the url input of the link popup window, the (dialog.html page of our myLink plugin).
2) close your files.html popup.

You can do so using : <a href="href" onclick="window.parent.opener.SetUrl(this.href);window.parent.close();"> filename</a>

For instance, in a zope implementation, i would write something like :

<html>
  <head>
    <link type="text/css" rel="stylesheet" href="../../skins/default/fck_dialog.css" /> 
  </head>
  <body>
    <dtml-tree expr="folder_that_i_want_to_list"
               nowrap=0 
          branches="objectValues">
          <img src="<dtml-var icon>" />
          <a href="<dtml-var absolute_url>" 
          onclick="window.parent.opener.SetUrl(this.href);window.parent.close();">
          <dtml-var title_or_id> 
          </a>
    </dtml-tree>
  </body>
</html>

Hope this helps.

Y.Chaouche

This is a correction of my precedent post about the myLink plugin tutorial. Some filenames and function names are corrected so that people don't get confused about file names and function names not mentioned earlier in their reading...

Happy coding folks.

Remember : this was tested with FCKEditor 2.2 and not 2.3 !




Hi,

You can rewrite the link button as a plugin. Just name it mylink, and place a code like this in your fckplugin.js file :

<code>
FCKCommands.RegisterCommand('InsertMyLink',
new FCKDialogCommand('Insert a link', 'Insert a link',
FCKConfig.PluginsPath+"myLink/dialog.html",
400,400));
var oInsertMyLinkItem = new FCKToolbarButton( "InsertMyLink", "insert/edit a link" ) ;
oInsertMyLinkItem.IconPath = FCKConfig.PluginsPath + 'myLink/link.gif' ;
FCKToolbarItems.RegisterItem( 'InsertMyLink', oInsertMyLinkItem ) ;
</code>

This will create a simple button in the toolbar, that opens up a popup page (a FCKDialog), that contains the dialog.html file.

next, you need the dialog.html file. Just copy the one that link uses. It is in :
FCKFOLDER/www/editor/dialog/fck_link.html

this file uses a js file. It is in :
FCKFOLDER/www/editor/dialog/fck_link/fck_link.js.

You need to copy it also.

now you have your three files : fckplugin.js, dialog.html and fck_link.js.

What you want to do, is to fake a "browse server" funcionality that will give you a list of files present in the server (or database). You dont want to use the connectors and resolve that bloody XML 500 errors or something...

You can take a look at the dialog.html code and add a line like this :

<tr>
<td align="right">
<button type="button" onclick="showFiles();">browse server</button>
</td>
</tr>

in my case, i added it here (just search for OnUrlChange in the dialog.html file):
<code>
<span fcklang="DlgLnkURL">

URL

</span>
<br>
<input type="text" onchange="OnUrlChange();" onkeyup="OnUrlChange();" style="width: 100%;" id="txtUrl">
</td>
</tr>
<tr>
<td align="right">
<button type="button" onclick="showFiles();">browse server </button>
</td>
</tr>

</tbody>
</table>
</code>

Now, you see, you have inserted a button that will browse the server when you click on it. You just have to code the proper javascript function that does the job. Here, i called it showFiles. You need to add it the js file that dialog.html uses(remember the fck_link.js ?). Now open it and add a line at the bottom of it :

function showFiles () {
window.open("files.html","list of files on the server","width=400,height=500,top=200,left=400,scrollbars=yes");
}

You can add some controls to this function like if statements or so...

So when you push the browser button, you call the showFiles function that opens a(nother) popup window displaying the files.html page.

In your files.html page, you can do something like :

<html>
  <head>
    <!-- use the same style sheet for all your FCK windows -->
    <link type="text/css" rel="stylesheet" href="skins/default/fck_dialog.css" />     
  </head>
  <body>

  </body>
</html>

In your body section, you must enter the code that will get your files from you database. This is very dependent. You can write it in php if you run appache or asp if you run IIS, or even dtml or tal if you run a zope server (as in my case).

In all cases, you need to create links with the <a> element, and then, when you click on it, you must :
1) set the url of that link in the url input of the link popup window, the (dialog.html page of our myLink plugin).
2) close your files.html popup.

You can do so using : <a href="href" onclick="window.parent.opener.SetUrl(this.href);window.parent.close();"> filename</a>

For instance, in a zope implementation, i would write something like :

<html>
  <head>
    <link type="text/css" rel="stylesheet" href="../../skins/default/fck_dialog.css" /> 
  </head>
  <body>
    <dtml-tree expr="folder_that_i_want_to_list"
               nowrap=0 
          branches="objectValues">
          <img src="<dtml-var icon>" />
          <a href="<dtml-var absolute_url>" 
          onclick="window.parent.opener.SetUrl(this.href);window.parent.close();">
          <dtml-var title_or_id> 
          </a>
    </dtml-tree>
  </body>
</html>

Hope this helps.

Y.Chaouche

Well first of all thank you ychaouche for the rewrite of your plugin.

But i still can't get it working.

What i already did:

-i made a directory called myLink in de plugins directory
-copied * link.gif
* fckplugin.js (created this one and filled with the code between <code> </code>
* fck_link.js (paste function showFiles() into it..)
* fck_link.html (paste showfiles() button into it)
* files.html (created this one..)

in fckconfig.js i added the folowing line.

FCKConfig.Plugins.Add( 'myLink');

And added this 'myLink' into this:

FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','HiddenField'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor','myLink'],
['ImageManager','Flash','Table','Rule','Smiley','SpecialChar','PageBreak','UniversalKey'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','-','About']
] ;

But, when i load FCK i get an alert " Unknown item on toolbar "myLink"

Thnx for your support in advance:D

thanks Y. Chaouche this was great. I was able to get everythng up until when I display my items in the database. I put it in a <select> tag (I am using php) but I cant seem to get it to return the value of the URL to the dialog.html box.
Any ideas in PHP?

Hi ashabi !

I think it is just a javascript problem, and i think it could come from this line in the files.html file:
<a href="href" onclick="window.parent.opener.SetUrl(this.href);window.parent.close();">

I wrote this code for a framed html page (since the window.parent). In an unframed html page, you don't need the addtional parent reference, just refer to the opener window like this :

onclick="window.opener.SetUrl(this.href);window.close()"

Hope this helps !

Y.Chaouche

does this make sense?

                <?
                    echo ("Pages: ");
                    echo ("<select name=\"href\">");
                    $sql = "SELECT * FROM tbl_pages ORDER BY item_name";
                    $result = mysql_query($sql);
                        while($item = mysql_fetch_assoc($result)) { 
                                echo "<option value=\"index.php?id=".$item[item_id]."\">".$item[item_name]."</option>\n"; 
                                } 
                        echo ("</select>");
                        echo ("<input type=\"button\" value=\" OK \" onclick=\"window.opener.SetUrl(this.href);window.close()\">");
            ?>

Ok you got it wrong... you are trying to pass the href attribute of the ok input button (undefined) as the url of the selected option.

echo ("<input type=\"button\" value=\" OK \" onclick=\"window.opener.SetUrl(this.href);window.close()\">");

Instead, you must pass the value attribute of the selected <option>. To do this, i recommend something like :

<script type='text/javascript'>
function submitURL() {
url = this.getElementById('select').value
window.opener.SetUrl(url);
window.close();
}
</script>
<select id='select'>
<option value=\"index.php?id=".$item[item_id]."\" ></option>
... n options ...
</select>
<input value="Ok" onclick="submitURL();" />

I don't know if that's correct but it should work.

Hope this helps.

Y.Chaouche

Ok thanks. Maybe I am not setting the name of the <select> tag correctly because it now inputs undefined in the URL and not the value of the options.

Does that make sense? What should I set the name of the select tag

Hi ashabi,

Why not post your code so that we can help you better ?

Y.Chaouche

There's a little copy/paste mistake in the script. Just change this line :
url = this.getElementById('select').value
by this one :
url = document.getElementById('select').value

Y.Chaouche

perfect that worked!

I knew it would ...
Y.Chaouche

hello Yacine Chaouche,

I have some trouble with your script

I add your fckplugin file and i add the folowing line
FCKConfig.Plugins.Add( 'myLink' ) ; in fckconfig.js

But when i load the wysiwig i have an error who say myLink is unknow...

Please can you help me to find the problem

thanks a lot

Hello idealyo !

Well, make sure :
1) your plugin directory is named myLink
in fckplugin.js :
-----------------
2) your FCKRegisterCommand name parameter in is myLink
3) your FCKToolbarButton name param is myLink
4) your FCKToolbarItems.RegisterItem name param is myLink
in fckconfig.js :
-----------------
5) your have added it to the toolbar with the name myLink
6) you have set the correct plugin path when adding the plugin with FCKConfig.Plugins.add

I hope this should work. Maybe there's a couple of things to check in addtion but these are the principal cause of the uknown plugin error javascript alert.

Y.Chaouche

Oh yeah, replace all "insertMyLink" occurences in the code with "myLink". That should remove the unknown error thingy..

Y.Chaouche

sorry for the late reply, i had to enjoy my weekend.
Back on track again..

so i followed up your instructions, the fckdialog popup works.
But when i click on "Browse Server" button (with the Onclick="showFiles();" function), i get 2 javascripts errors.

Javascript error:

Line: 62
Char: 1

This is my line 62:

<input type="button" value="Browse Server" fckLang="DlgBtnBrowseServer" onClick="showFiles();" />

The popup for files.html won'nt appear.

Greetz,

Wilco

Thanks very much Yacine,

Very generous of you to provide such a detailed explanation. Works like a charm and it has opened the door for all manner of things that I had in mind but wasn't sure where to start.

Thanks.

Simon

When I click on the new icon in the toolbar a pop-up window appears, but it is labeled undefined and only the Link Info label and Advanced label appear. There is nothing else in the pop-up and I cannot determine where the error exists.

I've done the following:

1) made a new directory in the plugins folder, called myLink

added the fckplugin.js file

added the fcklink.js file

added the fck_mylink.html file (copied and renamed the dialog.html file)

and created a files.php file that contains mySQL code to retrieve my internal pages from the database

2) I added this code to the fckplugin.js file:

// Register the related command.
FCKCommands.RegisterCommand( 'myLink', new FCKDialogCommand( 'myLink', FCKLang.PlaceholderDlgTitle, FCKPlugins.Items['myLink'].Path + 'fck_myLink.html', 340, 160 ) ) ;

// Create the "Plaholder" toolbar button.
var oPlaceholderItem = new FCKToolbarButton( 'myLink', FCKLang.PlaceholderBtn ) ;
oPlaceholderItem.IconPath = FCKPlugins.Items['myLink'].Path + 'link.gif' ;

FCKToolbarItems.RegisterItem( 'myLink', oPlaceholderItem ) ;

3) I added this to the main fckconfig.js file:

FCKConfig.Plugins.Add( 'myLink', '' ) ;

4) I added this to the fcklink.js file:

function showFiles () {
   alert("here");
   window.open("files.php","list of files in the database","width=400,height=500,top=200,left=400,scrollbars=yes");
}

5) I added this table row to the fck_myLink.html file:

   <tr>
      <td align="right">
         <button type="button" onClick="showFiles();">browse server </button>
      </td>
      </tr>

Any ideas on how to fix this and make it work?

Thanks,

I'm having similar problems it would be great if someone has a solution.

Just wanted to check in to see if anyone was able to find a solution to my post.

Thanks

What you want to do, is to fake a "browse server" funcionality that will give you a list of files present in the server (or database). You dont want to use the connectors and resolve that bloody XML 500 errors or something...

ok, how would I go about faking a browse server functionality to hit the database and display a list of all the pages?

Can someone tutor me in doing this? I'd really appreciate the help...

After hours of troubleshooting, I found 2 of the problems.

The first had to do with the Register Command. Note that all instances of InsertMyLinkItem need to be changed to myLink as demonstrated below.

FCKCommands.RegisterCommand('myLink',
new FCKDialogCommand('Link to an Internal Page', 'Link to an Internal Page',
FCKConfig.PluginsPath+"myLink/fck_myLink.html",
400,400));
var omyLink = new FCKToolbarButton( "myLink", "insert/edit a link" ) ;
omyLink.IconPath = FCKConfig.PluginsPath + 'myLink/link.gif' ;
FCKToolbarItems.RegisterItem( 'myLink', omyLink ) ;

The other issue I found is that the showFiles function was not being called so I moved it to the fck_myLink.html page.

Now, the window pops open and hits the database to show all the possible links. The functionality works well (e.g., when I click a link the window closes the 2nd window with all of the links and drops the anchor code into the URL box. However, the URL is incorrect - it is showing the URL to the files.php page rather than the URL "content.php?page=$name"

This is the anchor code in my files.php page

$sql = "SELECT name, auto_id, parent
            FROM nav_and_content
            ORDER BY name";
      
      $result = mysql_query($sql,$dbc);
      
      while($row = mysql_fetch_array($result, MYSQL_NUM)){
         $name = $row[0];
         $id = $row[1];
         $parent = $row[2];
   
         print("<a href=\"#\" onclick=\"window.parent.opener.SetUrl(this.href);window.parent.close();\">$name</a><br />");
      }   

I tried to replace this.href with content.php?page=$name, but it doesn't work. How does this anchor code need to be coded to make this happen?

Also, I would like to completely remove the Target, Upload, and Advanced tabs from the pop-up. How can I do this?

Thanks!