Uploading and editing images in TinyMCE

Watch this

You can see it better if you download the mp4.  This is a demo of Moxicode's MCImageManager plugin for their TinyMCE editor integrated into D 7.0.4.  Who better to provide an image uploader for TinyMCE, than the people that created TinyMCE.  I have this installed on my site, and MCImageManager is by far, the most intuitive, and easiest to use that I have seen.  This plugin allows you to upload images to the server from within tinymce when inserting an image.  The plugin also allows you to create directories on the server to help keep your images organized.  Once the image are uploaded to the server, you can resize, crop, flip, or rotate the images.... and save it under a different name if you want to.

WOW! Thanks!

I almost did something I would have regretted!

How much trouble is it to install>?

So easy, a caveman could do it.

Yeah, this is great possibility to make your TinyMCE more universal, and it safe too

AMAZING

A caveman invented the wheel, I just use the wheel to steal cars. How about a step by step?

HL, download my mod and take a look at the config file - it uses the cookie to determine the user and set a custom folder for each user - you should be able to adapt it for the TinyMCE Image Manager too.

http://www.boonex.com/unity/extensions/entry/DeeEmm_Dolphin_7_x_x_TinyMCE_Media_Browser_2010_05_17

It's pretty much the same - it just has a smaller button ;)

/DM

Thanks DE, but this is already done.  Unlike TinyBrowser, and the rest of the image upload plugins for TinyMCE, the one by MoxieCode actually does everything in an intuitive manner.  Although the Tinybrowser plugin that your mod uses is free, the ergonomics of it is horrible.  (It's not just about the 'Browse' button.)

And..... the installation/integration is a LOT easier on the site owners part.

BTW DeeEmm... why are you here?  I remember reading your farewell letter.

I still occasionally lurk - and laugh. I Just cant be bothered to actively participate here any more. Nil involvement means that I don't get frustrated with the status quo.

Just thought you might be interested in the code to make a unique folder on a per-user basis, rather than have everyone dump their images in same location (privacy issues etc).

/DM

I don't think you read my second post.  What I have installed on my site does exactly that.  I said this was integrated into Dolphin. 

Pay attention!

LOL. My Bad.

The sooner you admit that you never left, the sooner people will forget you ever said it. How do I know? I too, quit a short while back probably for a lot of the same reasons. You need Dolphin, get over it and lets get back to work.

Another cool thing about MCImageManager, is that although it is designed to work as a TinyMCE plugin, it does not require TinyMCE to work.  With this plugin integrated into Dolphin, it can be accessed directly, as well as from within TinyMCE.  I have tested this by creating a block on the account page, that simply iframes the image manager.  This gives users a way to manage their posting photos without having to launch TinyMCE.

alright houston, I think I am in need of your help here.

You sold me on the video, after failing with deeEm's free image manager mod (noticing it was for 7.0.2), i gave this a shot and dropped my 42 bones on it over paypal.

got the plugin installed, button shows up, but can you give me a cheat sheet on authenticating it with dolphin and to isolate the directories? I may or may not figure this out on my own in due time, so I appreciate any help you can provide in this area :)

I'm using an integration sold by AndrewP for $20...... I'm not sure if you can purchase it until Boonex un-suspends him.

Man that's just my luck, guess I should do more research before getting so trigger happy with the wallet next time!

I can't seem to pull anything up from him, I actually had no idea he was banned until you just mentioned it. Either way, thanks for the quick response!

I sent you a PM

Got what I needed, thanks again for the help HL!

I take it Andrey was able to help you out?  You may be interested in this:

http://www.boonex.com/unity/forums/topic/Adding-a-big-ole-ugly-browse-button-to-TinyMCE-with-MCImagemanager.htm

How I can use TinyMC

on comments like for profiles etc

Got it working, I added the imagemanager icon to the menu bar, but I like the idea of your big old ugly browse button too.. will be integrating that one this afternoon - thanks for pioneering this one for us.

UFO360: You can enable this option in your administration console. Settings -> Advanced Settings -> Other -> "Enable TinyMCE in comments"

Anyone know if this works with 7.0.6? 

 And does this work in orca forums or just blogs? I really need something for the forums so users can upload images. I bought the module, just waiting on andrewp to give me a shout back.

 And for 7.0.8 please?

This is interesting

Martin

I purchased the integration mod from AndrewP and, with some help from him, set it up.  I now notice that it appears to work every but the forum section.  Is this due to an installation error on my part... or a problem with using imagemanager within the Forum?

Thanks,

