diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index d2c3f9da9c9..834baff3e35 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -1,4 +1,3 @@ -@charset "utf-8"; /* ---- CKEditor Minimal Reset ---- */ .navbar.navbar-inverse .cke_chrome { border: none; @@ -95,7 +94,7 @@ table.editorbar-panel td.selected { background-color: #b1c9d9; } -.modal .image-preview { +.modal .image-preview-container, .modal .image-preview { margin-bottom: 0.5em; } diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index 7f9f646f054..3c1fe6a47f5 100644 --- a/addons/website/static/src/css/editor.sass +++ b/addons/website/static/src/css/editor.sass @@ -83,7 +83,7 @@ table.editorbar-panel td.selected background-color: #b1c9d9 -.modal .image-preview +.modal .image-preview-container, .modal .image-preview margin-bottom: 0.5em /* ---- RTE ---- */ diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js index c3880385f09..4bc6d290510 100644 --- a/addons/website/static/src/js/website.editor.js +++ b/addons/website/static/src/js/website.editor.js @@ -552,14 +552,26 @@ }, 'change input[type=file]': 'file_selection', 'change input.url': 'preview_image', + 'change select.image-style': 'preview_image', 'click .existing-attachments a': 'select_existing', }), start: function () { var selection = this.editor.getSelection(); var el = selection && selection.getSelectedElement(); this.element = null; + + var $select = this.$('.image-style'); + var $options = $select.children(); + this.image_styles = $options.map(function () { return this.value; }).get(); + if (el && el.is('img')) { this.element = el; + _(this.image_styles).each(function (style) { + if (el.hasClass(style)) { + $select.val(style); + } + }); + // set_image should follow setup of image style this.set_image(el.getAttribute('src')); } @@ -569,6 +581,7 @@ }, save: function () { var url = this.$('input.url').val(); + var style = this.$('.image-style').val(); var element, editor = this.editor; if (!(element = this.element)) { element = editor.document.createElement('img'); @@ -582,7 +595,10 @@ }, 0); } element.setAttribute('src', url); - this._super(); + $(element.$).removeClass(this.image_styles.join(' ')); + if (style) { element.addClass(style); } + + return this._super(); }, /** @@ -620,7 +636,10 @@ var image = this.$('input.url').val(); if (!image) { return; } - this.$('img.image-preview').attr('src', image); + this.$('img.image-preview') + .attr('src', image) + .removeClass(this.image_styles.join(' ')) + .addClass(this.$('select.image-style').val()); }, fetch_existing: function () { diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml index e3a49b26af7..9b8ecc886ab 100644 --- a/addons/website/static/src/xml/website.editor.xml +++ b/addons/website/static/src/xml/website.editor.xml @@ -76,10 +76,16 @@ Image:
-
+
+