Cannot seem to get Media Manager to work with CK Editor and Suit about django-media-manager HOT 23 CLOSED

I think the project can be considered dead, since author doesn't bother reacting on issues posted.

from django-media-manager.

Well that's disappointing. I really need a file upload feature for a site. Got any other ideas for alternatives? I'm following the instructions to the best of my ability (I'm still pretty new to django and python) and just can't seem to make it work.

from django-media-manager.

You could use TinyMCE instead of CKEditor if that suits you.
It has integration with django-filebrowser/django-media-manager.
https://github.com/aljosa/django-tinymce

from django-media-manager.

Thank you for the reply, drazenzen. I may have to do that because I'll definitely need a way to upload and manage files for blog entries.

When you say: "it has integration with django-filebrowser/django-media-manager" what do you mean, exactly? Do you mean that it has those integrated by default? Or would i have to manually add one of those myself to be able to upload files with TinyMCE? If it's the latter, I think I'd probably be right back in the same boat I currently am at with trying to get django-media-manager to work with CKEditor in Suit.

from django-media-manager.

Once you have the media-manager configured, you'll have to add some JS to your TinyMCE init file so it can "find" the medianager.

I am away from my computer or I would include the code. If you search for "déjà go filebrowser TinyMCE" you should be able to find an example

Wade Austin

On Friday, December 6, 2013 at 8:20 AM, Deron Sizemore wrote:

Thank you for the reply, drazenzen. I may have to do that because I'll definitely need a way to upload and manage files for blog entries.
When you say: "it has integration with django-filebrowser/django-media-manager" what do you mean, exactly? Do you mean that it has those integrated by default? Or would i have to manually add one of those myself to be able to upload files with TinyMCE? If it's the latter, I think I'd probably be right back in the same boat I currently am at with trying to get django-media-manager to work with CKEditor in Suit.

—
Reply to this email directly or view it on GitHub (#7 (comment)).

from django-media-manager.

Thanks. I may give it a try, but I'm not real hopeful that I'd be successful in setting it up. The key here being that you said "once you have media-manager configured." I think if I could get media-manager configured correctly, I could make it work with CKEditor, but evidently something I'm doing is incorrect because media-manager never shows in my CKEditor bar so my configuration of that app must be incorrect.

I'll do a search for that and see if I can find an example

from django-media-manager.

You will need django-media-browser for managing files and
django-tinymce to let users write and save formatted text.

Try this setup if you are not using virtualenv:
Extract and put filebrowser directory in the root of your project directory from django-media-manager package.
Put also tinymce directory in the root of your project directory from django-tinymce package.

If you are using virtualenv than just install them via pip:

pip install django-media-manager
pip install django-tinymce

Filebrowser by default looks for uploads directory in media dir.
Create uploads dir if it isn't allready in media directory.

Start development server:

$ python manage.py runserver

Check if filebrowser is working properly: http://127.0.0.1:8000/admin/filebrowser/browse

Put defaults for tinymce in your project's settings.py file:
(here you can make site wide config for TinyMCE widget)

TINYMCE_JS_URL = os.path.join(STATIC_URL, "tiny_mce/tiny_mce_src.js")
TINYMCE_JS_ROOT = os.path.join(STATIC_ROOT, "tiny_mce")
TINYMCE_DEFAULT_CONFIG = {
    'theme': 'advanced',
    'cleanup_on_startup': True,
    'custom_undo_redo_levels': 20,
}

Than collectstatic files from both packages by calling command:

$ python manage.py collectstatic

All javascripts and other static files should now be in place.

Finally in admin.py import TinyMCE widget and hook it to your model field. For example:

# admin.py
# ...
from tinymce.widgets import TinyMCE

class ItemModelAdmin(admin.ModelAdmin):
    """ItemModelAdmin."""
    # ...
    def formfield_for_dbfield(self, db_field, **kwargs):
        if db_field.name == 'YOUR_MODEL_FIELD_NAME_HERE':
            return db_field.formfield(widget=TinyMCE(
                attrs={'cols': 80, 'rows': 30}))
        return ItemModelAdmin.formfield_for_dbfield(self, db_field, **kwargs)

Everything should be in place now.
Now, when you edit text through TinyMCE widget and want to add an image to it, on image select popup window
you will have another button right next to URL field of the image, which when you clicked it should open new
filebrowser window where you can select and upload images to server.

from django-media-manager.

The filebrowser has a URL pattern that you need to include in your root URL pattern. After filebrowser is installed you can bring up that URL in your browser. If FB is setup incorrectly you'll see an error that should help you figure out what is wrong. Also, I believe FB has it's own debug setting that prints out extra info about the files that is helpful to debug.

Wade Austin

On Friday, December 6, 2013 at 9:11 AM, Deron Sizemore wrote:

Thanks. I may give it a try, but I'm not real hopeful that I'd be successful in setting it up. The key here being that you said "once you have media-manager configured." I think if I could get media-manager configured correctly, I could make it work with CKEditor, but evidently something I'm doing is incorrect because media-manager never shows in my CKEditor bar so my configuration of that app must be incorrect.
I'll do a search for that and see if I can find an example

—
Reply to this email directly or view it on GitHub (#7 (comment)).

from django-media-manager.

@waustin 👍 true

In your projects urls.py file you need to add these patterns:

urlpatterns = patterns(
    '',
    # ...
    # filebrowser
    url(r'^admin/filebrowser/', include('filebrowser.urls')),

    # tinymce
    url(r'^tinymce/', include('tinymce.urls')),
    # ...
)

And you need to include these packages to INSTALLED_APPS in your settings.py:

INSTALLED_APPS = (
    # ...
    'filebrowser',
    'tinymce',
    # ...
)

from django-media-manager.

@drazenzen

Thank you very much for that detailed explanation. Can I ask a question about collectstatic?

I'm currently still just developing locally on my laptop. In trying to get django-media-manager working last night with Suit and CKEditor I followed the instructions and did the collectstatic command. It went out and grabbed somewhere around 500 files I think it said. However, it didn't place those files into my static files directory, it placed them into my project root directory. I'm on Mac and I have a directory structure of

Sites

• projectname
  • projectname
    • suit
    • blog
    • assets
• virtualenv

where "assets" is my static file location (and is specified in my settings.py file). I guess I'm just leery of running collect static again and having it place 500 files into my project directory instead of in assets like I'd expect it to. I'm just not sure what's going on there.

I apologize... I realize this is way out of the scope of my original problem but if you have any ideas, I'm all ears and would appreciate the insight.

Thanks

@waustin

Ah... I'm really showing my noobness here. I added the URL pattern for filebrowser but it never occurred to me to try to browse to that url and see if i receive a message. I think I figured it out and filebrowser is actually working. I think my error was in that I didn't create an "uploads" directory and the reason I did that is because I thought I already had on. My "uploads" path prior to installing filebrowser was: /Sites/project/project/assets/uploads/

So... I had to go in and create another "uploads" directory inside of "uploads" for filebrowser to work correctly which I'm not a fan of, but i can change that later.

So, file browser functionality is working correctly it appears (although I did notice when I delete a file via filebrowser, it doesn't delete the thumbnail that is created upon upload). I can visit: http://127.0.0.1:8000/admin/filebrowser/upload/ and it takes me to the file browser upload page and I can successfully upload a file, but I've yet to figure out how to actually add the button to my CKEditor bar. I it all so looks like filebrowser is not styled correctly (like the path to the .css file isn't being found for styles yet when I view source, the path is correct and all that.

Thanks again.

from django-media-manager.

You do not need to run collectstatic during development. The Django
development server will magically find those static file for you. You can
go ahead and delete those files. Collect static should not be copying those
files into your project root. It should copy those to the directory
specified by the STATIC_ROOT setting. It sounds like you have a setting
wrong.

You should have a .gitignore rule for the STATIC_ROOT directory too, you
don't want the copy of those file littering up your repo.

On Fri, Dec 6, 2013 at 10:12 AM, Deron Sizemore [email protected]:

@drazenzen https://github.com/drazenzen

Thank you very much for that detailed explanation. Can I ask a question
about collectstatic?

I'm currently still just developing locally on my laptop. In trying to get
django-media-manager working last night with Suit and CKEditor I followed
the instructions and did the collectstatic command. It went out and grabbed
somewhere around 500 files I think it said. However, it didn't place those
files into my static files directory, it placed them into my project root
directory. I'm on Mac and I have a directory structure of

Sites

• projectname
  • projectname
    • suit
    • blog
    • assets
      • virtualenv

where "assets" is my static file location (and is specified in my
settings.py file). I guess I'm just leery of running collect static again
and having it place 500 files into my project directory instead of in
assets like I'd expect it to. I'm just not sure what's going on there.

I apologize... I realize this is way out of the scope of my original
problem but if you have any ideas, I'm all ears and would appreciate the
insight.

Thanks

@waustin https://github.com/waustin

Ah... I'm really showing my noobness here. I added the URL pattern for
filebrowser but it never occurred to me to try to browse to that url and
see if i receive a message. I think I figured it out and filebrowser is
actually working. I think my error was in that I didn't create an "uploads"
directory and the reason I did that is because I thought I already had on.
My "uploads" path prior to installing filebrowser was:
/Sites/project/project/assets/uploads/

So... I had to go in and create another "uploads" directory inside of
"uploads" for filebrowser to work correctly which I'm not a fan of, but i
can change that later.

So, file browser functionality is working correctly it appears (although I
did notice when I delete a file via filebrowser, it doesn't delete the
thumbnail that is created upon upload). I can visit:
http://127.0.0.1:8000/admin/filebrowser/upload/ and it takes me to the
file browser upload page and I can successfully upload a file, but I've yet
to figure out how to actually add the button to my CKEditor bar. I it all
so looks like filebrowser is not styled correctly (like the path to the
.css file isn't being found for styles yet when I view source, the path is
correct and all that.

Thanks again.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/7#issuecomment-30006199
.

Wade
http://www.wadeaustin.com

from django-media-manager.

You shouldn't have to create the second upload directory. I usually set
FILEBROWSER_DIRECTORY = '' that way filebrowser uses your MEDIA_ROOT
instead of a subdirectory.

On Fri, Dec 6, 2013 at 11:00 AM, Wade Austin [email protected] wrote:

You do not need to run collectstatic during development. The Django
development server will magically find those static file for you. You can
go ahead and delete those files. Collect static should not be copying those
files into your project root. It should copy those to the directory
specified by the STATIC_ROOT setting. It sounds like you have a setting
wrong.

You should have a .gitignore rule for the STATIC_ROOT directory too, you
don't want the copy of those file littering up your repo.

On Fri, Dec 6, 2013 at 10:12 AM, Deron Sizemore [email protected]:

@drazenzen https://github.com/drazenzen

Thank you very much for that detailed explanation. Can I ask a question
about collectstatic?

I'm currently still just developing locally on my laptop. In trying to
get django-media-manager working last night with Suit and CKEditor I
followed the instructions and did the collectstatic command. It went out
and grabbed somewhere around 500 files I think it said. However, it didn't
place those files into my static files directory, it placed them into my
project root directory. I'm on Mac and I have a directory structure of

Sites

• projectname
  • projectname
    • suit
    • blog
    • assets
      • virtualenv

where "assets" is my static file location (and is specified in my
settings.py file). I guess I'm just leery of running collect static again
and having it place 500 files into my project directory instead of in
assets like I'd expect it to. I'm just not sure what's going on there.

I apologize... I realize this is way out of the scope of my original
problem but if you have any ideas, I'm all ears and would appreciate the
insight.

Thanks

@waustin https://github.com/waustin

Ah... I'm really showing my noobness here. I added the URL pattern for
filebrowser but it never occurred to me to try to browse to that url and
see if i receive a message. I think I figured it out and filebrowser is
actually working. I think my error was in that I didn't create an "uploads"
directory and the reason I did that is because I thought I already had on.
My "uploads" path prior to installing filebrowser was:
/Sites/project/project/assets/uploads/

So... I had to go in and create another "uploads" directory inside of
"uploads" for filebrowser to work correctly which I'm not a fan of, but i
can change that later.

So, file browser functionality is working correctly it appears (although
I did notice when I delete a file via filebrowser, it doesn't delete the
thumbnail that is created upon upload). I can visit:
http://127.0.0.1:8000/admin/filebrowser/upload/ and it takes me to the
file browser upload page and I can successfully upload a file, but I've yet
to figure out how to actually add the button to my CKEditor bar. I it all
so looks like filebrowser is not styled correctly (like the path to the
.css file isn't being found for styles yet when I view source, the path is
correct and all that.

Thanks again.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/7#issuecomment-30006199
.

Wade
http://www.wadeaustin.com

Wade
http://www.wadeaustin.com

from django-media-manager.

@waustin

Ahhh.... gotcha! I didn't think I needed to run collectstatic in development; so I was confused.

I actually was able to get my styles working in Suit, finally! I needed FILEBROWSER_SUIT_TEMPLATE = True which I had initially but it wasn't working but at the time I didn't quite understand the purpose.

I wasn't aware that I could even use a FILEBROWSER_DIRECTORY = '' setting. Is there more in depth documentation for this app that I'm just missing or is it just assumed that you'll know that's a possible setting?

I guess my last question pertains to actual functionality of this app. I was under the impression that after installing it, it would add a new button to my CKEditor field. The more I analyze the documentation on the github page and look at screenshots, I see that there's actually NOT a button on the CKEditor form. There's a button on the Redactor toolbar, but not CKEditor. So, is the intended use with this app and CKEditor to only use it in model upload fields and then insert image paths via CKEditor toolbar or should it actually add a button to the CKEditor toolbar.

from django-media-manager.

You can run collectstatic command as many times as you wish.
It just copies all the files from static dirs in all of the enabled apps, in INSTALLED_APPS settings list,
to the mapped STATIC_DIR absolute filepath in your settings.py file.

settings.py

STATIC_DIR = '/your/path/to/static/' # files are copied to this location
STATIC_URL = '/static/' # files are served by Apache/Lighttpd/whatever from here

So if you are writing css or javascript file for app named blog, you will save them to css/javscript file in
blog/static/css/FILENAME.css
or
blog/static/js/FILENAME.js

After issuing collectstatic command, your css/javscript/... files will be saved in STATIC_DIR directory
which will be served by http server via STATIC_URL mapping.

In your template you can include these static files like this:

{% load staticfiles %}
<!-- ... -->
<link href="{% static "APP_NAME/css/FILENAME.css" %}" rel="stylesheet">
<script src="{% static "APP_NAME/js/FILENAME.js" %}"></script>
<!-- ... -->

from django-media-manager.

Thanks, @drazenzen. Everything you wrote is what I've currently done. I just haven't done the collectstatic as of yet as I'm still on local development. I'm also saving all static files and user uploaded files in an "assets" directory and organizing everything in there. I guess for the way I've always developed sites, that just makes the most sense to me.

I do believe I have django-media-manager working now with CKEditor partially. What I'm still confused on though is if CKEditor should actually have a filebrowser button showup somehwere on the toolbar? Do you know the answer to that? Right now I've just got a filebrowser field in my model which shows up on my admin form. I upload a file, and then simply insert the uploaded file path into my textarea body via the "insert image" button on CKEditor. The thing I'm still confused about is this line:

The most important things are on ModelForm (Media and Widgets). To use browser on CKEditor and have the button to navigate on filebrowser you only need to add the js file to Media

That seems to indicate that there is in fact a way to add some kind of a filebrowser button directly into CKEditor. If that's possible, it would eliminate the need for my filebrowser model fields as I could just insert images directly into the textarea rather than having to upload them in a separate field and copy paths to the CKEditor field.

The last thing I'm curious about is image uploading in general. I noticed in my tests that when I upload an image it's uploading six versions of that image. It's uploading a couple thumbnails, small, medium, large, etc. I really don't want that functionality. I guess it would be nice for some sites, but it's just overkill for my needs. I plan on sizing my image how I want it prior to upload and I have no need at all for it to be saving an extra five images on my server. Is it possible to turn that off?

thanks all!

from django-media-manager.

Sorry guys for the delay, but right now I'm very busy. That's why the project seems dead. Just a tip to all read the documentation and see the examples.

from django-media-manager.

@miguelramos

Is there more documentation besides what's in the "readme?" My issue is that I've read and re-read that about 100 times and I'm still not sure that I completely understand how this app is intended to be used along side CKEditor. As I said above, this line in the documentation:

To use browser on CKEditor and have the button to navigate on filebrowser you only need to add the js file to Media

makes it seem to me that there should be a button added to CKEditor for the purpose of using filebrowser? So a button that I could click from the toolbar, upload my image, and then insert the url into an img tag all right from CKEditor. Is that how this is supposed to work? Or not? If it is, I don't know what else I can do to make it work. As far as I can see, I've followed your documentation to the best of my entry level knowledge will allow.

Could you explain the intended behavior of this app to me?

Thanks!

from django-media-manager.

Hi @deronsizemore. On CKEditor when you click on image button a new window opens and in that new window you will have a button to navigate thru filebrowser, this is the behavior. No button on main toolbar will be added, just in this window of image button, this is the default behavior of CKEditor. Even if you use third party from ckeditor tools this is the way they do. And read the docs carefully, at the end of the documentation you have a link to the original project an is documentation.

from django-media-manager.

Ok, thanks @miguelramos. That's how I understood it to work, but wasn't for sure. That said, it's currently not working. I didin't see the link at the bottom for the documentation, I apologize. I've been reading the documentation for the last hour or so double checking things and I can't see anything that I'm doing wrong for the browse button to not show on the "image" pop up. Is there any typical reason that the browse button wouldn't show on the "image" pop up? I've tested filebrowser by simply going to /admin/filebrowser/ and I'm able to browse, upload, delete, etc. I just can't see a browse button from the CKEditor image pop up box. Can you offer any advice here?

Thanks again

from django-media-manager.

Did you collectstatic files? Is js loaded? Are you project public, on a github repo? If is please point me the code. Or you could past it on a gist your model, admin and settings to see. As i wrote on docs, the important part is have Media model form to inject the javascript.

from django-media-manager.

Hi, @miguelramos. I have not run collectstatic as I'm currently just developing locally. I did move all the filebrowser files over to my staticfiles_dirs location and they all seem to be fine as I'm able to load filebrowser via URL manually and it all works as intended. I can also browse manually to all of the .js files so I assume they're all accessible and setup correctly.

I've setup a gist with my model, admin and settings.py files. I also do have my Media model form setup as the example shows. Or at least I think I have it setup as the example shows. I can't see where I have done anything differently than your example, so please forgive me if I've overlooked something obvious here. I've only been using python and django for a couple months.

Thanks!

Here's the gist: https://gist.github.com/deronsizemore/bd27d9fda59a28ad7ae2

from django-media-manager.

Hi @deronsizemore. I've just check your gist and tried on a local test. I've saw that the script gaves an error and the name file is splited in chars. To resolve your problem please on line you assign media:

Example you have:

class Media:
        js = ('filebrowser/js/FB_CKEditor.js',) #Add comma after file path
            css = {
                'all': ('filebrowser/css/suit-filebrowser.css',)
        }

Without comma your file is beign broken(split) in characters.
If you have any problem just hit me that i will send you my test project with your files working.

from django-media-manager.

Thank you, @miguelramos. That's embarrassing; I should have seen that.

I added the comma in there as you instructed and I'm still not seeing the filebrowser button from within my image insert dialog box.

Could you send me your test project? my email is dsizemore81 at gmail.

Could I also ask how you were able to see that the script gave an error? I'm not seeing any errors on my end which makes it difficult to troubleshoot. Thanks again.

from django-media-manager.