oEDIT + TinyMCE...?

Questions about how to use the online - editors and suggestions how to improve them
Post Reply
Posts: 90
Joined: Sun Jan 18, 2009 3:37 pm

oEDIT + TinyMCE...?

Post by kweku » Wed Mar 18, 2009 3:06 am


i use tinymce which i find to be the best solution for me. although oEDIT is a very basic editor it does have two excellent features that no one in the tinymce community have considered to do. The features are the ' iilink ' and ' iimage ' list menus at the top of the editor, the allow you to swiftly add images or link content to another internal page.

from a user point of view this is the slickest thing i have seen so far, i have tried fckeditor and tinymce and although they both have this functionality ( in the form of 3rd party plugins ) they are all quite clumsy in comparison to oEDIT's structuring of simple linking.

the question!

is it possible to integrate oEDITs internal and image linking funtion into tinymce? i have included a visual example that will hopefuly clarify things. [ external image ]

i await your replies :)

Posts: 346
Joined: Thu Oct 23, 2008 11:57 am

Re: oEDIT + TinyMCE...?

Post by Martin » Wed Mar 18, 2009 6:37 pm

Hi kweku,

aahh, another one using my favourite js-editor! I guess you are using Klaus Teichler's TinyMCE script that can be downloaded from the wiki. In fact I don't really know it, but it should be easy to integrate one of this two solutions for the internal (image) links.

In the old forum you can find an integration code that adds the two select boxes for images and internal links.

I found another solution that passes the image and internal link lists to the TinyMCE plugins advimg and advlink (I think they are integrated by default). So they are one click further away but you can manage the internal links with the ease of TinyMCE.
[ external image ][ external image ]
This one needs three files. The tinymce.php, of course, placed in the folder cmsimple. Here is the code:

Code: Select all

if(!$cf['tinymce']['folder']) {

function get_the_links($h, $u, $l,$sn,$downloads_path){
        for($i = 0; $i < count($h); $i++){
            $spacer = '';
                if($l[$i] > 1){
                    $spacer = str_repeat('&nbsp;&nbsp;&nbsp;', $l[$i]-1);
                $list.='["'.$spacer.substr(str_replace('"','"',$h[$i]),0,30).'", "'.$sn.'?'.$u[$i].'"],';
        $list .= '["DOWNLOADS:",""],';
        $fs = sortdir($downloads_path);
        foreach($fs as $p){
                $list .= '["&nbsp;&nbsp;'.substr($p,0,25).' ('.(round((filesize($downloads_path.'/'.$p))/102.4)/10).' KB)", "'.$sn.'?download='.$p.'"],';
        $list = substr($list, 0,-1);

function get_the_images($directory) {
    $files = array();
    $handle = opendir($directory);
    $i = 0;
    while(($file = readdir($handle))){
         if(eregi("(\.jpg$|\.gif$|\.png$|\.jpeg$)",$file)) {
                  $files[$i]['name'] = $file;
                 $files[$i]['path'] = $directory. "" .$file;
    $list = '';
    foreach($files as $i) {
        $list .='["'. ($i['name']). '", "'.($i['path']) . '"],';
    $list = substr($list, 0, -1);

$hjs .='
<script language="javascript" type="text/javascript" src="'.$pth['folder']['base'].$cf['tinymce']['folder'].'/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">';
$hjs .= '
var MyImageList = new Array('.get_the_images($pth['folder']['images']).');
var MyLinkList = new Array('.get_the_links($h, $u, $l,$sn,$pth['folder']['downloads']).');

    mode: "textareas",
    theme: "advanced",
    language: "'.$sl.'",
    elements : "ctrl_text",
    plugins : "safari,style,table,save,advimage,advlink,media,searchreplace,contextmenu,paste,nonbreaking,xhtmlxtras",
    theme_advanced_buttons1 : "undo, redo,|, "
    theme_advanced_buttons2 : "save,|,formatselect,|,image,media,|,link, unlink,  anchor,|,bold,italic,underline,|,styleselect,|,cleanup,code",
    theme_advanced_buttons3 : "cite,abbr,acronym,del,ins,attribs,|, cut,copy,paste,pasteword,|,hr,media,styleprops,|,sub,sup,nonbreaking,|,forecolor,backcolor,|,",
    theme_advanced_blockformats : "h1,h2,h3,p,h4,h5,h6",
    relative_urls : true,   
       theme_advanced_toolbar_location : "top",
       theme_advanced_toolbar_align : "left",
       theme_advanced_statusbar_location : "bottom",
     external_image_list_url : "'.$pth['folder']['base'].$cf['tinymce']['folder'].'/cmsimple_image_list.js",
     external_link_list_url : "'.$pth['folder']['base'].$cf['tinymce']['folder'].'/cmsimple_link_list.js",
       advlink_styles : "",
       advimage_styles : "leftInset=left;rightInset=right",
    content_css: "'.$sn.'cmsimple/tinymce.css, '.$sn.'?&stylesheet",
    inline_styles : true,
      visual : true,
      verify_css_classes: false,
      verify_html: false,
      trim_span_elements: true,
       theme_advanced_resizing : true,
      valid_elements: "*[*]"
$o .= "\n".'<form method="post" id="ta" action="'.$sn.'">'."\n\t".tag('input type="hidden" name="selected" value="'.$u[$s].'"')."\n\t".tag('input type="hidden" name="function" value="save"')."\n\t".'<textarea name="text" id="text" rows="40" cols="80">'."\n".$c[$s]."\n\t".'</textarea>'."\n".'</form>';
Within the tinyMCE.init you see the two lines

Code: Select all

external_image_list_url : "'.$pth['folder']['base'].$cf['tinymce']['folder'].'/cmsimple_image_list.js",
external_link_list_url : "'.$pth['folder']['base'].$cf['tinymce']['folder'].'/cmsimple_link_list.js", 
and those files have to be put into the tiny_mce folder. Their code is rather short. cmsimple_link_list.js:

Code: Select all

var tinyMCELinkList = opener.parent.MyLinkList;

Code: Select all

var tinyMCEImageList = opener.MyImageList;
Hope it works!


Posts: 90
Joined: Sun Jan 18, 2009 3:37 pm

Re: oEDIT + TinyMCE...?

Post by kweku » Thu Mar 19, 2009 2:09 pm

thanks greatly Martin,

i really appreciate your reply. i will spend sleepless nights integrating this!

Post Reply