diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 785b4ffe1ea..5c798b36d57 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;
@@ -21,11 +20,10 @@
position: fixed;
top: 0;
right: 0;
- z-index: 10;
display: block;
width: 100%;
padding: 2px;
- margin: 0px;
+ margin: 0;
z-index: 10000;
background-color: #414141;
background: -webkit-linear-gradient(#646060, #262626);
@@ -83,6 +81,15 @@
top: 2px;
}
+/* ---- EDITOR BAR ---- */
+table.editorbar-panel {
+ cursor: pointer;
+ width: 100%;
+}
+table.editorbar-panel td.selected {
+ background-color: #b1c9d9;
+}
+
/* ---- SNIPPET EDITOR ---- */
.oe_snippets {
position: fixed;
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index ec009b64ec2..4897ff0c004 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -21,11 +21,10 @@
position: fixed
top: 0
right: 0
- z-index: 10
display: block
width: 100%
padding: 2px
- margin: 0px
+ margin: 0
z-index: 10000
background-color: #414141
background: -webkit-linear-gradient(#646060, #262626)
@@ -73,6 +72,14 @@
position: relative !important
top: +2px
+/* ---- EDITOR BAR ---- */
+
+table.editorbar-panel
+ cursor: pointer
+ width: 100%
+ td.selected
+ background-color: #b1c9d9
+
/* ---- SNIPPET EDITOR ---- */
.oe_snippets
@@ -261,4 +268,4 @@ $remove_color: $icon_close
.oe_remove
color: $remove_color
.oe_seo_suggestion
- cursor: pointer
\ No newline at end of file
+ cursor: pointer
diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index 32e77acedab..3ccd331cc48 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -53,9 +53,69 @@
canUndo: false,
editorFocus: true,
});
-
}
});
+ CKEDITOR.plugins.add( 'tablebutton', {
+ requires: 'panelbutton,floatpanel',
+ init: function( editor ) {
+ var label = "Table";
+
+ editor.ui.add('TableButton', CKEDITOR.UI_PANELBUTTON, {
+ label: label,
+ title: label,
+ // use existing 'table' icon
+ icon: 'table',
+ modes: { wysiwyg: true },
+ editorFocus: true,
+ // panel opens in iframe, @css is CSS file -ed within
+ // frame document, @attributes are set on iframe itself.
+ panel: {
+ css: '/website/static/src/css/editor.css',
+ attributes: { 'role': 'listbox', 'aria-label': label, },
+ },
+
+ onBlock: function (panel, block) {
+ block.autoSize = true;
+ block.element.setHtml(openerp.qweb.render('website.editor.table.panel', {
+ rows: 5,
+ cols: 5,
+ }));
+
+ var $table = $(block.element.$).on('mouseenter', 'td', function (e) {
+ var $e = $(e.target);
+ var y = $e.index() + 1;
+ var x = $e.closest('tr').index() + 1;
+
+ $table
+ .find('td').removeClass('selected').end()
+ .find('tr:lt(' + String(x) + ')')
+ .children().filter(function () { return $(this).index() < y; })
+ .addClass('selected');
+ }).on('click', 'td', function (e) {
+ var $e = $(e.target);
+
+ var table = new CKEDITOR.dom.element(
+ $(openerp.qweb.render('website.editor.table', {
+ rows: $e.closest('tr').index() + 1,
+ cols: $e.index() + 1,
+ }))[0]);
+
+ editor.insertElement(table);
+ setTimeout(function () {
+ var firstCell = new CKEDITOR.dom.element(table.$.rows[0].cells[0]);
+ var range = editor.createRange();
+ range.moveToPosition(firstCell, CKEDITOR.POSITION_AFTER_START);
+ range.select();
+ }, 0);
+ });
+
+ block.element.getDocument().getBody().setStyle('overflow', 'hidden');
+ CKEDITOR.ui.fire('ready', this);
+ },
+ });
+ }
+ });
+
var editor = new website.EditorBar();
var $body = $(document.body);
editor.prependTo($body);
@@ -262,7 +322,7 @@
autoParagraph: false,
filebrowserImageUploadUrl: "/website/attach",
// Support for sharedSpaces in 4.x
- extraPlugins: 'sharedspace,customdialogs',
+ extraPlugins: 'sharedspace,customdialogs,tablebutton',
// Place toolbar in controlled location
sharedSpaces: { top: 'oe_rte_toolbar' },
toolbar: [
@@ -278,7 +338,7 @@
"JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock"
]},{
name: 'special', items: [
- "Image", "Table"
+ "Image", "TableButton"
]},{
name: 'styles', items: [
"Styles"
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 927ad3df66e..5b2673f16d1 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -116,4 +116,16 @@
+
+
+
+
+
+