TinyMCE爲圖片添加額外的斜槓url

Question

我正在爲我的客戶端構建的新網站上測試出這個tinyMCE。

下面是編輯器的測試頁...

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

我遇到的問題是，當我做一個圖像插入並選擇圖像的一個TinyMCE的增加了額外的斜線的圖片網址。結果，找不到圖像。當我手動刪除額外的斜槓時，圖像被找到。

如何防止tinyMCE添加這些額外的斜線？我確信有一個簡單的答案，但我一直在尋找幾個小時，並沒有找到答案的運氣。我究竟做錯了什麼？？

這裏是用來填充圖像列表的PHP代碼：

<?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; 

?> 

下面是設置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", 

感謝您的幫助！

Answer 1

我看了http://simplicity.s462.sureserver.com/external_image_list_url.php頁面。這裏的內容有雙正斜槓。看來問題出現在TinyMCE的列表中。

Answer 2

它看起來像你的PHP插入那些雙斜槓。我猜$abspath最終被/和$directory最終被images/所以當你說

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

你補充說，已經有斜槓。您的第一步將檢查您的PHP內部的$abspath,$directory和$file的值。

在你的例子中，所有的圖像都在一個目錄中，你知道那個目錄是/images，就Web服務器而言。所以，你可以節省一些麻煩，簡單地說：

utf8_encode("/images/$file") 

而不是做一堆路徑操作和粘貼。

Answer 3

以下是來自tinymce網站的幾個例子。

他們解決了我用額外的../../斜槓所遇到的問題。

絕對URL的

tinymce.init({ 
    relative_urls: false 
}); 

絕對URL與主機名。

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

相對URL的

tinymce.init({ 
    relative_urls: true 
}); 

的URL相對於給定的頁面。

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

不要轉換URL的

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

來源：http://www.tinymce.com/tryit/url_conversion.php