Paul

 Does it work on the Dolphin default Forum?  Under my installation, it works everywhere but the Forum :-(  

Read the thread closely, you missed a step

I read it twice... what is it that's obvious to you but not me?

 On your server, open modules\boonex\forum\layout\base\xsl\canvas_init.xsl for editing.

Add imagemanager to the list of plugins in two places.  Make the same edits to the corresponding file in the base_en folder

 EX:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">

<xsl:template name="canvas_init">

    <script type="text/javascript">

        <xsl:if test="'client' = /root/urls/xsl_mode">
            document.write = function (s) { };
        </xsl:if>

        tinyMCE_GZ.init({
        skin : "cirkuit",
            plugins : 'embed,imagemanager,table,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,searchreplace,xhtmlxtras,media',
            themes : 'advanced',
            languages : 'en',
            disk_cache : true,
            debug : false
        });       
       
    </script>

    <script language="javascript" type="text/javascript">
       
        function orcaSetupContent (id, body, doc) {    }
       
        tinyMCE.init({
        skin : "cirkuit",
            document_base_url : "<xsl:value-of select="/root/url_dolphin" />",
            entity_encoding : "raw",
            mode : "exact",
            elements : "tinyEditor",
            theme : "advanced",
            gecko_spellcheck : true,
            content_css : "<xsl:value-of select="/root/urls/css" />blank.css",

            remove_linebreaks : true,

            setupcontent_callback : "orcaSetupContent",

            plugins : "embed,imagemanager,table,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,searchreplace,xhtmlxtras,media",
            theme_advanced_buttons1_add : "fontsizeselect,separator,forecolor,backcolor",
            theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom",
            theme_advanced_buttons2_add_before: "cut,copy,paste,separator,search,replace,separator",
            theme_advanced_buttons3_add_before : "tablecontrols,separator",
            theme_advanced_buttons3_add : "emotions,embed,iespell,flash,separator,print",
            theme_advanced_disable : "charmap",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_path_location : "bottom",
            plugin_insertdate_dateFormat : "%Y-%m-%d",
            plugin_insertdate_timeFormat : "%H:%M:%S",
valid_elements : "*[*]",
            extended_valid_elements : "a[name|href|target|title|onclick],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|obj|param|embed],object[type|allowScriptAccess|allowNetworking|height|width|data],param[name|value|],embed[src|width|height|bgcolor|type|pluginspage|flashvars|scale|AllowScriptAccess|wmode]"
            });

    </script>

    <script language="javascript" type="text/javascript">           

        var urlXsl = '<xsl:value-of select="/root/urls/xsl" />';
        var urlImg = '<xsl:value-of select="/root/urls/img" />';
        var defTitle = "<xsl:value-of select="translate(/root/title,'&quot;','&#147;')" />";
        var isLoggedIn = '<xsl:value-of select="/root/logininfo/username" />'.length ? true : false;

        var xsl_mode = '<xsl:value-of select="/root/urls/xsl_mode" />';

        var f = new Forum ('<xsl:value-of select="base"/>', <xsl:value-of select="min_point"/>);       
        document.f = f;
        var orca_login = new Login ('<xsl:value-of select="base"/>', f);
        document.orca_login = orca_login;
        <xsl:if test="1 = /root/logininfo/admin">
            var orca_admin = new Admin ('<xsl:value-of select="base"/>', f);
            document.orca_admin = orca_admin;
        </xsl:if>
       
    </script>

</xsl:template>

</xsl:stylesheet>

Thank you!!! I had just, earlier this morning, searched and found that file (default and _en) and made the changes then tested it to find it working as expected.  Super happy.  Still I wasn't sure if that was the best solution... now that you've offered the 'same' suggestion I feel confident that I've made the necessary change(s).  Also... seeing "embed" in your example code, I will look into adding it as well :-)  

 http://www.boonex.com/forums/topic/Insert-Embed-Code-plugin-for-TinyMCE.htm

Found it, download it, installed it per your suggestions... works great... thank you :-)  

 I also need this "Uploading and editing images in TinyMCE" module, I would like to ask where to go to download? Or Where can I buy this one?

Sorry, Who have "Bnnoex integrates MCImageManager" module? 

 AndrewP has the Bnnoex module

http://www.boonex.com/m/ImageManager_plugin_integration

Thanks! I already to Buy, Download, and Installed.

Thank you again.

Ok, time to update this. I want to install this onto my 7.1 site. Are there any changes I need to be aware of or will it basically install the same way?

I like the functionality being available for my users in the forum. I think this might be my solution for post specific images when I try and share them on the different social engines. I also like having the ability to store site specific images on my server in such a way that they aren't all picked up by the built in photo mod and displayed everywhere..

Yes, 7.1 changed the way the TinyMCE is handled.  However, AndrewP has listed his module as compatible for 7.1; therefore, I would assume he is giving the instructions on how to integrate ImageManager into the current version.

 Yes, I did (listed it as compatible with 7.1). It was easy to upgrade the product for 7.1. And yes, my product is Instruction how to integrate this plugin (the first step of instruction tells where you can get this plugin).

hmm, I never bought Andrews mod. I think I installed it manually before that.. Gonna have to check my notes....

The file location listed on AndrewP market page no longer exists.

 http://www.moxiecode.com/products_imagemanager.php

 can you update the product for D7.1.1 or does it work?