Jump to content
Sign in to follow this  
mmendo

Anyone use tinymcpuk?

Recommended Posts

Hello,

 

I'm trying to add tinymcpuk to my product description in order to edit the text and insert/upload images within the description. I've managed to get it installed and the WYSIWYG editor works, but when I click on the insert image button, the standard image insert pop-up opens (the one that asks for a URL, not the tinymcpuk pop-up that should allow me to browse images or upload new.) Has anyone else used this? Any idea what I'm doing wrong?

 

Thanks.

Share this post


Link to post
Share on other sites

Here's more info . . .

 

Here is my code in admin/categories.php:

 

<script language="javascript" type="text/javascript" src="/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,jus
tifyright, justifyfull,bullist,numlist,undo,redo,link,unlink",
theme_advanced_buttons2 : "fontselect,fontsizeselect,forecolor,image",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|v
space|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade
],font[face|size|color|style],span[class|align|style]"
});
function fileBrowserCallBack(field_name, url, type, win) {
// due to mcpuk bug with firefox please tiny the absolute path to the connector, something like:
// var connector = "http://localhost/tinymcpuk/filemanager/browser.html?Connector=http://localhost/tinymcpuk/filemanager/connectors/php/connector.php";
var connector = "http://www.domainname/tiny_mce/filemanager/browser.html?Connector=connectors/php/connector.php";
var enableAutoTypeSelection = true;

var cType;
tinymcpuk_field = field_name;
tinymcpuk = win;

switch (type) {
	case "image":
		cType = "Image";
		break;
	case "flash":
		cType = "Flash";
		break;
	case "file":
		cType = "File";
		break;
}

if (enableAutoTypeSelection && cType) {
	connector += "&Type=" + cType;
}

window.open(connector, "tinymcpuk", "modal,width=600,height=400");
}

</script>

 

I know I should also have a plug-ins line of code, but when I add that line the text editor does not work at all. Maybe that's the problem?? Any help is much appreciated!

Thanks.

Share this post


Link to post
Share on other sites

I have figured out how to install this so here are the instructions. It is rather easy.

 

File Downloads:

TinyMCPUK http://p4a.crealabsfoundation.org/tinymcpuk - TinyMCE + Image/File Manager

 

TinyMCE http://tinymce.moxiecode.com/download.php - Latest Version

 

Note: Since p4a didn't modify the TinyMCE files you can use the latest version of TinyMCE with the package from p4a.

 

TinyMCPUK Install Instructions

  1. Upload the contents of the TinyMCPUK download from p4a to ../admin/includes/javascript/tiny_mce/ on your web server
    Your Directory structure should look like this after uploading the package:
    ../admin/includes/javascript/tiny_mce/filemanager
    ../admin/includes/javascript/tiny_mce/imagemanager
    ../admin/includes/javascript/tiny_mce/langs
    ../admin/includes/javascript/tiny_mce/plugins
    ../admin/includes/javascript/tiny_mce/themes
    ../admin/includes/javascript/tiny_mce/utils
     
    NOTE: If you already have the newest version of TinyMCE installed then you only need to upload the filemanager and imagemanager directories
     
     
  2. Create your User File Directories: File, Image, Media, Flash (and chmod all to 777)
    For example I create in the root directory of my website the following directories:
    /assets/File
    /assets/Image
    /assets/Media
    /assets/Flash
    So the fully qualified url, for example, would look like http://www.website.com/assets/Image
     
     
  3. EDIT this file ..\imagemanager\config.inc.php
    FIND AROUND LINE 18:
        $IMConfig['base_dir'] = $_SERVER['DOCUMENT_ROOT'] . '/UserFiles/Image';
    CHANGE IT TO:
        $IMConfig['base_dir'] = $_SERVER['DOCUMENT_ROOT'] . '/assets/';
    -----
    FIND AROUND LINE 28:
        $IMConfig['base_url'] = 'http://' . $_SERVER['SERVER_NAME']  . '/UserFiles/Image';
    CHANGE IT TO:
        $IMConfig['base_url'] = 'http://' . $_SERVER['SERVER_NAME']  . '/assets/';


     

  4. EDIT this file ..\filemanager\connectors\php\config.php
    FIND AROUND LINE 46:
        $fckphp_config['UserFilesPath'] = "/UserFiles" ;
    CHANGE IT TO:
       $fckphp_config['UserFilesPath'] = "/assets" ;


     
     

  5. Edit /admin/includes/header.php and insert the following lines before the <table> tag.
    <script language="javascript" type="text/javascript" src="includes/javascript/tiny_mce/tiny_mce.js"></script>
    <script language="javascript" type="text/javascript">
    tinyMCE.init({
       mode : "textareas",
       theme : "advanced",
       plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,z
    oom,flash,searchreplace,print,paste,directionality,fullscreen,noneditable,context
    menu",
       theme_advanced_buttons1_add_before : "save,newdocument,separator",
       theme_advanced_buttons1_add : "fontselect,fontsizeselect",
       theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor,
    liststyle",
       theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
       theme_advanced_buttons3_add_before : "tablecontrols,separator",
       theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print,separator,ltr,rtl,separator,fu
    llscreen",
       theme_advanced_toolbar_location : "top",
       theme_advanced_toolbar_align : "left",
       theme_advanced_statusbar_location : "bottom",
       plugin_insertdate_dateFormat : "%Y-%m-%d",
       plugin_insertdate_timeFormat : "%H:%M:%S",
       extended_valid_elements : "hr[class|width|size|noshade]",
       file_browser_callback : "fileBrowserCallBack",
       paste_use_dialog : false,
       theme_advanced_resizing : true,
       theme_advanced_resize_horizontal : false,
       theme_advanced_link_targets : "_something=My somthing;_something2=My somthing2;_something3=My somthing3;",
       apply_source_formatting : true
    });
    
    function fileBrowserCallBack(field_name, url, type, win) {
       var connector = "../../filemanager/browser.html?Connector=connectors/php/connector.php";
       var enableAutoTypeSelection = true;
    
       var cType;
       tinymcpuk_field = field_name;
       tinymcpuk = win;
    
       switch (type) {
       case "image":
           cType = "Image";
           break;
       case "flash":
           cType = "Flash";
           break;
       case "file":
           cType = "File";
           break;
       }
    
       if (enableAutoTypeSelection && cType) {
           connector += "&Type=" + cType;
       }
    
       window.open(connector, "tinymcpuk", "modal,width=600,height=400");
    }
    </script>


Hope this helps someone. That's it you are finished.

Edited by studio-owens

Share this post


Link to post
Share on other sites

Thanks for your helpful reply! (I am sorry for the delay, I've been away from the project)

 

I have everything uploaded. However, now when I browse for an image to upload and attempt to upload it, it says Internal Error. When I try to add a new folder, I get the message that I do not have permissions to alter this folder. I followed all instructions to set permissions to 777. Moreover, if I manually add an image to the assets/image/ folder, it does not appear either, which make me think the editor is not pointing the correct folder. Any ideas?

 

Thanks,

Nicole

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×