Django CKEditor toolbar settings - django

I have a website on django and everything was excellent before i've installed ckeditor. It works properly, but I can't change the toolbar configuration to "Full". If i write it in settings.py file like this:
CKEDITOR_CONFIGS = {
'Awesome': {
'toolbar': 'Full',
'width': 900,
}}
I have an editor block with width of 900px, but toolbar in only 1 row and 13 buttons instead of 3 rows and huge number of buttons. If i change "Full" to "Basic", then my toolbar grows down to 3 buttons.
I know, that I should change settings in config.js file in the ckeditor folder, but no toolbar settings are working. I tried to make a mini-toolbar:
config.toolbar =
[
[ 'Source', '-', 'Bold', 'Italic' ]
];
Tried to make a full-toolbar:
config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];
I tried to delete or change ckeditor's settings in settings.py file of my project, after every change I have restarted the server, but nothing happened =(
The config.js file is working, a can add a button that hides the toolbar
config.toolbarCanCollapse = true;
And it works great =)
What shall I do to make a really full toolbar like this?
My brain is blowing up, so i'll be really happy if someone help me!
And sorry for my awful english...

I just found full toolbar settings on CKEditor docs here: Full toolbar configuration
To create editor instance with full toolbar you don't have to set anything. Just leave toolbar and toolbarGroups with the default, null values.
So django-ckeditor config will be,
CKEDITOR_CONFIGS = {
'default': {
'toolbar': None,
},
}
And it works :)

heres a snippet from my django ckeditor toolbar settings. Its not full but you should be able to add to it to get what you want.
'toolbar': [["Format", "Bold", "Italic", "Underline", "Strike", "SpellChecker"],
['NumberedList', 'BulletedList', "Indent", "Outdent", 'JustifyLeft', 'JustifyCenter',
'JustifyRight', 'JustifyBlock'],
["Image", "Table", "Link", "Unlink", "Anchor", "SectionLink", "Subscript", "Superscript"], ['Undo', 'Redo'], ["Source"],
["Maximize"]],
On a separate note, id recommend using the native javascript ckeditor if possible in your django propject. Ive been using the django version for a while now and its proving top be a serious headache for your reason mentioned above among other reasons.

You can config the toolbar by yourself just by adding, moving or removing the elements.
Just Check Here.

Related

How do I attach image files in Django-summernote?

