I have recently discovered Summernote and love it. I have run into a problem where when I am using it in my django installation, the SummernoteWidget is working but the SummernoteInplaceWidget is not. When I use the SummernoteWidget, the data appears in my editor as I would expect, but when I use the SummernoteInplaceWidget, I get a blank screen. Thanks for any thoughts. My code...
I am using Summernote-Lite without bootstrap and I am using the most recent version 0.8.9
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.js"></script>
My Summernote_Config in settings.py
SUMMERNOTE_CONFIG = {
'summernote': {
'toolbar': [
['undo', ['undo',]],
['redo', ['redo',]],
['style', ['bold', 'italic', 'underline',]],
['font', ['strikethrough',]],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
],
'width': 760,
'height': 300,
'focus': True,
'fontSizes': ['8', '9', '10', '11', '12', '14', '18', '22','24', '36', '48' , '64', '82', '150'],
},
}
My CSS...
.editor {
font-size: 18px;
margin-left: 24.4rem;
}
My widget reference in forms.py..
widgets = {
'book': SummernoteInplaceWidget(),
}
The editor renders, but I just get a blank screen...
If I use the SummernoteWidget instead,
widgets = {
'book': SummernoteWidget(),
}
My CSS....
.editor {
font-size: 18px;
margin-left: 24.4rem;
}
I get the data on the screen that I'm expecting, but font size setting is not honored as shown below.
Any ideas on if this is a bug or if I'm doing something incorrectly which is entirely possible? Thanks in advance for any thoughts.
Related
I'm using django ckeditor, and when i click any button (for example: iframe button), the background color is black so its hard to see and edit
Here is my code for django ckeditor config
CKEDITOR_CONFIGS = {
'default': {
'toolbar': [["Format", "Bold", "Italic", "Underline", "Strike", "SpellChecker"],
['NumberedList', 'BulletedList', "Indent", "Outdent", 'JustifyLeft', 'JustifyCenter',
'JustifyRight', 'JustifyBlock'],
["Image", "Table", "Link", "Unlink", "Anchor", "SectionLink",
"Subscript", "Superscript", "Iframe"], ['Undo', 'Redo'],
["Maximize"]],
},
}
Is there a way to change a color background? Is the problem in django ckeditor? django? or my browser? any idea?
Thankyou.
If you switch off your browsers "dark mode", it should work.
One of solutions is use to use a admin ui, such as simpleui
So I'm using django-summernote (I'm using Django ver 3.x), and trying to change the default font in the editor. Here's my code.
(part of) forms.py:
from .models import MyModel
class MyInputForm(forms.ModelForm):
contents = SummernoteTextFormField()
class Meta:
model=MyModel
fields=['contents']
widgets = {
'contents': SummernoteInplaceWidget()
}
(part of) my template :
<form method="post" class="form-group">
{% csrf_token %}
<div class="row">
<div class="col col-8">
{{form.contents|as_crispy_field}}
</div>
</div>
</form>
And in case you need to take a look, (part of) my settings.py
SUMMERNOTE_CONFIG = {
'iframe': True,
'lang' : 'ko-KR',
'summernote': {
'width': '100%',
'height': '400px',
'toolbar': [
['style', ['style',]],
['font', ['fontname', 'fontsize', 'bold', 'italic', 'strikethrough', 'clear',]],
['color', ['forecolor', 'backcolor', ]],
['para', ['ul', 'ol', 'height']],
['insert', ['link']],
['misc', ['picture', 'fullscreen', 'codeview', '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',
),
'css_for_inplace': (
'//cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/theme/base16-dark.min.css',
),
'codemirror': {
'theme': 'base16-dark',
'mode': 'htmlmixed',
'lineNumbers': 'true',
},
'lazy': False,
}
SUMMERNOTE_THEME = 'bs4'
X_FRAME_OPTIONS = 'SAMEORIGIN'
I have no idea on how or where to write my code for changing the default font.
I would really appreciate your help. Thanks. :)
There is nothing to do with django-summernote. You need to check and initialize the default font-family in your css style or html file. Also, you probably need to check what to display in the dropdown, check the fontNames option
SUMMERNOTE_CONFIG = {
'summernote': {
'fontNames': [...],
},
}
Adding more fonts to the list can be done by:
SUMMERNOTE_CONFIG = {
'summernote': {
'fontNames': ['Spectral', 'Quicksand'],
'fontNamesIgnoreCheck': ['Spectral', 'Quicksand'],
},
}
Summernote tests for fonts in fontNames before adding them to
dropdown. This is a problem while using web fonts. It’s not easy
picking a nice time to check the availability of web fonts. You can
define a list of web fonts to be ignored with the
fontNamesIgnoreCheck.
Reference: https://summernote.org/deep-dive/#custom-fontnames
You shouldn't worry about that. Copy and paste text in any format in the editor, summernote will accept and adjust.
I am puzzled by the problem for 2 days. Any tips are appreciated.
A very simple node-webkit app is created: helloworld.
package.json:
{
"main": "index.html",
"name": "helloworld-demo",
"node-main": "hello.js",
"keywords": [ "demo", "node-webkit" ],
"window": {
"title": "node-webkit demo",
"icon": "link.png",
"toolbar": true,
"frame": false,
"width": 800,
"height": 500,
"position": "mouse",
"min_width": 400,
"min_height": 200,
"max_width": 800,
"max_height": 600
},
"webkit": {
"plugin": true
}
}
index.html:
<html>
<head>
<title>Hello World! </title>
</head>
<body >
<h1>Hello World!</h1>
We are using node.js
</body>
</html>
WebStorm 11 settings as below:
"run" is ok. The app runs normally.
When starting "debug":, the problem string is:
C:\Users\lizhen\Downloads\nwjs-v0.14.5-win-x64\nw.exe --remote-debugging-port=49368 --url=data:text/html;base64,PCFET0NUWVBFIGh0bWw+PHRpdGxlPkxvYWRpbmcgZmlsZTovLy9DOiU1Q1VzZXJzJTVDbGl6aGVuJTVDRG93bmxvYWRzJTVDbm9kZWpzX3dlYmtpdFByYWN0aWNlJTVDaGVsbG93b3JkL2luZGV4Lmh0bWw8L3RpdGxlPg== C:\Users\lizhen\Downloads\nodejs_webkitPractice\helloword
Process finished with exit code -1
I looked into the JetBrains documentation and can't find what caused the problem.
Debugging doesn't work for NW 0.13+. Please follow WEB-18588 for updates
I try to display week numbers but nothing happens
I put weeknumber in the javascript file
$(document).ready(function() {
$('#calendar').fullCalendar({
weekNumbers: true,
height:400,
header: {
left: 'prev,next today, save',
center: 'title',
right: 'month,agendaWeek,agendaDay,agendaFourDay'
},
'defaultView': 'month',
editable: true,
.....
what is this problem ?
Did you import necessary CSS and js for it ?
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
moreover
weekNumbers:
If set to true, week numbers will be displayed in a separate left column in the month/basic views as well as at the top-left corner of the agenda views. See Available views
I have a Dojo Data Grid for displaying contact information that is showing values for only two columns: "model" and "pk". The other columns are blank, probably because the JSON response from the server puts the other name/value pairs inside of "fields":
[{"pk": 1, "model": "accounting.contacts", "fields": {"mail_name": "Andy", "city": "Grand Rapids", "zip": "49546", "country": "US", "state": "MI"}}]
What is the best way to get all my fields to show up in the grid?
Here's the relevant view in Django:
def contacts(request):
json_serializer = serializers.get_serializer("json")()
json_contacts = json_serializer.serialize(Contacts.objects.all(), ensure_ascii=False)
return HttpResponse(json_contacts, mimetype="application/json")
And here's my Dojo page:
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
data-dojo-config="isDebug: true,parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.store.JsonRest");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ObjectStore");
dojo.ready(function(){
objectStore = new dojo.store.JsonRest({target:"/contacts/"});
//alert(objectStore);
dataStore = new dojo.data.ObjectStore({objectStore: objectStore});
//alert(dataStore);
layoutGridContacts = [{
field: 'mail_name',
name: 'Name',
width: '200px'
},
{
field: 'model',
name: 'DB Table',
width: '100px'
...
}];
gridContacts = new dojox.grid.DataGrid({
query: {
name: '*'
},
store: dataStore,
clientSort: true,
structure: layoutGridContacts
}, dojo.byId("containerGridContacts"));
gridContacts.startup();
});
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
<style type="text/css">
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css";
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css";
.dojoxGrid table {margin: 0; } html, body { width: 100%; height: 100%;
margin: 0;}
</style>
</head>
<body class="claro">
<div id="containerGridContacts" style="width: 100%, height: 100%;">
</div>
</body>
Thanks.
This is really a question of, "How do I interact with a javascript object?" Given the JSON in your question, and assuming you assigned it to the variable obj, you could access mail_name with obj[0]['fields']['mail_name'] or using dot notation, obj[0].fields.mail_name. I haven't used Dojo, but I'd wager you just need to set fields.mail_name as the field in layoutGridContacts.
I was able to get the server to produce a JSON response that does not contain nested objects, so the Dojo Store was able to use it. To do this I changed my view to:
def contacts(request):
all_contacts = list(iter(Contacts.objects.values()))
json_contacts = simplejson.dumps(all_contacts)
return HttpResponse(json_contacts, mimetype="application/json")
Use "fields." in front of your field identifier to access the properties inside fields:
layoutGridContacts = [{
field: 'fields.mail_name',
name: 'Name',
width: '200px'
},
...
You can use formatter method to retrieve the data. For your example it will be something like below
{name:"Name",
field: "fields",
width: "20%",
cellStyles:"background-color:#e3690b;",
formatter: function(field){
if(!field){return;}
return field.mail_name;
}
}