Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:
Hello,
I don't find this one anywhere, must be some mean to add a custom font size to the HTML widget web editor. Default sizes are 'Default, 8, 9, 10, 11, 12, 14, 18', what if I want size 16 ?.
I believe the answer to this question would give me the answer to the next which is how to customize styles of the web editor.
Thanks for your help
Regards
V.
I know is an old post but the solution is to change the inherit_id with value web_editor.summernote. I implemented this to Odoo 9 and the extra values for font sizes are rendered well.
In Odoo v13 : in the above mentioned file: resources.xml : use inherit_id="web_editor.assets_wysiwyg"
As of v16 the answer is simpler:
In __manifest__.py add a new xml file to the "website.assets_wysiwyg" part:
"assets": {
"website.assets_wysiwyg": [
"my_addon/static/src/xml/web_editor_fontsizes.xml"
],
}
Then in this new file web_editor_fontsizes.xml:
xml version="1.0" encoding="UTF-8"?>
<templates>
<t t-extend="web_editor.toolbar">
<xpath t-jquery="div#font-size>ul>li:has(>a[data-arg1=18px])" t-operation="after">
<li><a class="dropdown-item" href="#" data-call="setFontSize" data-arg1="20px">20a>li> xpath>
t>
templates>
That adds an option of size 20 font after the 18 size one.
That XML code got really messed up and I get an error trying to edit it:
<templates>
<t t-extend="web_editor.toolbar">
<xpath t-jquery="div#font-size>ul>li:has(>a[data-arg1=18px])" t-operation="after">
<li><a class="dropdown-item" href="#" data-call="setFontSize" data-arg1="20px">20</a></li>
</xpath>
</t>
</templates>
Créez un compte dès aujourd'hui pour profiter de fonctionnalités exclusives et échanger avec notre formidable communauté !
S'inscrire| Publications associées | Réponses | Vues | Activité | |
|---|---|---|---|---|
|
17
oct. 18
|
33542 | ||
|
2
sept. 25
|
613 | ||
|
0
nov. 23
|
2306 | ||
|
0
janv. 22
|
3776 | ||
|
1
oct. 21
|
11572 |
1. Use the live chat to ask your questions.
2. The operator answers within a few minutes.
To do so, you'll have to build a module which inherits the Odoo web editor which is Summernote.
1- In your module Views folder, add a resources.xml file :
<?xml version="1.0" encoding="utf-8" ?>
<odoo>
<template id="summernote" name="My summernote assets" inherit_id="web_editor.assets_editor">
<xpath expr="//script[last()]" position="after">
<script type="text/javascript" src="/ModuleName/static/src/js/summernote_overrides.js"></script>
</xpath>
</template>
</odoo>
2- In your module /static/src/js/ directory, add a summernote_overrides.js file :
odoo.define('web_editor.summernote_override', function (require) {
'use strict';
var core = require('web.core');
var editor = require('web_editor.summernote');
require('summernote/summernote'); // wait that summernote is loaded
var _t = core._t;
var options = $.summernote.options;
// disable some editor features
// XXX: this is not working, unfortunately but `options.styleTags` below is. weird :S
options.toolbar = [
['font', ['bold', 'italic', 'underline', 'superscript', 'clear']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['insert', ['link', 'picture', 'hr']],
['view', ['fullscreen', 'codeview']],
['help', ['help']],
['height', ['height']]
];
// limit style tags
options.styleTags = ['p', 'blockquote'];
options.fontSizes = [_t('Default'), 8, 9, 10, 11, 12, 13, 14, 16, 18, 24, 36, 48, 62];
return $.summernote;
});
3 - reference you first file in your __manifest__.py file so that it gets loaded.
'data': [
'views/blabla_view.xml',
'views/another_view.xml',
'views/resources.xml',
],
4 - Update your module in the Applications section.
Unfortunately the toolbar section doesn't work, only Styles et Font size are ok.
If anyone knows the solution that would be greatly appreciated.
V.