So I have this Django application with django-summernote, and I'm having trouble uploading image files via the editor. When I click the upload button and choose an image from my computer, I get an error saying "Failed to save attachment". And in the console, I see this error: "POST /summernote/upload_attachment/ 500". Let me show you my code. settings.py
INSTALLED_APPS = [
...
'django_summernote',
...
]
...
DEBUG = True
...
SUMMERNOTE_CONFIG = {
'iframe': True,
'lang' : 'ko-KR',
'summernote': {
'width': '100%',
'height': '450px',
'placeholder':'First sentence',
'toolbar': [
['style', ['style',]],
['font', ['fontsize', 'bold', 'italic', 'strikethrough']],
['color', ['forecolor', ]],
['para', ['ul', 'ol', 'height']],
['insert', ['link']],
['misc', ['picture', 'fullscreen', 'print', 'help', ]],
],
},
'js': (
'static/summernote-ext-print.js',
),
'js_for_inplace': (
'/static/summernote-ext-print.js',
),
'css': (
'//cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/theme/base16-dark.min.css',
'/mvp/static/summernote.css',
),
'css_for_inplace': (
'//cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/theme/base16-dark.min.css',
'/summernote.css',
),
'codemirror': {
'theme': 'base16-dark',
'mode': 'htmlmixed',
'lineNumbers': 'true',
},
'lazy': False,
}
SUMMERNOTE_THEME = 'bs4'
X_FRAME_OPTIONS = 'SAMEORIGIN'
...
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
urls.py
urlpatterns = [
path('summernote/', include('django_summernote.urls')),
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
I don't see what I've done wrong. Everything else except uploading image works fine. BTW, I'm using Django 3.x and Bootstrap 4.x.
+++ If it gives you any further info: I also keep getting these errors in the console as well. Might be related?
Refused to apply style from '<myURL>/summernote.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Failed to load resource: the server responded with a status of 404 () ... summernote-ext-print.js Failed to load resource: the server responded with a status of 500 () .../summernote/upload_attachment/
This has been making me so frustrated for days. I'd very much appreciate your help. :)

Loopback 4 The swagger generated filters don't seem to work

I set up a basic model and controller connected to mysql database. Everything looks good and is working.
My Definition Model looks like this.
import { Entity, model, property } from '#loopback/repository';
#model({
settings: {
mysql: {
table: 'definition'
}
}
})
export class Definition extends Entity {
#property({
type: 'number',
id: true,
generated: true,
forceId: true,
required: false,
description: 'The unique identifier for a definition',
})
id: number;
#property({
type: 'string',
required: true,
})
name: string;
#property({
type: 'string',
required: true,
})
process_id: string;
constructor(data?: Partial<Definition>) {
super(data);
}
}
export interface DefinitionRelations {
// describe navigational properties here
}
export type DefinitionWithRelations = Definition & DefinitionRelations;
When I have it up and running and click on the explorer to test it out.
I click on "Try it out" for get /definitions and the only editable field that gets enabled is the filter field.
It is repopulated with a value like this...
{
"where": {},
"fields": {
"id": true,
"name": true,
"process_id": true
},
"offset": 0,
"limit": 0,
"skip": 0,
"order": [
"string"
]
}
I have to clear that to get it to work which is fine. When I run it with no filter it returns these results.
[
{
"id": 10,
"name": "Place Manual Payoff Order Process Config",
"process_id": "Process_PlaceManualPayoffOrderProcessConfig"
},
{
"id": 11,
"name": "test",
"process_id": "Test"
},
{
"id": 12,
"name": "test2",
"process_id": "test2"
}
]
I am trying to use the filter expression to only return ones with a specific process_id field. So I change the filter to look like this.
{
"where": {"process_id": "test2"}
}
And it still returns the same results.
[
{
"id": 10,
"name": "Place Manual Payoff Order Process Config",
"process_id": "Process_PlaceManualPayoffOrderProcessConfig"
},
{
"id": 11,
"name": "test",
"process_id": "Test"
},
{
"id": 12,
"name": "test2",
"process_id": "test2"
}
]
Do filters currently work in Loopback 4 or am I using them incorrectly?
EDIT: if I post the filters in the URL string they work. It seems as though the openapi ui isn't generating that part of the filter Into the URL string.
It seems as though the openapi ui isn't generating that part of the filter Into the URL string.
Yes, this a precise description.
OpenAPI Spec version 3.x does not specify how to serialize deeply-nested values to URL queries and swagger-js, the library powering swagger-ui (which powers LoopBack's REST API Explorer), silently ignores such values.
The issue has been reported and is being discussed here:
swagger-api/swagger-js#1385
OAI/OpenAPI-Specification#1706

django-ckeditor, failed to load mathjax

I failed to load mathjax within django-ckeditor
This post contains my virtualenv config, CKEDITOR_CONFIGS, printscreen, and an element from the Source page.
virtualenv
>pip freeze
Django==1.10.2
django-appconf==1.0.2
django-ckeditor==5.1.1
django-compressor==2.1
django-debug-toolbar==1.6
Pillow==3.4.2
psycopg2==2.6.2
rcssmin==1.0.6
rjsmin==1.0.12
sqlparse==0.2.1
CKEDITOR_CONFIGS
CKEDITOR_CONFIGS = {
'default': {
'skin': 'moono',
# 'skin': 'office2013',
'toolbar_Custom': [
{'name': 'document', 'items': [
'Subscript', 'Superscript', ]},
{'name': 'source', 'items': [
'Source', ]},
],
'toolbar': 'Custom',
'mathJaxLib': '//cdn.mathjax.org/mathjax/2.2-latest/MathJax.js?config=TeX-AMS_HTML',
'height': 200,
'width': 600,
'extraPlugins': ','.join(['mathjax', ]),
},
}
According to problems with mathjax #256, I've changed ckeditor-init.js. I also tried various combinations, including {'name': 'math', 'items': ['mathjax', ]}, and {'name': 'math', 'items': ['Matjax', ]} in 'toolbar_Custom' list.
Printscreen
Source
As you can see the panel contains all config I setup in config but mathjax. However, the page source contains the "toolbar_Basic", "toolbar_Full" & "toolbar_Custom". I'm not sure if Basic and Full should be present, according to my config.
< div class = "django-ckeditor-widget"
data - field - id = "id_false_answer_text"
style = "display: inline-block;" >
< textarea cols = "40"
id = "id_false_answer_text"
name = "false_answer_text"
rows = "10"
required data - processed = "0"
data - config = '{"toolbar_Basic": [["Source", "-", "Bold", "Italic"]], "toolbar_Full": [["Styles", "Format", "Bold", "Italic", "Underline", "Strike", "SpellChecker", "Undo", "Redo"], ["Link", "Unlink", "Anchor"], ["Image", "Flash", "Table", "HorizontalRule"], ["TextColor", "BGColor"], ["Smiley", "SpecialChar"], ["Source"]], "filebrowserUploadUrl": "/ckeditor/upload/", "skin": "moono", "filebrowserWindowWidth": 940, "filebrowserWindowHeight": 725, "width": 600, "height": 200, "filebrowserBrowseUrl": "/ckeditor/browse/", "language": "en-us", "toolbar": "Custom", "toolbar_Custom": [{"items": ["Subscript", "Superscript"], "name": "document"}, {"items": ["Source"], "name": "source"}, {"items": ["mathjax"], "name": "mathjax"}]}'
data - external - plugin - resources = '[]'
data - id = "id_false_answer_text"
data - type = "ckeditortype" > & lt;
p & gt;
fa4 q1 & lt;
/p></textarea >
</div>
Another config
All-plugin config (according to a post from web) also shows no mathjax icon. Both with and without change of 'ckeditor-init.js
CKEDITOR_CONFIGS = {
'default': {
'toolbar': 'none',
'height': 200,
'width': 600,
},
}
So as example config from the README.rst
Static files
CKEDITOR_JQUERY_URL = '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'
The quesiton is:
If it is an issue, how can I quickfix it?
If it is related to configuration inexperience, could you please direct me to the config examples/the right config for mathjax?
The printscreens come from Django admin, I use RichTextUploadingField in these models.
This was a misconfiguration issue, no problems with Django-CKEditor. The key part of config for mathjax as follows.
CKEDITOR_CONFIGS = {
'default': {
'skin': 'moono',
'toolbar_Custom': [
{'name': 'math', 'items': ['Mathjax', ]},
],
'toolbar': 'Custom',
'mathJaxLib': '//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML',
'extraPlugins': ','.join(['mathjax',]),
},
}
Both toolbar and extraPligins should be present in config for mathjax to appear and work.

Crossbar.io configure WSGI for Django app

I am experimenting with Crossbar.io 0.10.4 and Django 1.6.11, trying to follow the example here. The code shows you can configure Crossbar.io to serve up the Django app at "/" -- but when I try that in my configuration, I get a Python import error:
ApplicationError: ApplicationError('crossbar.error.invalid_configuration', args = (u"WSGI app module 'apache/django.wsgi' import failed: Import by filename is not supported. - Python search path was ....
My config.json is here:
{
"controller": {
},
"workers": [
{
"type": "router",
"realms": [
{
"name": "backstage-producer",
"roles": [
{
"name": "anonymous",
"permissions": [
{
"uri": "*",
"publish": false,
"subscribe": true,
"call": false,
"register": false
}
]
}
]
}
],
"transports": [
{
"type": "web",
"endpoint": {
"type": "tcp",
"port": 8080
},
"paths": {
"/": {
"type": "wsgi",
"module": "apache/django.wsgi",
"object": "application"
},
"ws": {
"type": "websocket",
"debug": false
},
"notify": {
"type": "publisher",
"realm": "backstage-producer",
"role": "anonymous"
},
"static": {
"type": "static",
"directory": "../static"
}
}
}
]
}
]
}
Where the Python paths searched do not include my Django project directory. Typically I append my specific project directories to sys.path in my wsgi file, but apparently that workflow doesn't work with Crossbar.io. Trying a relative import fails (need to specify "package" argument) as does full path (same import by filename error as above).
Removing the definition for "/" does not work, because Crossbar.io complains that it must be defined.
How can I set this up properly with Crossbar.io? My apache/django.wsgi file is below, for reference:
ALLDIRS = ['/usr/local/pythonenv/myapp/lib/python2.6/site-packages']
import os
import sys
import site
# from https://code.google.com/p/modwsgi/wiki/VirtualEnvironments
sys.path.insert(0, '/var/www/myapp/myapp_main/')
sys.path.insert(1, '/var/www/myapp/')
prev_sys_path = list(sys.path)
for directory in ALLDIRS:
site.addsitedir(directory)
new_sys_path = []
for item in list(sys.path):
if item not in prev_sys_path:
new_sys_path.append(item)
sys.path.remove(item)
sys.path[:0] = new_sys_path
os.environ['DJANGO_SETTINGS_MODULE'] = 'myapp_main.settings'
import django.core.handlers.wsgi
application = django.core.handlers.wsgi.WSGIHandler()
----UPDATE 1------
Per Daniel's suggestion, I changed the file to just wsgi.py and my config to use the Python module path, not the filename / directory path. Config then looked like this:
"paths": {
"/": {
"type": "wsgi",
"module": "apache.wsgi",
"object": "application"
},
Throws the same exception:
ApplicationError: ApplicationError('crossbar.error.invalid_configuration', args = (u"WSGI app module 'apache.wsgi' import failed: No module named apache.wsgi - Python search path was
My directory structure is:
Project
|- apache
| |-__init__.py
| |-wsgi.py
|-.crossbar
|-config.json
-------UPDATE 2-------
The only solution (read "hack") I have found is to hard-code my project path into crossbar/worker/router.py so that it is included in the Python search path list:
sys.path.insert(0, '/var/www/myapp/myapp_main/')
sys.path.insert(1, '/var/www/myapp/')
Seems like there should be a better way...
The error is telling you that you have a file path in the setting that points to your WSGI file, whereas you need a Python module path. Your WSGI file should actually be a file called "wsgi.py" inside your project directory (which presumably is "apache", which is a strange name for a project that explicitly is not using Apache).
"/": {
"type": "wsgi",
"module": "apache.wsgi",
"object": "application"
},
Update So I found the config docs at last: they really don't go out of their way to make it easy, like actually providing an index. Oh well.
It looks like you can provide an options hash to the router configuration including a pythonpath setting:
"workers": [
{
"type": "router",
"options": {
"pythonpath": ["/var/myapp/myapp_main/", "/var/myapp"]
},
...
"transports": {
...

how to configure AWS Elastic Transcoder

I'm trying to use AWS's Elastic Transcoder to implement http live streaming for an iPad app. Suppose that I have an output bucket called "output". I want Elastic Transcoder to decode a video and to put the .ts files for each hls output in their own folder, inside a folder called "camera", inside a folder called "tutorials". The resulting directory structure would look like:
output/tutorials/camera/hls20M/.ts
output/tutorials/camera/hls15M/.ts
output/tutorials/camera/hls10M/*.ts
etc.
The master playlist would go in the /camera folder: output/tutorials/camera/index.m3u8
I'm having trouble figuring out how to set up the "output key prefix" and the "output key" in my job in order to achieve this structure.
I think this is the gist of it:
CreateJob
{
...
"Outputs": [
{
"Key": "hls20M/fileName"
},
{
"Key": "hls15M/fileName"
},
{
"Key": "hls10M/fileName"
}
],
"OutputKeyPrefix": "output/tutorials/camera/",
"Playlists": [
{
"Name": "index"
}
]
}
All outputs (including the master playlist) are prefixed by the OutputKeyPrefix. Then you put each output under the desired subfolder within that.
You basically need to do something like this:
elastic_transcoder.create_job(pipeline_id=PIPELINE_ID,input_name=input_obj
ect,outputs=output_objects)
#where output_objects is as under:
output_objects = [
{
'Key': '%s/video/%s_1080.mp4'%(project_name,video_id),
'PresetId': '1351620000001-000001',
'Rotate': 'auto',
'ThumbnailPattern': '',
},
{
'Key': '%s/video/%s_720.mp4'%(project_name,video_id),
'PresetId': '1351620000001-000010',
'Rotate': 'auto',
'ThumbnailPattern': '',
},
{
'Key': '%s/video/%s_480.mp4'%(project_name,video_id),
'PresetId': '1351620000001-000020',
'Rotate': 'auto',
'ThumbnailPattern': '',
},
{
'Key': '%s/video/%s_360.mp4'%(project_name,video_id),
'PresetId': '1351620000001-000040',
'Rotate': 'auto',
'ThumbnailPattern': '',
}
]
Moreover the preset_id mentioned here are for different versions one outputs one of them could be your ipad version too.
for a detailed outlook how to setup output and input check this post It explains in detail about the whole process.Hope it helps someone