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

以下是tinymce网站的几个例子。

他们用额外的../../斜线解决了我遇到的问题。

绝对网址

tinymce.init({
    relative_urls: false
});

带有主机名的绝对URL。

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

相对网址

tinymce.init({
    relative_urls: true
});

网址相对于给定网页。

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

不要转换网址

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

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

Answer 2

我查看了http://simplicity.s462.sureserver.com/external_image_list_url.php页面。这里的内容有双正斜杠。似乎问题出现在给TinyMCE的列表中。

Answer 3

看起来你的PHP正在插入那些双斜线。我猜测$abspath最终为/而$directory最终为images/所以当你说

时

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

你正在添加已经存在的斜杠。您的第一步是检查PHP中$abspath，$directory和$file的值。

在您的示例中，所有图像都在一个目录中，并且就Web服务器而言，您知道该目录是/images的内容。所以，你可以省去一些麻烦，简单地说：

utf8_encode("/images/$file")

而不是做一堆路径操纵和粘贴。

TinyMCE为图片网址添加额外的斜杠

3 个答案: