CODEWITHSUNDEEP
phphtmltinymce
user588393
user588393

Reputation: 101

TinyMCE adding extra slashes to image url

I am testing out the tinyMCE on a new website I am building for a client.

Here is the test page for the editor...

http://simplicity.s462.sureserver.com/editor.php

The problem I'm having is when I do an image insert and choose one of the images tinyMCE adds an extra slash to the image url. As a result, the image is not found. When I manually remove the extra slashes, the image is found.

How do I prevent tinyMCE from adding these extra slashes? I'm sure there is a simple answer, but I've been searching for hours and am having no luck finding the answer. What am I doing wrong??

Here is the PHP code that used to populate the image list:

<?php // this must be the very first line in your PHP file! 

// You can't simply echo everything right away because we need to set some headers first! 
$output = ''; // Here we buffer the JavaScript code we want to send to the browser. 
$delimiter = ""; // for eye candy... code gets new lines 

$output .= 'var tinyMCEImageList = new Array('; 

$directory = "../../images"; // Use your correct (relative!) path here 

// Since TinyMCE3.x you need absolute image paths in the list... 
$abspath = preg_replace('~^/?(.*)/[^/]+$~', '/$1', $_SERVER['SCRIPT_NAME']); 

if (is_dir($directory)) { 
    $direc = opendir($directory); 

    while ($file = readdir($direc)) { 
        if (preg_match('~^.~', $file)) { // no hidden files / directories here... 
             if (is_file("$directory/$file") && getimagesize("$directory/$file") != FALSE) { 
                // We got ourselves a file! Make an array entry: 
                $output .= $delimiter 
                    . '["' 
                    . utf8_encode($file) 
                    . '", "' 
                    . utf8_encode("$abspath/$directory/$file") 
                    . '"],'; 

            } 
        } 
    } 

    $output = substr($output, 0, -1); // remove last comma from array item list (breaks some browsers) 
    $output .= $delimiter; 

    closedir($direc); 
} 
else
{
    echo "false";
}

// Finish code: end of array definition. Now we have the JavaScript code ready! 
$output .= ');'; 

// Make output a real JavaScript file! 
header('Content-type: text/javascript'); // browser will now recognize the file as a valid JS file 

// prevent browser from caching 
header('pragma: no-cache'); 
header('expires: 0'); // i.e. contents have already expired 

// Now we can send data to the browser because all headers have been set! 
echo $output; 

?>

Here are the settings for TinyMCE:

        // General options 
    mode : "textareas", 
    theme : "advanced", 
    plugins : "spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", 

    // Theme options 
    theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect", 
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", 
    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", 
    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage", 
    theme_advanced_toolbar_location : "top", 
    theme_advanced_toolbar_align : "left", 
    theme_advanced_statusbar_location : "bottom", 
    theme_advanced_resizing : true, 
    relative_urls : false,
    convert_urls : false,


    // Example content CSS (should be your site CSS) 
    content_css : "css/example.css", 

    // Drop lists for link/image/media/template dialogs 
    template_external_list_url : "js/template_list.js", 
    external_link_list_url : "js/link_list.js", 
    external_image_list_url : "external_image_list_url.php", 
    media_external_list_url : "js/media_list.js",

Thanks for your help!!

Upvotes: 7

Views: 6307

Answers (3)

Aaron
Aaron

Reputation: 1052

Here are several examples from the tinymce website.

They fixed the problem I was having with extra ../../ slashes.

Absolute URL's

tinymce.init({
    relative_urls: false
});

Absolute URL's with the host name.

tinymce.init({
    relative_urls: false,
    remove_script_host: false
});

Relative URL's

tinymce.init({
    relative_urls: true
});

URL's relative to a given page.

tinymce.init({
    selector: '#relurlstopage',
    relative_urls: true,
    document_base_url: 'http://www.tinymce.com/tryit/'
});

Do not convert URL's 

tinymce.init({
    plugins: 'link image code',
    convert_urls: false
});

Source: http://www.tinymce.com/tryit/url_conversion.php

Upvotes: 11

mu is too short
mu is too short

Reputation: 434685

It looks like your PHP is inserting those double slashes. I'm guessing that $abspath ends up being / and $directory ends up being images/ so when you say

utf8_encode("$abspath/$directory/$file")

you're adding slashes that are already there. Your first step would be to inspect the values of $abspath, $directory, and $file inside your PHP.

In your example, all the images are in one directory and you know what that that directory is /images as far as the web server is concerned. So, you could save yourself some trouble and simply say:

utf8_encode("/images/$file")

rather than doing a bunch of path manipulating and pasting.

Upvotes: 1

Rob Dawson
Rob Dawson

Reputation: 1347

I had a look at the http://simplicity.s462.sureserver.com/external_image_list_url.php page. The content here had double forward slashes. It seems that the problem is in the list that is given to TinyMCE.

Upvotes: 1

Related Questions