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.
Related
I am building a web application using the Django framework and installed Tailwind CSS using this tutorial: https://django-tailwind.readthedocs.io/en/latest/installation.html. It worked fine initially, but now when I reload my project after closing VScode, my colors stop working.
For an example,
I'll be creating a new line of HTML and use:
<body>
<div class="bg-blue-400 font-bold p-4 text-4xl">
<h1>Hello</h1>
</div>
</body>
and the background just goes immediately to white. I have tried uninstalling/reinstalling and checking my directories and still have no solution.
I have also found that only my custom colors work when I reload my project.
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
'../templates/**/*.html',
'../../templates/**/*.html',
'../../**/templates/**/*.html',
],
theme: {
extend: {
colors: {
'jcblue1': '#5CB5FD',
'spook': '#3C4856',
}
},
},
plugins: [],
}
^this is my tailwind.config file.
I am really new to JSS and I am very confused by the docs and how Sitecore is supposed to assemble layout information. I am trying to retrieve layout information of an item using JSS for one of our MVC project. The item in question renders fine in the browser using our traditionnal MVC stack. However I am unable to retrieve layout information of that item using JSS.
The item in question is based on the standard template and has the following presentation/layout details:
The layout points to a cshtml file.
The cshtml file contains the HTML layout, and a placeholder rendered using #Html.Sitecore().Placeholder("Menu")
The content of the placeholder is defined in Sitecore Layout Details dialog using a control/rendering named "Menu".
The rendering "Menu" points to a controller named Web.Controllers.MenuController and action named GetMenu
Content of the cshtml file:
#using Sitecore.Mvc
<main id="main" class="content group advise-area" role="main">
<div class="inner inner-carousel advise-area-content">
<div class="row">
<div class="col-2-2">
#Html.Sitecore().Placeholder("Menu")
</div>
<div class="col-2-2">
#Html.Raw(Model.Content)
</div>
</div>
</div>
</main>
When retrieving the layout information of the item using the render endpoint (/sitecore/api/layout/render/jss?item={item_id}&...). I get the fields values of the item, but I do not get any presentation details nor placeholder information.
{
"sitecore": {
"context": {
"pageEditing": false,
"site": {
"name": null
},
"pageState": "normal",
"language": "fr",
"itemPath": "/my-item"
},
"route": {
"name": "prendre-route-securite",
"displayName": "prendre-la-route-en-toute-securite",
"fields": {"Content": {"value": "My Content"}},
"databaseName": "web",
"deviceId": "fe5d7fdf-89c0-4d99-9aa3-b5fbd009c9f3",
"itemId": "85cac673-2cfb-496c-ba62-0f1d634ae241",
"itemLanguage": "fr",
"itemVersion": 1,
"layoutId": "b39337a1-8bb5-44c3-ba97-0dce8ef517f6",
"templateId": "34c34e2b-f2ac-405f-afb3-d0185bc936bb",
"templateName": "ArticleZoneConseils",
"placeholders": {}
}
}
}
The documentation says I am supposed to put some values inside the Layout Service Placeholders field of the layout. But I have no clue of what I should put in there to get the placeholder data showing in the REST query.
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.
I would enjoy your help on two points :
First, I am creating some default page's templates like :
"Home.html, work-with-us.html" etc.
My aim is to simplify the work of people who will be in charge of the website. They don't have to learn how to manage plugin inside placeholder.
Thus, I created some placeholder like this , example for "workwithus.html" :
{% extends "base.html" %}
{% load cms_tags staticfiles sekizai_tags menu_tags %}
{% block content %}
<div class="container">
<div class="col-xs-12">
{% placeholder "image-full" %}
</div>
<div class="col-md-12">
{% placeholder "text-platform" %}
</div>
</div>
{% endblock content %}
And I managed the plugins this way :
CMS_PLACEHOLDER_CONF = {
'image-full': {
'plugins': ['FilerImagePlugin'],
'name': gettext("Image full page"),
'default_plugins': [
{
'plugin_type': 'FilerImagePlugin',
'values': {
},
},
],
'limits': {
'global': 1,
'FilerImagePlugin': 1,
},
},
etc
The problem is that, I can't use multiple time the same placeholder in the same template. It would be so nice if, when I make a placeholder "img-full-width" I could be able to call it several times.
Do you have any idea about it ? A way to make it more proper than creating "img-full-2", "img-full-3" etc.
Second question :
Is it possible to add more than one default_plugins ? It really annoy me...
Thank you very much in advance guys !
You can have as many plugins as you like as default_plugins
See http://django-cms.readthedocs.org/en/support-3.0.x/reference/configuration.html#placeholder-default-plugins
You can specify the list of default plugins which will be
automagically added when the placeholder will be created (or
rendered).
If you are annoyed with having to redefine CMS_PLACEHOLDER_CONF for each placeholder, you can always define a common config before the CMS_PLACEHOLDER_CONF block:
img_fullwidth_conf = {
'plugins': ['FilerImagePlugin', 'TextPlugin'],
'name': gettext("Image full page"),
'default_plugins': [
{
'plugin_type': 'FilerImagePlugin',
'values': {
},
},
{
'plugin_type': 'TextPlugin',
'values': {
'body': '<p>Write here...</p>'
},
},
],
}
CMS_PLACEHOLDER_CONF = {
'img-full-1': img_fullwidth_conf,
'img-full-2': img_fullwidth_conf,
'img-full-3': img_fullwidth_conf,
}
Can I and should i pass arrays to components in ember?
For example if I wanted to template something that renders a couple of radiobuttons with labels:
<label for="media">Media</label><input type="radio" name="entry.1602323871" value="media" id="media" />
<label for="guest">Guest</label><input type="radio" name="entry.1602323871" value="guest" id="guest" />
Could I somehow pass an array with this content and loop through it.
Media, media
Guest, guest
Yeah, You can pass anything to components. Just a try to the radio-buttons
//Basic radio Component
App.RadioButton = Ember.Component.extend({
tagName : "input",
type : "radio",
attributeBindings : [ "name", "type", "value", "checked:checked" ],
click : function() {
this.set("selection", this.$().val());
},
checked : function() {
return this.get("value") === this.get("selection");
}.property('selection')
});
Em.Handlebars.helper('radio-button',App.RadioButton);
Updated (component name should be dasherized)
Working Radio Demo
It's now a tiny bit easier to get radio-buttons into your project (if you're using ember-cli) by using the ember-radio-buttons addon
Install:
npm install ember-radio-buttons --save-dev
Usage:
{{radio-button value='one' checked=selectedNumber}}
{{radio-button value='two' checked=selectedNumber}}
Upped #selva-G's answer.
I found that using the ButtonGroup Component from Bootstrap-for-Ember is actually cleaner.
Here's what I've done:
In my view's template:
<script type="text/x-handlebars" data-template-name="myview">
{{bs-btn-group contentBinding="things" selectedBinding="selectedThing"}}
</script>
In that view's controller (which doesn't necessarily need to be an ArrayController, rather can be a generic Ember Controller):
App.MyviewController = Ember.ArrayController.extend({
things: [
Ember.Object.create({value: 'first', title: 'First Thing'}),
Ember.Object.create({value: 'second', title: 'Second Thing'}),
Ember.Object.create({value: 'third', title: 'Third Thing'})
],
selectedThing: 'second'
selection: function() {
console.log(this.get('selectedThing');
}.observes('selectedThing')
});