TinyMCE image upload plugin using TinyFileManager.Net.

TinyFileManager.Net

Posted by iks on 1/26/2015 4:06:40 PM

Following are the steps:

  1. Download TinyFileManager.Net.
  2. Copy /distro/js/tinymce folder over the current TinyMCE file structure. It will replace some of your existing file folders with new ones, keep it replacing.
  3. Go to /distro, there are two folders inside it js and tinyfilemanager.net. Copy all the content from tinyfilemanager.net (with bin, css, img, js, dialog.aspx and web.config) and paste it in 'lib' folder (you can create any folder).
  4. Now put the bin folder in your current project's root directory. All you need to do is move it from your 'lib' folder to root.
  5. Now edit the tinymceEditor.js file. Set its tfm_path and and add tinyfilemanager.net in plugins values as:
    tfm_path = '/lib/tinyfilemanager.net'; 
    tinymce.init({
    selector: ".mcetiny",
    theme: "modern",
    plugins: [
    "advlist autolink lists link image charmap print preview hr anchor pagebreak",
    "searchreplace wordcount visualblocks visualchars code fullscreen",
    "insertdatetime media nonbreaking save table contextmenu directionality",
    "emoticons template paste textcolor tinyfilemanager.net"
    ],
    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    toolbar2: "print preview media | forecolor backcolor emoticons",
    image_advtab: true,
    templates: [
    { title: 'Test template 1', content: 'Test 1' },
    { title: 'Test template 2', content: 'Test 2' }
    ]
    });
  6. Web.Config file in tinyfilemanager.net has thumb path and upload path as:
    <UploadPath>resources\files</UploadPath>
    <ThumbPath>resources\thumbs</ThumbPath>

    So all you need to create a Directory 'resouces' having two sub directories 'file' and 'thumbs'.

You are Done! Now when you click on insert/editImage tool it would look as:

 

 

 


Comments

Please leave your comment here!