Christophe MatthieuandAntoine Guenet
f296992317
* Creating a new structure by transforming all the plugins in the
library using the odoo inheritance system. Plugins are easier to
implement with the AbstractPlugin to add Odoo behaviors.
* From now on, the methods of the library (in this case Summernote) can
no longer be called by other modules or files. Only the wysiwyg
widgets can access it, to simplify the updating process. The wysiwyg
object serves as an interface.
* Depending on the options the snippets will be loaded or not, the
editor will be in an iframe or not... all of this is transparent from
the outside.
* Regarding iframes, all controllers related to editing have been
removed: the new API no longer needs them. This speeds up loading,
eases testing and removes complexity for the same
features.
PUBLIC FEATURES
There are several public methods on the Wysiwyg class:
* Wysiwyg.prepare (WidgetParent): returns a deferred resolved when the
library (xml, lazy, assets...) is loaded.
* Wysiwyg.getRange (DOM): returns the range (selection in the dom)
* Wysiwyg.setRange (startNode, startOffset, endNode, endOffset): creates
a range (selection in the dom)
* Wysiwyg.setRangeFromNode (DOM, options) that creates a range from an
element (option available to select all, start or end)
A jQuery selector was added: :o_editable, which indicates whether the
current element is editable. That is, if it is contained in a tag with
the attribute 'contentEditable = "true"' or in a tag with the class
o_editable.
Several methods are also present:
* focusIn: makes a focus and places the cursor at the beginning of the
element
* focusInEnd: makes a focus and places the cursor at the end of the
element
* selectContent: makes a focus and selects the content
HTML FIELD
The HTML field can receive different options:
* style-inline: {boolean} transforms a class into an inline style when
saving and vice versa when reading.
* no-attachment: {boolean} prevents the use of attachments (in media
dialog)
* cssEdit: {xml_id} to use a template containing the css to loaded in
an iframe when editing
* cssReadonly: {xml_id} to use a template containing the css to load
into an iframe when viewing in readonly
* snippets: {xml_id} snippets template (can be used with or without
cssEdit)
* wrapper: {template} qweb static template (containing a tag:
id = "wrapper") that will include the content during editing (removed
on save)
MASS MAILING
A widget was created for mass mailing. There are now two fields:
body_html and body_arch.
body_arch contains the code with the class without conversion into
inline style, useful when editing and one with the inline style that is
visible in readonly mode and sent by email.
Advantage: no spreading errors, able to update css/theme, able to do
more changes when converting to inline style so that a maximum of mail
clients have an impeccable rendering.
Co-authored-by: Antoine Guenet <age@odoo.com>
191 lines
11 KiB
XML
191 lines
11 KiB
XML
<?xml version="1.0" encoding="utf-8"?>
|
|
<odoo>
|
|
|
|
<template id="wysiwyg_iframe_css_assets" name="CSS assets for wysiwyg iframe content">
|
|
<t t-call-assets="web.assets_common" t-js="false"/>
|
|
<t t-call-assets="web.assets_backend" t-js="false"/>
|
|
</template>
|
|
|
|
<template id="wysiwyg" name="Wysiwyg Editor">
|
|
<!-- lib -->
|
|
|
|
<link rel="stylesheet" type="text/css" href="/web_editor/static/lib/summernote/summernote.css"/>
|
|
<link rel="stylesheet" type="text/css" href="/web_editor/static/lib/cropper/css/cropper.css"/>
|
|
|
|
<script type="text/javascript" src="/web_editor/static/lib/summernote/summernote.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/lib/cropper/js/cropper.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/lib/jQuery.transfo.js"/>
|
|
|
|
<!-- integration -->
|
|
|
|
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/wysiwyg_variables.scss"/>
|
|
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/wysiwyg.scss"/>
|
|
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/wysiwyg_iframe.scss"/>
|
|
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/wysiwyg.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/wysiwyg_iframe.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin_registry.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/options.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/translation.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/fonts.js"/>
|
|
|
|
<!-- widgets & plugins -->
|
|
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/widgets/media.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/widgets/dialog.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/widgets/alt_dialog.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/widgets/colorpicker_dialog.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/widgets/crop_dialog.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/widgets/media_dialog.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/widgets/widgets.js"/>
|
|
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/abstract.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/plugins.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/helper.js"/>
|
|
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/toolbar.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/dropzone.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/history.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/table.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/text.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/editor.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/media.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/buttons.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/link.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/font.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/font_buttons.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/keyboard.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/unbreakable.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/transform.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/hint.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/bullet.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/codeview.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/help_dialog.js"/>
|
|
</template>
|
|
|
|
<template id="wysiwyg_snippets" inherit_id="web_editor.wysiwyg" name="Wysiwyg Editor additional snippets">
|
|
<xpath expr="." position="inside">
|
|
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/wysiwyg_variables.scss"/>
|
|
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/wysiwyg_snippets.scss"/>
|
|
|
|
<script type="text/javascript" src="/web_editor/static/lib/nearest/jquery.nearest.js"/>
|
|
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg_snippets/wysiwyg_snippets.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg_snippets/snippets.editor.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/wysiwyg_snippets/snippets.options.js"/>
|
|
</xpath>
|
|
</template>
|
|
|
|
<template id="_assets_primary_variables" inherit_id="web._assets_primary_variables">
|
|
<xpath expr="//link[last()]" position="after">
|
|
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.variables.scss"/>
|
|
</xpath>
|
|
</template>
|
|
|
|
<template id="_assets_secondary_variables" inherit_id="web._assets_secondary_variables">
|
|
<xpath expr="//link" position="before">
|
|
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/secondary_variables.scss"/>
|
|
</xpath>
|
|
</template>
|
|
|
|
<template id="assets_common" inherit_id="web.assets_common" name="Web Editor Common Assets (used in backend interface and website)">
|
|
<xpath expr="script[last()]" position="after">
|
|
<script type="text/javascript" src="/web_editor/static/lib/vkbeautify/vkbeautify.0.99.00.beta.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/src/js/common/ace.js"/>
|
|
<t t-call="web_editor.wysiwyg"/>
|
|
</xpath>
|
|
</template>
|
|
|
|
<template id="_assets_backend_helpers" inherit_id="web._assets_backend_helpers">
|
|
<xpath expr="//link" position="before">
|
|
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/bootstrap_overridden_backend.scss"/>
|
|
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/bootstrap_overridden.scss"/>
|
|
</xpath>
|
|
</template>
|
|
|
|
<template id="assets_backend" inherit_id="web.assets_backend" name="Web Editor Backend Assets (used in backend interface)">
|
|
<xpath expr="link[last()]" position="after">
|
|
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.common.scss"/> <!-- not in common because compiled differently with context -->
|
|
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.backend.scss"/>
|
|
</xpath>
|
|
<xpath expr="script[last()]" position="after">
|
|
<script type="text/javascript" src="/web_editor/static/src/js/backend/field_html.js" />
|
|
<script type="text/javascript" src="/web_editor/static/src/js/backend/convert_inline.js"/>
|
|
</xpath>
|
|
</template>
|
|
|
|
<template id="_assets_frontend_helpers" inherit_id="web._assets_frontend_helpers">
|
|
<xpath expr="//link" position="before">
|
|
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/bootstrap_overridden.scss"/>
|
|
</xpath>
|
|
</template>
|
|
|
|
<template id="assets_frontend" inherit_id="web.assets_frontend" name="Web Editor Frontend Assets (used in public odoo)" priority="15">
|
|
<xpath expr="//link[last()]" position="after">
|
|
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.common.scss"/> <!-- not in common because compiled differently with context -->
|
|
</xpath>
|
|
<xpath expr="//script[last()]" position="after">
|
|
<script type="text/javascript" src="/web_editor/static/src/js/root_widget.js"/>
|
|
</xpath>
|
|
</template>
|
|
|
|
<template id="qunit_suite" inherit_id="web.qunit_suite">
|
|
<xpath expr="." position="inside">
|
|
<script type="text/javascript" src="/web_editor/static/tests/test_utils.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/tests/field_html_tests.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/tests/wysiwyg_tests.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/tests/wysiwyg_keyboard_tests.js"/>
|
|
<script type="text/javascript" src="/web_editor/static/tests/wysiwyg_snippets_tests.js"/>
|
|
</xpath>
|
|
</template>
|
|
|
|
<!--
|
|
The web_editor.colorpicker template regroups section of colorpicker menu for website customization
|
|
(text foreground/background but also snippet background color option).
|
|
As it is presentend below, the colorpicker tag regroups a set of .o_colorpicker_section with name,
|
|
icon-class and icon-content as data. These will be used to build the colorpicker dropdowns.
|
|
|
|
Redefinition can edit section content, add sections or even remove them. If no section is found when
|
|
building a colorpicker dropdown, the template content will be used without changes as the colorpicker
|
|
dropdown content.
|
|
|
|
Sections should contain a set of button with a data-color attribute. When selecting such a button to
|
|
edit style, the "bg-x" class or the "text-x" will be automatically added.
|
|
-->
|
|
<template id="web_editor.colorpicker" name="Color-Picker">
|
|
<colorpicker>
|
|
<div class="o_colorpicker_section" data-name="theme" data-display="Theme Colors" data-icon-class="fa fa-flask">
|
|
<button data-color="alpha"></button>
|
|
<button data-color="beta"></button>
|
|
<button data-color="gamma"></button>
|
|
<button data-color="delta"></button>
|
|
<button data-color="epsilon"></button>
|
|
</div>
|
|
<div class="o_colorpicker_section" data-name="transparent_grayscale" data-display="Transparent Colors" data-icon-class="fa fa-eye-slash">
|
|
<button class="o_btn_transparent"></button>
|
|
<button data-color="black-25"></button>
|
|
<button data-color="black-50"></button>
|
|
<button data-color="black-75"></button>
|
|
<button data-color="white-25"></button>
|
|
<button data-color="white-50"></button>
|
|
<button data-color="white-75"></button>
|
|
</div>
|
|
<div class="o_colorpicker_section" data-name="common" data-display="Common Colors" data-icon-class="fa fa-paint-brush">
|
|
<button data-color="black"></button>
|
|
<button data-color="white"></button>
|
|
<div class="clearfix"/>
|
|
<button data-color="900"></button>
|
|
<button data-color="800"></button>
|
|
<button data-color="700"></button>
|
|
<button data-color="600"></button>
|
|
<button data-color="500"></button>
|
|
<button data-color="400" class="d-none"></button><!-- Hide this one to be able to use it but not display it -->
|
|
<button data-color="300"></button>
|
|
<button data-color="200"></button>
|
|
<button data-color="100"></button>
|
|
</div>
|
|
</colorpicker>
|
|
</template>
|
|
</odoo>
|