I am using Django 1.5.1, and as we know since Django 1.3 the world of Media and statis files have been separated for good reasons.
To my surprise django-tinymce's documentation is referring to how TINYMCE_JS_URL is pointing by default to the media url.
TINYMCE_JS_URL (default: settings.MEDIA_URL + 'js/tiny_mce/tiny_mce.js')
That doesn't make much sense. As in Django 1.3+ we have the static_url for self hosted js and css files. But trying to change that is confusing and doesn't work.
This is how I usually setup my static files settings:
STATIC_ROOT = '/home/kave/project-env/site/static/'
STATIC_URL = '/static/'
STATICFILES_DIRS = ('/home/kave/project-env/site/static_files/',)
In the static_files directory I have extracted the TINYMCE zipfile:
e.g. the path is like this:
/home/kave/project-env/site/static_files/tinymce/js/tinymce/tinymce.min.js
Then I have set the settings like this:
TINYMCE_JS_URL = STATIC_URL + 'tinymce/js/tinymce/tinymce.min.js'
TINYMCE_JS_ROOT = STATIC_ROOT + 'tinymce/js/tinymce'
However when the app runs, I see a plain textfield instead of TINYMCE.
WHat could I have overlooked please?
I have finally figured it out, hope it helps somebody else.
You need to point to the built-in tiny_mce that is automatically installed through pip.
No need to download anything.
<script type="text/javascript" src="{{ STATIC_URL }}tiny_mce/tiny_mce.js"></script>
For admin screen, make sure you have this:
class TinyMCEAdmin(admin.ModelAdmin):
class Media:
js = ('/static/tiny_mce/tiny_mce.js', )
admin.site.register(MyModel, TinyMCEAdmin)
And don't forget the config in settings.py
TINYMCE_DEFAULT_CONFIG = {
# General options
'mode' : "textareas",
'theme' : "advanced",
'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",
# Theme options
'theme_advanced_buttons1' : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,fontselect,fontsizeselect,", #fullscreen,code",
'theme_advanced_buttons2' : "bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,|,forecolor,backcolor",
#'theme_advanced_buttons3' : "tablecontrols,|,hr,sub,sup,|,charmap",
'theme_advanced_toolbar_location' : "top",
'theme_advanced_toolbar_align' : "left",
'theme_advanced_statusbar_location' : "bottom",
'theme_advanced_resizing' : 'true',
#Example content CSS (should be your site CSS)
#content_css : "/css/style.css",
'template_external_list_url' : "lists/template_list.js",
'external_link_list_url' : "lists/link_list.js",
'external_image_list_url' : "lists/image_list.js",
'media_external_list_url' : "lists/media_list.js",
# Style formats
'style_formats' : [
{'title' : 'Bold text', 'inline' : 'strong'},
{'title' : 'Red text', 'inline' : 'span', 'styles' : {'color' : '#ff0000'}},
{'title' : 'Help', 'inline' : 'strong', 'classes' : 'help'},
{'title' : 'Table styles'},
{'title' : 'Table row 1', 'selector' : 'tr', 'classes' : 'tablerow'}
],
'width': '700',
'height': '400'
}
Other than that make sure to use the HTMLField inside your model for any model textfield.
In forms.py, if you are not using modelform, you need to define the new widget as well.
To make work with django-tinymce
we have to configure the following
settings.py
INSTALLED_APPS = [
# .......
'tinymce',
# .......
]
TINYMCE_JS_URL = '%sjavascript/tiny_mce/' % (STATIC_URL)
urls.py
urlpatterns = [
# .....
url(r'^tinymce/', include('tinymce.urls')),
# .....
]
Related
I'm trying to use a custom widget for plus and minus buttons and I struggle to link the widget to its css and js files.
So in my app I got this form :
class MyForm(forms.Form):
degree = forms.DecimalField(label="Degree", max_digits=3, decimal_places=1, required=True,
widget=PlusMinusNumberInput())
Calling this widget :
class PlusMinusNumberInput(Widget):
template_name = 'widgets/plus-minus-input.html'
class Media:
css = {
'all': ('css/plus-minus-input.css',)
}
js = ('js/plus-minus-input.js',)
I got a "static" directory at the root, with my files in css and js folders.
The static parts of my settings are as follow :
STATIC_URL = '/static/'
STATICFILES_DIRS = [Path.joinpath(BASE_DIR, 'static'),]
STATIC_ROOT = Path.joinpath(BASE_DIR, 'staticfiles')
At the end the html file render well but not the js and css.
Do you know why ?
In the code below, my problem is that template file 'UserAccount' is not found. I set the app in the settings and create a directory in the app and an html file in the directory.
from django.shortcuts import render
# Create your views here.
def login(request):
context = {}
return render(request, 'UserAccount/login.html', context)
this should be your settings.py:
INSTALLED_APPS = [
# django essentials
"django.contrib.admin",
...
# my apps
"myapp", #the app name is "myapp"
]
...
TEMPLATES = [
{
"BACKEND": "django.template.backends.django.DjangoTemplates",
"DIRS": [str(BASE_DIR.joinpath("template"))], # change this line in your settings
"APP_DIRS": True,
"OPTIONS": {
"context_processors": [
"django.template.context_processors.debug",
"django.template.context_processors.request",
"django.contrib.auth.context_processors.auth",
"django.contrib.messages.context_processors.messages",
],
},
},
]
now create a directory in the same directory as your apps. sth like this:
myapp
app_two
template
...
now in template directory create another directory with the name of your app. in tha t put your html fiels. like this:
| myapp
| app_two
| template
|----myapp
|----sth.html
|----sth_2.html
|----app_two
now when you want to reference them do it like this:
return render(request, 'myapp/sth.html', context)
General tips on asking question on Stackoverflow:
for title : a summary of your problem with keywords like "django" or "django-views"
for putting your code use three backticks --> code
search a lot before asking question. there is a huge chance that someone had posted the same problem before you and you can find your answer there
In my Django back end, I have a full toolbar.
However, I want to propose Ckeditor to my users with a minimum of functionnalities.
The problem is, I don't know how to this.
I tried to override my config :
<script type="text/javascript">
CKEDITOR.replace( 'default',
{
toolbar : 'Basic',
});
</script>
But nothing happened, even after removing my browser cache.
This is my Django settings :
CKEDITOR_BASEPATH = "/static/ckeditor/ckeditor/"
CKEDITOR_JQUERY_URL = 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'
CKEDITOR_UPLOAD_PATH = 'uploads/'
CKEDITOR_IMAGE_BACKEND = "pillow"
CKEDITOR_CONFIGS = {
'default': {
'toolbar': 'full',
'height': 500,
'width': 1500,
},
}
Maybe it is not working because in your Django code the settings "CKEDITOR_CONFIGS" for toolbar defined as full.
Also, you can configure toolbar through online builder - https://ckeditor.com/docs/ckeditor4/latest/guide/dev_plugins.html.
I recently implemented django-summernote with my forms, which works well for text. However, I struggle to get exactly how image upload works. Does anyone have some input on how it is done?
Problem
When choosing an image from file with Summernote, the Insert Image button is deactivated (works fine for image links). I did not write a custom 'upload_to' function, but as I get it, this is already done in django-summernote.
Details
Installed django-summernote according to documentation.
Added summernote to urls and in INSTALLED_APPS
Added summernote to my form field
directions = forms.CharField(
widget=SummernoteInplaceWidget(attrs={'maxlength':'4000'}),
required=False,
)
Also added some config in SUMMERNOTE_CONFIG (settings.py)
SUMMERNOTE_CONFIG = {
'iframe': True,
'airMode': True,
'width': '100%',
'height': '300',
'toolbar': [
# ['style', ['style']],
['font', ['bold', 'italic', 'underline', 'superscript', 'subscript', 'strikethrough', 'clear']],
# ['fontname', ['fontname']],
['fontsize', ['fontsize']],
# ['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['table', ['table']],
['insert', ['link', 'picture', 'video', 'hr']],
['view', ['fullscreen', 'codeview']],
['help', ['help']],
], }
Do I also have to write my own backend for attachments (images)? STATIC_URL and MEDIA_URL is defined in my settings.py, if that matters for this issue.
Update November 29th 2014:
When choosing an image, the following error is given in the console: "undefined is not a function", which is related to
imageInput.fileupload();
The "Insert Image" button is disabled.
As my project is in developing mode, I have DEBUG=True in my settings.
My urls look like:
urlpatterns += patterns('',
url(r'^summernote/', include('django_summernote.urls')),
) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
and Media_root and Media_url are set to:
MEDIA_ROOT = path.join(path.dirname(__file__), 'media',)
MEDIA_URL = '/media/'
I use picture uploads outside django-summernote with these settings.
Feels like I am missing something, but can´t see what.
Thanks in advance.
django-summernote shipped with backend support for image uploading out of box. So you don't have to write your own backend for it. MEDIA_ROOT or MEDIA_URL settings may have wrong value for uploading - permission problem or not valid path.
Run django project with runserver and please check the browser console(inspect) and python console after trying to upload an image.
And also refer Need a minimal Django file upload example for handling files on django project.
I've implemented both django-cms and flatpages, but can not get tiny_mce to display in either.
urls.py
(r'^tinymce/', include('tinymce.urls')),
from django.conf import settings
if settings.DEBUG:
urlpatterns += patterns('',
(r'^site_media/(?P<path>.*)$', 'django.views.static.serve',
{'document_root': settings.MEDIA_ROOT}),
)
settings.py
TINYMCE_JS_URL = 'http://127.0.0.1:8000/site_media/js/tiny_mce/tiny_mce.js'
TINYMCE_JS_ROOT = 'http://127.0.0.1:8000/site_media/js/tinymce/'
TINYMCE_DEFAULT_CONFIG = {
'plugins': "table,spellchecker,paste,searchreplace",
'theme': "advanced",
'cleanup_on_startup': True,
'custom_undo_redo_levels': 10,
}
TINYMCE_SPELLCHECKER = False
TINYMCE_COMPRESSOR = False
TINYMCE_FILEBROWSER = True
CMS_USE_TINYMCE = True
admin.py
from django.contrib.flatpages.models import FlatPage
from django.contrib.flatpages.admin import FlatPageAdmin
#Flatpages
class FlatPageAdmin(FlatPageAdmin):
class Media:
js = ('http://127.0.0.1:8000/js/tiny_mce/tiny_mce.js',
'http://127.0.0.1:8000/js/tiny_mce/textareas.js',)
# We have to unregister it, and then reregister
admin.site.unregister(FlatPage)
admin.site.register(FlatPage, FlatPageAdmin)
#django-cms
from myprograms.cms.models import Page
class PageOptions(admin.ModelAdmin):
class Media:
js = ('http://127.0.0.1:8000/site_media/js/tiny_mce/tiny_mce.js',
'http://127.0.0.1:8000/site_media/js/tiny_mce/textareas.js')
#admin.site.register(Page, PageOptions)
In the base.html file
<script type="text/javascript" src="{{ MEDIA_URL }}js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="{% url tinymce-js "NAME" %}"></script>
There are so many different options when accessing the various user groups, docs, etc. I'm not sure what is the correct syntax. The CMS doesn't do me much good without some kind of text editor.
Thx
first of all please check this line with slash like:
<script type="text/javascript" src="{{ MEDIA_URL }}/js/tiny_mce/tiny_mce.js"></script>
also please check site_id in error logs. had similar issue with site_id because I created new site with different id.
Best,
Mykola Lys.
If you need some more features then the simple flatpages just checkout django-blocks (http://code.google.com/p/django-blocks/). Has multi-language Menu, Flatpages and even has a simple Shopping Cart!!
Have you read the TinyMCE page on the Django wiki? Also - although it looks like it might not apply to you - browsers block calls from scripts across differing servers/domains...