AJAX Image/File Manager for TinyMCE: Images Not Showing

Hi guys. I just integrated the Ajax Image/File manager with TinyMCE from PHPletter.com for a website I am building for my church.

I am able to upload local content to the server. Images are displayed within the TinyMCE editor, and the upload folder on my server is populated accordingly.

However, The uploaded images will not display on my php or html pages. Again, everything else works seamlessly. I can even create new folders for my images with Ajax Image/File Manager interface. The images will just not show up on my PHP pages. When I refresh the pages, I can quickly (for a fraction of a second) see placeholder of the images.

I am using a custom PHP CMS that I have been building following different tutorials. This doesn’t seem to be the issue, as everything such as text changes, emoticons, and whatnots are easily edited and displayed without any issues. I can even use web image URLs and these images display just fine.

Can any boy guide me as to what I am doing wrong?

Here’s my integration code.

[code] tinyMCE.init({
mode : “exact”,
elements : “ajaxfilemanager”,
theme : “advanced”,
skin : “o2k7”,
plugins : “advimage,advlink,media,contextmenu”,
theme_advanced_buttons1_add_before : “newdocument,separator”,
theme_advanced_buttons1_add : “fontselect,fontsizeselect”,
theme_advanced_buttons2_add : “separator,forecolor,backcolor,liststyle”,
theme_advanced_buttons2_add_before: “cut,copy,separator,”,
theme_advanced_buttons3_add_before : “”,
theme_advanced_buttons3_add : “media”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
extended_valid_elements : “hr[class|width|size|noshade]”,
file_browser_callback : “ajaxfilemanager”,
paste_use_dialog : false,
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : true,
apply_source_formatting : true,
force_br_newlines : true,
force_p_newlines : false,
relative_urls : true
});

	function ajaxfilemanager(field_name, url, type, win) {
		var ajaxfilemanagerurl = "../../../../jscripts/tiny_mce/plugins/ajaxfilemanager/ajaxfilemanager.php";
		var view = 'detail';
		switch (type) {
			case "image":
			view = 'thumbnail';
				break;
			case "media":
				break;
			case "flash": 
				break;
			case "file":
				break;
			default:
				return false;
		}
        tinyMCE.activeEditor.windowManager.open({
            url: "../../../../jscripts/tiny_mce/plugins/ajaxfilemanager/ajaxfilemanager.php?view=" + view,
            width: 400,
            height: 350,
            inline : "yes",
            close_previous : "no"
        },{
            window : win,
            input : field_name
        });

/* return false;
var fileBrowserWindow = new Array();
fileBrowserWindow[“file”] = ajaxfilemanagerurl;
fileBrowserWindow[“title”] = “Ajax File Manager”;
fileBrowserWindow[“width”] = “782”;
fileBrowserWindow[“height”] = “440”;
fileBrowserWindow[“close_previous”] = “no”;
tinyMCE.openWindow(fileBrowserWindow, {
window : win,
input : field_name,
resizable : “yes”,
inline : “yes”,
editor_id : tinyMCE.getWindowArg(“editor_id”)
});

		return false;*/
	}

[/code]

Here’s my HTML page. The above is included as external javascript file:

<!--START WYSIWYG EDITOR -->
<!-- TinyMCE -->
<script type="text/javascript" src="tinyMCEeditor/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript" src="tinyMCEeditor/jscripts/general.js"></script>
<script type="text/javascript" src="_integrate_tinymce02.js"></script>

<?php 
include ('includes/functions.php');
$post = getPost($_GET['id']); //get single post to edit
?>

<form action="doEditPost.php" method="post">
<table cellpadding="5">
	<tr>
		<td> <label for="postTitle">Title</label></td>
        <td> <input type="text" name="postTitle" value="<?php echo $post['title'];?>" ></td>
	</tr>
    
    <tr>
		<td> <label for="postAuthor">Author</label></td>
        <td> <input type="text" name="postAuthor" value="<?php echo $post['author'];?>" ></td>
	</tr>
</table>

<p>&nbsp;</p>
<table>    
    <tr>
		<td valign="top"> <label for="postContent">Content</label></td>
        
        
        <td><textarea id="ajaxfilemanager" name="postContent" cols="40" rows="15"><?php echo $post['body_text'];?></textarea></td>
	</tr>
</table>

<p>&nbsp;</p>
<table>    
     <tr>
		<td> <label for="postContent">Button</label></td>
        <td> <input type="text" name="postLinkLabel" value="<?php echo $post['linklabel'];?>" ></td>
	</tr>
    
    <tr>
		<td>&nbsp;</td>
		<td align="center"><input name="submit" type="submit" value="Send"></td>
      
	</tr>
   </table> 
    <tr>
		<td align="center"><input type="hidden" name="id" value="<?php echo $_GET['id'];?>"></td>
      
	</tr>
    
    <tr>
    	<td> <?php echo '<br>Go Back to <a href="posts.php">Posts</a>';?></td>
    </tr>

</table>

</form>
</div>

</body>


</html>


Thanks in advance for your help!

I suppossed that file that open TinyMCE is not at the same directory as html,
try to not use relative url at TinyMCE.

     relative_urls : false

[php]
tinyMCE.init({
mode : “exact”,
elements : “ajaxfilemanager”,
theme : “advanced”,
skin : “o2k7”,
plugins : “advimage,advlink,media,contextmenu”,
theme_advanced_buttons1_add_before : “newdocument,separator”,
theme_advanced_buttons1_add : “fontselect,fontsizeselect”,
theme_advanced_buttons2_add : “separator,forecolor,backcolor,liststyle”,
theme_advanced_buttons2_add_before: “cut,copy,separator,”,
theme_advanced_buttons3_add_before : “”,
theme_advanced_buttons3_add : “media”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
extended_valid_elements : “hr[class|width|size|noshade]”,
file_browser_callback : “ajaxfilemanager”,
paste_use_dialog : false,
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : true,
apply_source_formatting : true,
force_br_newlines : true,
force_p_newlines : false,
relative_urls : false
});[/php]

Thanks for your help, kikesv.

Actually, I solved the issue by modifying the root path within the config.base.php file in the ajaxfilemanager folder.

This is what I had:
define(‘CONFIG_SYS_DEFAULT_PATH’, ‘…/…/…/…/images/uploaded/’); //accept relative path only
define(‘CONFIG_SYS_ROOT_PATH’, ‘…/…/…/…/images/uploaded/’); //accept relative path only

And This what I changed it to:
define(‘CONFIG_SYS_DEFAULT_PATH’, ‘…/…/…/…/…/…/images/uploaded/’); //accept relative path only
define(‘CONFIG_SYS_ROOT_PATH’, '…/…/…/…/…/…/images/uploaded/’); //accept relative path only

Sponsor our Newsletter | Privacy Policy | Terms of Service