TinyMce has several configuration options that are not currently used in the plugin for MODx. One interesting one is
external_link_list_url. This can be used to insert a dropdown list of links (see attached example image) by declaring a javascript file like so:
external_link_list_url : "/listoflinks.js",
Usually this is a hardcoded list of links as in the example of the tinyMce documentation:
var tinyMCELinkList = new Array(
// Name, URL
["Moxiecode", "http://www.moxiecode.com"],
["Freshmeat", "http://www.freshmeat.com"],
["Sourceforge", "http://www.sourceforge.com"]
);
However it is perfectly fine to set
external_link_list_url to a *.html (or php or whatever) file instead of a *.js file as long as the content is legal javascript. This makes it possible to dynamically generate a list of links. As an example I’ll explain how to set
external_link_list_url to a MODx document with a simple snippet, but it could also be done using any other script (for instance using the new index-ajax.php).
1. For this to work, in System Configuration, you’ll need to set TinyMCE’s Theme to ’Full Featured’
2. Create a new snippet (call it tinyMceLinks for instance) and paste the following (without the php tags, but you knew that already...)
<?php
$allpages = $modx->getActiveChildren();
foreach($allpages as $page){
$caption = ($page['pagetitle'])?$page['pagetitle']:$page['menutitle'];
$list .=($list!='')?",\n":"\n";
$list.= "[\"".$caption."\", \"[\"+\"~".$page['id']."~\"+\"]\"]";
}
$output = "var tinyMCELinkList = new Array(\n". $list .");";
return $output;
?> If this doesn’t exist yet create blank template with only the [*content*] tag. There should be nothing else in the template. We only want the javascript to appear.
4. Create a new page (I’ve used the alias "tinyLinksPage") and make sure it’s not in the menu! Place the [[tinyMceLinks]] snippet call In the content area and save..
5. Now you’ll need to add the
external_link_list_url setting to the TimyMCE configuration. You’ll have to edit the TinyMCE plugin for this. Find the
getTinyMCEScript function and insert the extra setting in the $fullScript variable (at line 228 or there abouts). See below - I’ve only copied the $fullScript bit...
<?php
$fullScript = <<<FULL_SCRIPT
<script language="javascript" type="text/javascript" src="{$base_url}assets/plugins/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode : "exact",
relative_urls : {$relative_urls},
{$document_base_url}
remove_script_host : {$remove_script_host},
language : "{$tinymce_language}",
$elmList
$webWidth
$webHeight
plugins : "style,layer,table,advhr,advimage,advlink,emotions,insertdatetime,preview,flash,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable",
//don't copy the comments :) but here it goes
external_link_list_url : "/tinyLinksPage.html",
//replace /tinyLinksPage.html with whatever page you've created
theme_advanced_buttons1_add_before : "save,newdocument,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,separator,forecolor,backcolor",
theme_advanced_buttons2_add_before: "cut,copy,paste,separator,search,replace,separator,pastetext,pasteword,selectall,separator",
theme_advanced_buttons3_add_before: "tablecontrols,separator",
theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
$cssPath
$cssSelector
preformatted : true,
onchange_callback : "tvOnTinyMCEChangeCallBack",
resource_browser_path : "{$base_url}manager/media/browser/mcpuk/browser.html?Connector={$base_url}manager/media/browser/mcpuk/connectors/php/connector.php&ServerPath={$base_url}",
$fileBrowserCallback
});
function fileBrowserCallBack(field_name, url, type, win) {
// This is where you insert your custom filebrowser logic
var win=tinyMCE.getWindowArg("window");
win.BrowseServer(field_name);
}
function tvOnTinyMCEChangeCallBack(i){
i.oldTargetElement.onchange();
}
</script>
FULL_SCRIPT;
?>
This example should give you a list of top level links in TinyMCE’s link dialog and when selected this will insert the page url in the proper [~id~] format. Way easier to explain to the average CMS use dont you agree?’ Off course you can make it a lot fancier, but I leave that to you to work out
MODX Staff
The next release is going to ship with TIny and I think this definitely makes the cut. Great work.
