dev-jim
dev-jim

Reputation: 2524

Can't get the TinyMCE to work in django admin

I follow the instruction in here to install the TinyMCE into the django Admin backend.

But it is not working. When checking the console log, I saw this:

http://127.0.0.1:8000/media/js/tiny_mce/tiny_mce.js Failed to load 

DO I need to manually adding the js file? The instruction in the github does not mention this.

UPDATE

Indeed to make it work, will have to move the tiny_mce to your static folder. Here is my solution for anyone who also have similar problem.

settins.py
STATIC_URL = '/static/'
STATIC_ROOT = ''
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)
#this is for localhost development, if you are in production enviroment, you will need to remove the STATICFILES_DIRS and define your STATIC_ROOT
 TINYMCE_DEFAULT_CONFIG = {
 'plugins' : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave,pagebreak",
'theme': "advanced",

'theme_advanced_buttons1' : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,fontselect,fontsizeselect,fullscreen,code,|,preview,image,media",
'theme_advanced_buttons2' : "table,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,|,forecolor,backcolor, emotions,|,pagebreak,paste",
'theme_advanced_buttons3 ': "",
'theme_advanced_toolbar_location' : "top",
'theme_advanced_toolbar_align' : "left",
'width': '700',
'height': '400'
}


admin.py
class AdminPost(admin.ModelAdmin):
    class Media:
                js = ('/static/js/tiny_mce/tiny_mce.js',)

Upvotes: 1

Views: 1308

Answers (3)

sahil godwal
sahil godwal

Reputation: 11

You should try:-

  1. First uninstalling tinymce

    pip uninstall django-tinymce4

  2. and Then re-installing tinymce

It worked for me

Upvotes: 0

Rômulo Collopy
Rômulo Collopy

Reputation: 1034

Django TinyMCE has the media url as default value, as you can see in the docs:

TINYMCE_JS_URL (default: settings.MEDIA_URL + 'js/tiny_mce/tiny_mce.js')
TINYMCE_JS_ROOT (default: settings.MEDIA_ROOT + 'js/tiny_mce')

If you prefer to use the static files in the static folder, you have to set these values to the correct path. I'd sugest:

TINYMCE_JS_URL = settings.STATIC_URL + 'js/tiny_mce/tiny_mce.js'
TINYMCE_JS_ROOT = settings.STATIC_ROOT + 'js/tiny_mce'

Now you have to ensure you're using the "django.contrib.staticfiles.finders.AppDirectoriesFinder" in your STATICFILES_FINDERS settings, in order to not have to copy the files in development environment, and to be collected with collectstatic.

Upvotes: 1

Arron
Arron

Reputation: 916

There are 2 possible reasons for this issue.

1.) You have the required files but on a different location than specified in your script tag. Change the url in your script tag to the valid location and it will work

2.) You do not have the required files. Download the source files and place them in the specified location and it will work.

Upvotes: 0

Related Questions