Jump to content

Tiny_mce: Image uploading How To?


neliuz

Recommended Posts

Hey guys :)

 

I am following Bens video tutorial on building CMS!

Everything works just fine! btw awesome tutorial! easy to follow to!

 

The thing is.. i am working on a site for a customer!

The point with this site is that the customer should be able to update his site

with images and text himself!

 

And for that i have tiny_mce installed! (as in the video tutorial ).

But how do i upload images into tiny_mce?

Is there a way to upload images right from a desktop on the computer?

 

Thanks !

Link to comment
Share on other sites

Glad you found the tutorial useful. Yes, the fact that the tutorial doesn't cover how to upload images is probably it's biggest issue, and something I hope to be able to resolve in the future.

 

By default, no, TinyMCE doesn't come with functionality for image uploading. There are a couple ways you can handle this...

 

-- Purchase the "official" image upload plugin from TinyMCE directly: http://www.tinymce.com/enterprise/mcimagemanager.php (The advantage here is you can get support if you run into trouble with setting up the plugin, and the support docs are pretty good)

-- Another paid plugin ($14) that looks pretty good: http://www.binpress.com/app/tinymce-image-uploader--manager/23

-- Use a free plugin (search for "tinymce image upload") These two look promising: http://justboil.me/tinymce-images-plugin/ and http://visions4net.com/ibrowser.html

-- Build out something yourself (potentially tricky). In my mind, it isn't the file selection/upload that's the tricky part, the tricky part is getting it to integrate within the TinyMCE menu. You could always make the image upload functionality completely separate, and have users copy/paste the path to the image file into TinyMCE's image popup.

 

Hopefully that gets you started? Using an existing free/low cost plugin is probably the way to go here. This topic is definitely on my list of additions to the CMS series, though I'm pretty busy with other stuff for KillerSites and I may not be able to get to it soon.

Link to comment
Share on other sites

Hi Ben :)

 

Thanks for the fast reply! Appreciate it :)

Ehhmm... I tried the free version of justboil.me but the explanation... i dont understand a crap

of how to implement it in tinyMCE. There are som links to some code , but it does not tell you where

to paste it or if i have to make a new .php file and paste it there! It gotta be something i am missing.

Or maby i am stupid! :) hehe....

 

3. Activate jbimages plugin and add jbimages button in TinyMCE. Don’t forget to set theme:advanced and realtive_urls:false.

 

I am able to locate the folder themes/advanced but cant find the realtive_urls:false.

 

And GD2 Library? Is that an extension as well ? Or is it in tinyMCS?

 

Thanks Ben

 

Best regards

Link to comment
Share on other sites

3. Activate jbimages plugin and add jbimages button in TinyMCE. Don’t forget to set theme:advanced and realtive_urls:false.

They are talking about the options used when initializing the TinyMCE textarea.

 

For example:

 

<script type="text/javascript">
tinyMCE.init({
       mode : "textareas",
       theme : "advanced",
       plugins : "emotions,spellchecker,advhr,insertdatetime,preview", 

       // Theme options - button# indicated the row# only
       theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,fontselect,fontsizeselect,formatselect",
       theme_advanced_buttons2 : "cut,copy,paste,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,|,code,preview,|,forecolor,backcolor",
       theme_advanced_buttons3 : "insertdate,inserttime,|,spellchecker,advhr,,removeformat,|,sub,sup,|,charmap,emotions",      
       theme_advanced_toolbar_location : "top",
       theme_advanced_toolbar_align : "left",
       theme_advanced_statusbar_location : "bottom",
       theme_advanced_resizing : true
});
</script>

from http://www.tinymce.com/wiki.php/%22For_Dummies%22

 

Note the "theme : "advanced"" in the above code? You need to make sure that wherever you want to use this image uploading plugin, you are using "theme: "advanced"" rather than any of the other options ("simple" for example). I'm quite sure that you are already using "theme: "advanced"" (or, if you followed my CMS tutorial you did.)

 

When the plugin talks about relative_urls:false, they again are talking about an option that you set when you initialize TinyMCE. See http://www.tinymce.com/wiki.php/Configuration:relative_urls for more.

 

The GD2 Library is an image manipulation library that works with PHP. For more, do a Google search. Assuming you are running WAMP, I believe you should be fine. I would hope that most hosts (linux based hosts at least) would support this. You can probably safely ignore this for now, and post back if you are seeing actual error messages telling you that GD2 isn't installed.

Link to comment
Share on other sites

  • 2 months later...

@ Ben & neliuz,

 

Did your get the JBimages plugin working? No matter what i try with the config.php file I always get the plugin telling me "The upload path does not appear to be valid." Here are my tinymce settings =

<script type="text/javascript">
tinyMCE.init({
       // General options
       mode : "none",

       theme : "advanced",

       plugins : "style,table,advimage,advlink,inlinepopups,media,contextmenu,paste,fullscreen,noneditable,visualchars,xhtmlxtras,vimeo,jbimages,spellchecker,insertdatetime,youtube",
       width : "913",
       height : "300",

       // Theme options
       // Style, image and video
       theme_advanced_buttons1 : "youtube,vimeo,jbimages,styleselect,formatselect,fontselect,fontsizeselect,spellchecker,forecolor,|,code,preview,fullscreenbullist,numlist,|,outdent,indent,undo,redo,|,link,unlink,anchor,charmap,",
       // This is text aspects
       theme_advanced_buttons2 : "justifyleft,justifycenter,justifyright,justifyfull,|,,bold,italic,underline,strikethrough,insertdate,paste",
       theme_advanced_buttons3 : "",
       theme_advanced_buttons4 : "",

       theme_advanced_toolbar_location : "top",
       theme_advanced_toolbar_align : "center",
       theme_advanced_statusbar_location : "bottom",
       theme_advanced_resizing : false,
       relative_urls:false,

       // Skin options
       skin : "cirkuit",

       // Example content CSS (should be your site CSS)
       content_css : "<?php echo SITE_CSS; ?>, <?php echo APP_RESOURCES; ?>css/tiny_mce_style.css"
});
setTimeout(function() {tinyMCE.execCommand('mceAddControl', false, 'field');}, 0);

</script>

 

and this is my settings for the path in config.php (within the plugin)

 

$config['img_path'] = '/resources/images';

 

Let me know your thoughts and if anyone has got this working.

 

Kind Regards

Link to comment
Share on other sites

  • 5 weeks later...

@CLU

 

Did you get this plugin to work on your CMS ?

 

The config.php file is located inside plugins of jbimages?

 

neliuz

 

@neliuz

 

Yea got it sorted, the issue was within the config file. As i was/am using MAMP on my mac within my HTdocs folder i had another folder (With the cms and site within) From this i never added the folder name to the path within the plugins config file... So it stated the path was wrong.

 

All you have to do is create a fold (I called mine upload) and place it on the front end of your site... Type in its relative path... so mine was /images/uploaded_images (No trailing slash) and hey presto it worked.

 

Hope this helps bud.

Link to comment
Share on other sites

@CLU

 

Thanks man , will try!

 

Did you have to edit anything else besides what you just wright?

 

My problem is that i dont have that justboilme button on my tiny_mce editor.

 

All i did so far is making a folder called upload in the htdocs folder inside my site folder along with the app folder resources etc...

I have changed the url inside config.php file in jbimages folder witch is located inside tiny_mce plugins folder.

 

Other than that i DONT know what to do :(

 

Please Help CLU

 

Appreciate your help alot!

 

Just cant find any solution on the net or a in depth tutorial on how to do it!

 

neliuz

Link to comment
Share on other sites

  • 2 years later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...