From d8792fc1a9c6b759100b96f91942283250d0f511 Mon Sep 17 00:00:00 2001
From: Xavier Morel <xmo@openerp.com>
Date: Wed, 24 Jul 2013 14:36:26 +0200
Subject: [PATCH 3/9] [ADD] basic ckeditor integration

bzr revid: xmo@openerp.com-20130724123626-c220vibm5mvukudv
---
 addons/website/static/src/js/website.js | 27 +++++++++++++++++++++----
 addons/website/views/views.xml          |  5 +++++
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index 34c866cc3b9..2ed9d0197f1 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -1,4 +1,7 @@
 openerp.website = function(instance) {
+var block = ['section', 'div'];
+var block_inline = ['p', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+var terminal = block.concat(block_inline).join(', ');
 
 instance.website.EditorBar = instance.web.Widget.extend({
     template: 'Website.EditorBar',
@@ -13,7 +16,7 @@ instance.website.EditorBar = instance.web.Widget.extend({
         var self = this;
         this.saving_mutex = new $.Mutex();
         self.$('button[data-action]').prop('disabled', true);
-        self.$('button[data-action=edit],button[data-action=snippet]').prop('disabled', false);
+        self.$('button[data-action=edit], button[data-action=snippet]').prop('disabled', false);
         self.snippet_start();
 
         $('body').on("keypress", ".oe_editable", function(e) {
@@ -33,7 +36,20 @@ instance.website.EditorBar = instance.web.Widget.extend({
     },
     edit: function () {
         this.$('button[data-action=edit]').prop('disabled', true);
-        $('[data-oe-model]').prop('contentEditable', true).addClass('oe_editable');
+        var $root = $('[data-oe-model]');
+        $root.add($root.find(terminal))
+            .not('link, script, span')
+            .not(':has(' + terminal + ')')
+            .prop('contentEditable', true)
+            .addClass('oe_editable')
+            .each(function () {
+                CKEDITOR.inline(this, {
+                    // Don't load ckeditor's style rules
+                    stylesSet: [],
+                    toolbar: 'Basic',
+                    customConfig: '',
+                });
+            });
     },
     save: function () {
         var self = this;
@@ -62,9 +78,12 @@ instance.website.EditorBar = instance.web.Widget.extend({
         var xpath = data.oeXpath;
         if (xpath) {
             var $w = $el.clone();
-            $w.removeClass('aloha-editable aloha-editable-highlight oe_dirty');
+            $w.removeClass('oe_dirty');
             _.each(['model', 'id', 'field', 'xpath'], function(d) {$w.removeAttr('data-oe-' + d);});
-            $w.prop('contentEditable', false).removeClass('oe_editable');
+            $w
+                .each(function () { console.log(this); })
+                .removeClass('oe_editable')
+                .prop('contentEditable', false);
             html = $w.wrap('<div>').parent().html();
         }
         return (new instance.web.DataSet(this, 'ir.ui.view')).call('save', [data.oeModel, data.oeId, data.oeField, html, xpath]);
diff --git a/addons/website/views/views.xml b/addons/website/views/views.xml
index 572aa5f1c3e..d55fe182c32 100644
--- a/addons/website/views/views.xml
+++ b/addons/website/views/views.xml
@@ -63,6 +63,11 @@
                         <link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700' rel='stylesheet' type='text/css'/>
 
                         <script type="text/javascript" src="/web/static/lib/jquery/jquery-1.8.3.js"></script>
+                        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.2/ckeditor.js"></script>
+                        <script type="text/javascript">
+                            CKEDITOR.disableAutoInline = true;
+                            CKEDITOR.dtd.$editable.li = 1;
+                        </script>
 
                         <t t-if="editable">
                             <t t-raw="css"/>

From 5c20973bf9c191fa694ce682ba90117e575deda9 Mon Sep 17 00:00:00 2001
From: Xavier Morel <xmo@openerp.com>
Date: Wed, 24 Jul 2013 14:54:35 +0200
Subject: [PATCH 4/9] [IMP] disable ACF to fix ckeditor removing nodes and
 classes, breaking layout and styling

bzr revid: xmo@openerp.com-20130724125435-02c8j92p0tq894nq
---
 addons/website/static/src/js/website.js | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index 2ed9d0197f1..34805db6fbd 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -1,8 +1,4 @@
 openerp.website = function(instance) {
-var block = ['section', 'div'];
-var block_inline = ['p', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-var terminal = block.concat(block_inline).join(', ');
-
 instance.website.EditorBar = instance.web.Widget.extend({
     template: 'Website.EditorBar',
     events: {
@@ -36,18 +32,19 @@ instance.website.EditorBar = instance.web.Widget.extend({
     },
     edit: function () {
         this.$('button[data-action=edit]').prop('disabled', true);
-        var $root = $('[data-oe-model]');
-        $root.add($root.find(terminal))
+        $('[data-oe-model]')
             .not('link, script, span')
-            .not(':has(' + terminal + ')')
             .prop('contentEditable', true)
             .addClass('oe_editable')
             .each(function () {
                 CKEDITOR.inline(this, {
                     // Don't load ckeditor's style rules
                     stylesSet: [],
-                    toolbar: 'Basic',
+                    // toolbar: TODO,
+                    // Ensure no config file is loaded
                     customConfig: '',
+                    // Disable ACF
+                    allowedContent: true,
                 });
             });
     },

From f3aabcc2560ecd29c06586761aa6aa46f829e271 Mon Sep 17 00:00:00 2001
From: Xavier Morel <xmo@openerp.com>
Date: Wed, 24 Jul 2013 16:48:51 +0200
Subject: [PATCH 5/9] [ADD] fixed toolbar positioning for ckeditor

bzr revid: xmo@openerp.com-20130724144851-40f69hkuantjbgtg
---
 .../static/lib/ckeditor.sharedspace/plugin.js | 124 ++++++++++++++++++
 addons/website/static/src/js/website.js       |   9 +-
 addons/website/static/src/xml/website.xml     |   1 +
 addons/website/views/views.xml                |   1 +
 4 files changed, 134 insertions(+), 1 deletion(-)
 create mode 100644 addons/website/static/lib/ckeditor.sharedspace/plugin.js

diff --git a/addons/website/static/lib/ckeditor.sharedspace/plugin.js b/addons/website/static/lib/ckeditor.sharedspace/plugin.js
new file mode 100644
index 00000000000..ae8ddc79eb4
--- /dev/null
+++ b/addons/website/static/lib/ckeditor.sharedspace/plugin.js
@@ -0,0 +1,124 @@
+/**
+ * @license Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+(function() {
+
+	'use strict';
+
+	var containerTpl = CKEDITOR.addTemplate( 'sharedcontainer', '<div' +
+		' id="cke_{name}"' +
+		' class="cke {id} cke_reset_all cke_chrome cke_editor_{name} cke_shared cke_detached cke_{langDir} ' + CKEDITOR.env.cssClass + '"' +
+		' dir="{langDir}"' +
+		' title="' + ( CKEDITOR.env.gecko ? ' ' : '' ) + '"' +
+		' lang="{langCode}"' +
+		' role="presentation"' +
+		'>' +
+			'<div class="cke_inner">' +
+				'<div id="{spaceId}" class="cke_{space}" role="presentation">{content}</div>' +
+			'</div>' +
+		'</div>' );
+
+	CKEDITOR.plugins.add( 'sharedspace', {
+		afterInit: function( editor ) {
+			var spaces = editor.config.sharedSpaces;
+
+			if ( spaces ) {
+				for ( var spaceName in spaces ) {
+					create( editor, spaceName, spaces[ spaceName ] );
+				}
+			}
+		}
+	});
+
+	function create( editor, spaceName, targetId ) {
+		var target = CKEDITOR.document.getById( targetId ),
+			innerHtml, space;
+
+		if ( target ) {
+			// Have other plugins filling the space.
+			innerHtml = editor.fire( 'uiSpace', { space: spaceName, html: '' } ).html;
+
+			if ( innerHtml ) {
+				// Block the uiSpace handling by others (e.g. themed-ui).
+				editor.on( 'uiSpace', function( ev ) {
+					if ( ev.data.space == spaceName )
+						ev.cancel();
+				}, null, null, 1 );  // Hi-priority
+
+				// Inject the space into the target.
+				space = target.append( CKEDITOR.dom.element.createFromHtml( containerTpl.output({
+					id: editor.id,
+					name: editor.name,
+					langDir: editor.lang.dir,
+					langCode: editor.langCode,
+					space: spaceName,
+					spaceId: editor.ui.spaceId( spaceName ),
+					content: innerHtml
+				})));
+
+				// Only the first container starts visible. Others get hidden.
+				if ( target.getCustomData( 'cke_hasshared' ) )
+					space.hide();
+				else
+					target.setCustomData( 'cke_hasshared', 1 );
+
+				// There's no need for the space to be selectable.
+				space.unselectable();
+
+				// Prevent clicking on non-buttons area of the space from blurring editor.
+				space.on( 'mousedown', function( evt ) {
+					evt = evt.data;
+					if ( !evt.getTarget().hasAscendant( 'a', 1 ) )
+						evt.preventDefault();
+				});
+
+				// Register this UI space to the focus manager.
+				editor.focusManager.add( space, 1 );
+
+				// When the editor gets focus, show the space container, hiding others.
+				editor.on( 'focus', function() {
+					for ( var i = 0, sibling, children = target.getChildren(); ( sibling = children.getItem( i ) ); i++ ) {
+						if ( sibling.type == CKEDITOR.NODE_ELEMENT &&
+							!sibling.equals( space ) &&
+							sibling.hasClass( 'cke_shared' ) ) {
+							sibling.hide();
+						}
+					}
+
+					space.show();
+				});
+
+				editor.on( 'destroy', function() {
+					space.remove();
+				});
+			}
+		}
+	}
+})();
+
+/**
+ * Makes it possible to place some of the editor UI blocks, like the toolbar
+ * and the elements path, into any element in the page.
+ *
+ * The elements used to hold the UI blocks can be shared among several editor
+ * instances. In that case, only the blocks of the active editor instance will
+ * display.
+ *
+ *		// Place the toolbar inside the element with ID "someElementId" and the
+ *		// elements path into the element with ID "anotherId".
+ *		config.sharedSpaces = {
+ *			top: 'someElementId',
+ *			bottom: 'anotherId'
+ *		};
+ *
+ *		// Place the toolbar inside the element with ID "someElementId". The
+ *		// elements path will remain attached to the editor UI.
+ *		config.sharedSpaces = {
+ *			top: 'someElementId'
+ *		};
+ *
+ * @cfg {Object} [sharedSpaces]
+ * @member CKEDITOR.config
+ */
diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index 34805db6fbd..84f0cc70767 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -40,11 +40,18 @@ instance.website.EditorBar = instance.web.Widget.extend({
                 CKEDITOR.inline(this, {
                     // Don't load ckeditor's style rules
                     stylesSet: [],
-                    // toolbar: TODO,
+                    toolbar: [
+                        ['Bold', 'Italic']
+                    ],
+                    uiColor: '',
                     // Ensure no config file is loaded
                     customConfig: '',
                     // Disable ACF
                     allowedContent: true,
+                    // Support for sharedSpaces in 4.x
+                    extraPlugins: 'sharedspace',
+                    // Place toolbar in controlled location
+                    sharedSpaces: { top: 'oe_rte_toolbar' },
                 });
             });
     },
diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml
index 1754b7b81b6..8715a74184a 100644
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -9,6 +9,7 @@
         <li class="oe_right"><button data-action="cancel">Cancel</button></li>
         <li class="oe_right"><button data-action="snippet">Snippet</button></li>
         <li class="oe_right"><button data-action="edit">Edit</button></li>
+        <li class="oe_right" id="oe_rte_toolbar"></li>
     </ul>
 </t>
 </templates>
diff --git a/addons/website/views/views.xml b/addons/website/views/views.xml
index d55fe182c32..a79dd04df4f 100644
--- a/addons/website/views/views.xml
+++ b/addons/website/views/views.xml
@@ -64,6 +64,7 @@
 
                         <script type="text/javascript" src="/web/static/lib/jquery/jquery-1.8.3.js"></script>
                         <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.2/ckeditor.js"></script>
+                        <script type="text/javascript" src="/website/static/lib/ckeditor.sharedspace/plugin.js"></script>
                         <script type="text/javascript">
                             CKEDITOR.disableAutoInline = true;
                             CKEDITOR.dtd.$editable.li = 1;

From 7d59a7355fae088ba32dfbd321fb103e175a9330 Mon Sep 17 00:00:00 2001
From: Xavier Morel <xmo@openerp.com>
Date: Thu, 25 Jul 2013 16:55:05 +0200
Subject: [PATCH 6/9] [IMP] remove sharedspace plugin, disable ckeditor's own
 toolbar, build toolbar from scratch

bzr revid: xmo@openerp.com-20130725145505-sb8ul41fd3nfmhwc
---
 .../static/lib/ckeditor.sharedspace/plugin.js | 124 ----------------
 addons/website/static/src/js/website.js       | 140 +++++++++++++-----
 addons/website/static/src/xml/website.xml     |   1 -
 addons/website/views/views.xml                |   1 -
 4 files changed, 100 insertions(+), 166 deletions(-)
 delete mode 100644 addons/website/static/lib/ckeditor.sharedspace/plugin.js

diff --git a/addons/website/static/lib/ckeditor.sharedspace/plugin.js b/addons/website/static/lib/ckeditor.sharedspace/plugin.js
deleted file mode 100644
index ae8ddc79eb4..00000000000
--- a/addons/website/static/lib/ckeditor.sharedspace/plugin.js
+++ /dev/null
@@ -1,124 +0,0 @@
-/**
- * @license Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or http://ckeditor.com/license
- */
-
-(function() {
-
-	'use strict';
-
-	var containerTpl = CKEDITOR.addTemplate( 'sharedcontainer', '<div' +
-		' id="cke_{name}"' +
-		' class="cke {id} cke_reset_all cke_chrome cke_editor_{name} cke_shared cke_detached cke_{langDir} ' + CKEDITOR.env.cssClass + '"' +
-		' dir="{langDir}"' +
-		' title="' + ( CKEDITOR.env.gecko ? ' ' : '' ) + '"' +
-		' lang="{langCode}"' +
-		' role="presentation"' +
-		'>' +
-			'<div class="cke_inner">' +
-				'<div id="{spaceId}" class="cke_{space}" role="presentation">{content}</div>' +
-			'</div>' +
-		'</div>' );
-
-	CKEDITOR.plugins.add( 'sharedspace', {
-		afterInit: function( editor ) {
-			var spaces = editor.config.sharedSpaces;
-
-			if ( spaces ) {
-				for ( var spaceName in spaces ) {
-					create( editor, spaceName, spaces[ spaceName ] );
-				}
-			}
-		}
-	});
-
-	function create( editor, spaceName, targetId ) {
-		var target = CKEDITOR.document.getById( targetId ),
-			innerHtml, space;
-
-		if ( target ) {
-			// Have other plugins filling the space.
-			innerHtml = editor.fire( 'uiSpace', { space: spaceName, html: '' } ).html;
-
-			if ( innerHtml ) {
-				// Block the uiSpace handling by others (e.g. themed-ui).
-				editor.on( 'uiSpace', function( ev ) {
-					if ( ev.data.space == spaceName )
-						ev.cancel();
-				}, null, null, 1 );  // Hi-priority
-
-				// Inject the space into the target.
-				space = target.append( CKEDITOR.dom.element.createFromHtml( containerTpl.output({
-					id: editor.id,
-					name: editor.name,
-					langDir: editor.lang.dir,
-					langCode: editor.langCode,
-					space: spaceName,
-					spaceId: editor.ui.spaceId( spaceName ),
-					content: innerHtml
-				})));
-
-				// Only the first container starts visible. Others get hidden.
-				if ( target.getCustomData( 'cke_hasshared' ) )
-					space.hide();
-				else
-					target.setCustomData( 'cke_hasshared', 1 );
-
-				// There's no need for the space to be selectable.
-				space.unselectable();
-
-				// Prevent clicking on non-buttons area of the space from blurring editor.
-				space.on( 'mousedown', function( evt ) {
-					evt = evt.data;
-					if ( !evt.getTarget().hasAscendant( 'a', 1 ) )
-						evt.preventDefault();
-				});
-
-				// Register this UI space to the focus manager.
-				editor.focusManager.add( space, 1 );
-
-				// When the editor gets focus, show the space container, hiding others.
-				editor.on( 'focus', function() {
-					for ( var i = 0, sibling, children = target.getChildren(); ( sibling = children.getItem( i ) ); i++ ) {
-						if ( sibling.type == CKEDITOR.NODE_ELEMENT &&
-							!sibling.equals( space ) &&
-							sibling.hasClass( 'cke_shared' ) ) {
-							sibling.hide();
-						}
-					}
-
-					space.show();
-				});
-
-				editor.on( 'destroy', function() {
-					space.remove();
-				});
-			}
-		}
-	}
-})();
-
-/**
- * Makes it possible to place some of the editor UI blocks, like the toolbar
- * and the elements path, into any element in the page.
- *
- * The elements used to hold the UI blocks can be shared among several editor
- * instances. In that case, only the blocks of the active editor instance will
- * display.
- *
- *		// Place the toolbar inside the element with ID "someElementId" and the
- *		// elements path into the element with ID "anotherId".
- *		config.sharedSpaces = {
- *			top: 'someElementId',
- *			bottom: 'anotherId'
- *		};
- *
- *		// Place the toolbar inside the element with ID "someElementId". The
- *		// elements path will remain attached to the editor UI.
- *		config.sharedSpaces = {
- *			top: 'someElementId'
- *		};
- *
- * @cfg {Object} [sharedSpaces]
- * @member CKEDITOR.config
- */
diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index 84f0cc70767..5fb341d1f32 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -1,4 +1,5 @@
 openerp.website = function(instance) {
+var _lt = instance.web._lt;
 instance.website.EditorBar = instance.web.Widget.extend({
     template: 'Website.EditorBar',
     events: {
@@ -8,52 +9,39 @@ instance.website.EditorBar = instance.web.Widget.extend({
         'click button[data-action=snippet]': 'snippet',
     },
     container: 'body',
+    init: function () {
+        this._super.apply(this, arguments);
+        this.saving_mutex = new $.Mutex();
+    },
     start: function() {
         var self = this;
-        this.saving_mutex = new $.Mutex();
-        self.$('button[data-action]').prop('disabled', true);
-        self.$('button[data-action=edit], button[data-action=snippet]').prop('disabled', false);
+
+        this.$('button[data-action]').prop('disabled', true);
+        this.$buttons = {
+            edit: this.$('button[data-action=edit]'),
+            save: this.$('button[data-action=save]'),
+            cancel: this.$('button[data-action=cancel]'),
+            snippet: this.$('button[data-action=snippet]'),
+        };
+        this.$buttons.edit.add(this.$buttons.snippet).prop('disabled', false);
+
         self.snippet_start();
 
-        $('body').on("keypress", ".oe_editable", function(e) {
-            var $e = $(e.currentTarget);
-            if (!$e.is('.oe_dirty')) {
-                $e.addClass('oe_dirty');
-                self.$('button[data-action=save],button[data-action=cancel]').prop('disabled', false);
-                // TODO: Are we going to use a meta-data flag in order to know if the field shall be text or html ?
-            }
-            if (e.which == 13) {
-                $e.blur();
-                e.preventDefault();
-            }
-        });
+        this.rte = new instance.website.RTE(this);
+        this.rte.on('change', this, this.proxy('rte_changed'));
 
-        return this._super.apply(this, arguments);
+        return $.when(
+            this._super.apply(this, arguments),
+            this.rte.appendTo(this.$el)
+        );
     },
     edit: function () {
-        this.$('button[data-action=edit]').prop('disabled', true);
-        $('[data-oe-model]')
-            .not('link, script, span')
-            .prop('contentEditable', true)
-            .addClass('oe_editable')
-            .each(function () {
-                CKEDITOR.inline(this, {
-                    // Don't load ckeditor's style rules
-                    stylesSet: [],
-                    toolbar: [
-                        ['Bold', 'Italic']
-                    ],
-                    uiColor: '',
-                    // Ensure no config file is loaded
-                    customConfig: '',
-                    // Disable ACF
-                    allowedContent: true,
-                    // Support for sharedSpaces in 4.x
-                    extraPlugins: 'sharedspace',
-                    // Place toolbar in controlled location
-                    sharedSpaces: { top: 'oe_rte_toolbar' },
-                });
-            });
+        this.$buttons.edit.prop('disabled', true);
+        this.$buttons.cancel.prop('disabled', false);
+        this.rte.start_edition($('[data-oe-model]').addClass('oe_editable'));
+    },
+    rte_changed: function () {
+        this.$buttons.save.prop('disabled', false);
     },
     save: function () {
         var self = this;
@@ -85,7 +73,6 @@ instance.website.EditorBar = instance.web.Widget.extend({
             $w.removeClass('oe_dirty');
             _.each(['model', 'id', 'field', 'xpath'], function(d) {$w.removeAttr('data-oe-' + d);});
             $w
-                .each(function () { console.log(this); })
                 .removeClass('oe_editable')
                 .prop('contentEditable', false);
             html = $w.wrap('<div>').parent().html();
@@ -124,6 +111,79 @@ instance.website.EditorBar = instance.web.Widget.extend({
     },
 });
 
+instance.website.RTE = instance.web.Widget.extend({
+    tagName: 'li',
+    className: 'oe_right',
+    commands: [
+        {name: _lt('Bold'), command: 'bold'},
+        {name: _lt('Italic'), command: 'italic'},
+        {name: _lt('Underline'), command: 'underline'},
+        {name: _lt('Strikethrough'), command: 'strike'},
+        {name: _lt('H1'), style: { element: 'h1' }},
+        {name: _lt('H2'), style: { element: 'h2', }},
+        {name: _lt('H3'), style: { element: 'h3', }},
+        {name: _lt('H4'), style: { element: 'h4', }},
+        {name: _lt("Red"), style: { element: 'span', styles: { color: 'red' } }}
+    ],
+    // editor.ui.items -> possible commands &al
+    // editor.applyStyle(new CKEDITOR.style({element: "span",styles: {color: "#(color)"},overrides: [{element: "font",attributes: {color: null}}]}, {color: '#ff0000'}));
+    start: function () {
+        var self = this;
+        this.$el.hide();
+
+        _(this.commands).foldl(function (jq, command) {
+            return jq.add(self.button_for(command));
+        }, $()).appendTo(this.$el);
+    },
+    start_edition: function ($elements) {
+        var self = this;
+        $elements
+            .not('link, script, span')
+            .prop('contentEditable', true)
+            .each(function () {
+                var $this = $(this);
+                CKEDITOR.inline(this, self._config()).on('change', function () {
+                    $this.addClass('oe_dirty');
+                    self.trigger('change', this, null);
+                });
+            });
+        this.$el.show();
+    },
+
+    button_for: function (command) {
+        var self = this;
+        return $('<button type="button">').click(function () {
+            var editor = self._current_editor();
+            editor.fire('saveSnapshot');
+
+            if (command.style) {
+                editor.applyStyle(new CKEDITOR.style(command.style));
+            } else if (typeof command.command === 'string') {
+                editor.execCommand(command.command);
+            } else {
+                command.command(editor);
+            }
+        }).text(command.name);
+    },
+
+    _current_editor: function () {
+        return CKEDITOR.currentInstance;
+    },
+    _config: function () {
+        return {
+            // Don't load ckeditor's style rules
+            stylesSet: [],
+            // Remove toolbar entirely
+            removePlugins: 'toolbar,elementspath,resize',
+            uiColor: '',
+            // Ensure no config file is loaded
+            customConfig: '',
+            // Disable ACF
+            allowedContent: true,
+        };
+    },
+});
+
 $(function(){
 
     function make_static(){
diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml
index 8715a74184a..1754b7b81b6 100644
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -9,7 +9,6 @@
         <li class="oe_right"><button data-action="cancel">Cancel</button></li>
         <li class="oe_right"><button data-action="snippet">Snippet</button></li>
         <li class="oe_right"><button data-action="edit">Edit</button></li>
-        <li class="oe_right" id="oe_rte_toolbar"></li>
     </ul>
 </t>
 </templates>
diff --git a/addons/website/views/views.xml b/addons/website/views/views.xml
index a79dd04df4f..d55fe182c32 100644
--- a/addons/website/views/views.xml
+++ b/addons/website/views/views.xml
@@ -64,7 +64,6 @@
 
                         <script type="text/javascript" src="/web/static/lib/jquery/jquery-1.8.3.js"></script>
                         <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.2/ckeditor.js"></script>
-                        <script type="text/javascript" src="/website/static/lib/ckeditor.sharedspace/plugin.js"></script>
                         <script type="text/javascript">
                             CKEDITOR.disableAutoInline = true;
                             CKEDITOR.dtd.$editable.li = 1;

From 5176607c2aafaf5bf913760207466b96e34d6268 Mon Sep 17 00:00:00 2001
From: Xavier Morel <xmo@openerp.com>
Date: Fri, 26 Jul 2013 13:37:42 +0200
Subject: [PATCH 7/9] [IMP] make spans editable (though not RTE, not supported)
 & use t-record for company name

bzr revid: xmo@openerp.com-20130726113742-ix2f4tyy0xvoy9lq
---
 addons/website/static/src/js/website.js | 10 +++++++---
 addons/website/views/views.xml          |  2 +-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index 5fb341d1f32..5159e655cfb 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -38,7 +38,12 @@ instance.website.EditorBar = instance.web.Widget.extend({
     edit: function () {
         this.$buttons.edit.prop('disabled', true);
         this.$buttons.cancel.prop('disabled', false);
-        this.rte.start_edition($('[data-oe-model]').addClass('oe_editable'));
+        // TODO: span edition changing edition state (save button)
+        this.rte.start_edition(
+                $('[data-oe-model]')
+                    .not('link, script')
+                    .prop('contentEditable', true)
+                    .addClass('oe_editable'));
     },
     rte_changed: function () {
         this.$buttons.save.prop('disabled', false);
@@ -138,8 +143,7 @@ instance.website.RTE = instance.web.Widget.extend({
     start_edition: function ($elements) {
         var self = this;
         $elements
-            .not('link, script, span')
-            .prop('contentEditable', true)
+            .not('span')
             .each(function () {
                 var $this = $(this);
                 CKEDITOR.inline(this, self._config()).on('change', function () {
diff --git a/addons/website/views/views.xml b/addons/website/views/views.xml
index d55fe182c32..e6b3b630028 100644
--- a/addons/website/views/views.xml
+++ b/addons/website/views/views.xml
@@ -37,7 +37,7 @@
                             </ul>
                         </div>
                         <div class="span4" name="about_us">
-                            <h5 t-esc="res_company.name">Company name</h5>
+                            <h5 t-record="res_company" t-field="name">Company name</h5>
                             <ul>
                                 <li><a href="/page/website.contactus">Contact us</a></li>
                                 <li><a href="/page/website.news">News</a></li>

From 7294033e1f7c5bd1e7d324f36cb5d13a4faf7972 Mon Sep 17 00:00:00 2001
From: Xavier Morel <xmo@openerp.com>
Date: Fri, 26 Jul 2013 15:44:59 +0200
Subject: [PATCH 8/9] [IMP] disable RTE on t-record results (data-oe-type)

bzr revid: xmo@openerp.com-20130726134459-8mb3p4eh2ob8rxyq
---
 addons/website/static/src/js/website.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index 5159e655cfb..449d4fc14ab 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -142,8 +142,9 @@ instance.website.RTE = instance.web.Widget.extend({
     },
     start_edition: function ($elements) {
         var self = this;
+        CKEDITOR.on('currentInstance', this.proxy('_change_focused_editor'));
         $elements
-            .not('span')
+            .not('span, [data-oe-type]')
             .each(function () {
                 var $this = $(this);
                 CKEDITOR.inline(this, self._config()).on('change', function () {
@@ -151,7 +152,6 @@ instance.website.RTE = instance.web.Widget.extend({
                     self.trigger('change', this, null);
                 });
             });
-        this.$el.show();
     },
 
     button_for: function (command) {
@@ -173,6 +173,9 @@ instance.website.RTE = instance.web.Widget.extend({
     _current_editor: function () {
         return CKEDITOR.currentInstance;
     },
+    _change_focused_editor: function () {
+        this.$el.toggle(!!CKEDITOR.currentInstance);
+    },
     _config: function () {
         return {
             // Don't load ckeditor's style rules

From 3a8f51385d83c4256c339798614bf421fde948e3 Mon Sep 17 00:00:00 2001
From: Xavier Morel <xmo@openerp.com>
Date: Mon, 29 Jul 2013 16:38:42 +0200
Subject: [PATCH 9/9] [ADD] toolbar subgroups, hooks for styling lists
 correctly, more widgets

bzr revid: xmo@openerp.com-20130729143842-k4r7e42hhvw1y1xu
---
 addons/website/static/src/css/website.css  |  20 +++
 addons/website/static/src/css/website.sass |  16 ++-
 addons/website/static/src/js/website.js    | 152 +++++++++++++++++----
 addons/website/static/src/xml/website.xml  |   8 ++
 4 files changed, 167 insertions(+), 29 deletions(-)

diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index fb0c2d081b8..e11bd754a05 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -129,6 +129,26 @@
   color: white;
 }
 
+.oe_website_editorbar .oe_rte_toolbar div.dropdown {
+  display: inline-block;
+}
+.oe_website_editorbar .oe_rte_toolbar div.dropdown li {
+  display: list-item;
+}
+.oe_website_editorbar .oe_rte_toolbar button {
+  font-family: FontAwesome;
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+}
+.oe_website_editorbar .oe_rte_toolbar button.oe_button_list {
+  padding-right: 3px;
+}
+.oe_website_editorbar .oe_rte_toolbar button.oe_button_list:after {
+  content: "\F0D7";
+  padding-left: 6px;
+}
+
 /* }}} */
 .oe_editable:focus {
   outline: #80b5f2 solid 5px !important;
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index 8e17378851b..9863264d692 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -218,8 +218,22 @@
             text-shadow: black 0px 0px 3px
             color: white
 
+.oe_website_editorbar .oe_rte_toolbar
+    div.dropdown
+        display: inline-block
+        li
+            display: list-item
 
-
+    button
+        font-family: FontAwesome
+        font-weight: normal
+        font-style: normal
+        text-decoration: inherit
+        &.oe_button_list
+            padding-right: 3px
+            &:after
+                content: "\F0D7"
+                padding-left: 6px
 
 /* }}} */
 
diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index 449d4fc14ab..527a777a4be 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -116,29 +116,127 @@ instance.website.EditorBar = instance.web.Widget.extend({
     },
 });
 
+instance.website.Action = instance.web.Widget.extend({
+    tagName: 'button',
+    attributes: {
+        type: 'button',
+    },
+    events: { click: 'perform' },
+    init: function (parent, name) {
+        this._super(parent);
+        this.name = name;
+    },
+    start: function () {
+        this.$el.text(this.name);
+        return this._super();
+    },
+    /**
+     * Executes action
+     */
+    perform: null
+});
+var Style = instance.website.Style = instance.website.Action.extend({
+    init: function (parent, name, style) {
+        this._super(parent, name);
+        this.style = style;
+    },
+    perform: function () {
+        this.getParent().with_editor(function (editor) {
+            editor.applyStyle(new CKEDITOR.style(this.style))
+        }.bind(this));
+    },
+});
+var Command = instance.website.Command = instance.website.Action.extend({
+    init: function (parent, name, command) {
+        this._super(parent, name);
+        this.command = command;
+    },
+    perform: function () {
+        this.getParent().with_editor(function (editor) {
+            switch (typeof this.command) {
+            case 'string': editor.execCommand(this.command); break;
+            case 'function': this.command(editor); break;
+            }
+        }.bind(this));
+    },
+});
+var Group = instance.website.ActionGroup = instance.website.Action.extend({
+    template: 'Website.ActionGroup',
+    events: { 'click > button': 'perform' },
+    instances: [],
+    init: function (parent, name, actions) {
+        this._super(parent, name);
+        this.actions = _(actions).map(this.getParent().proxy('init_command'));
+    },
+    start: function () {
+        this.instances.push(this);
+        var $ul = this.$('ul');
+        return $.when.apply(null, _(this.actions).map(function (action) {
+            var $li = $('<li>').appendTo($ul);
+            return action.appendTo($li);
+        }));
+    },
+    destroy: function () {
+        this.instances = _(this.instances).without(this);
+        return this._super();
+    },
+    perform: function () {
+        this.getParent().with_editor(function () {
+            _(this.instances).chain()
+                .without(this)
+                .pluck('$el')
+                .invoke('removeClass', 'open');
+            // JS part of bootstrap dropdown does really weird stuff which
+            // interacts quite badly with the RTE thing, so bypass it
+            this.$el.toggleClass('open');
+        }.bind(this), false);
+        return false;
+    },
+});
+
 instance.website.RTE = instance.web.Widget.extend({
     tagName: 'li',
-    className: 'oe_right',
+    className: 'oe_right oe_rte_toolbar',
     commands: [
-        {name: _lt('Bold'), command: 'bold'},
-        {name: _lt('Italic'), command: 'italic'},
-        {name: _lt('Underline'), command: 'underline'},
-        {name: _lt('Strikethrough'), command: 'strike'},
-        {name: _lt('H1'), style: { element: 'h1' }},
-        {name: _lt('H2'), style: { element: 'h2', }},
-        {name: _lt('H3'), style: { element: 'h3', }},
-        {name: _lt('H4'), style: { element: 'h4', }},
-        {name: _lt("Red"), style: { element: 'span', styles: { color: 'red' } }}
+        [Command, "\uf032", 'bold'],
+        [Command, "\uf033", 'italic'],
+        [Command, "\uf0cd", 'underline'],
+        [Command, "\uf0cc", 'strike'],
+        [Command, "\uf12b", 'superscript'],
+        [Command, "\uf12c", 'subscript'],
+        [Group, "\uf0ca", [
+            [Command, "\uf0ca", 'bulletedlist'],
+            [Command, "\uf0cb", 'numberedlist']
+        ]],
+        [Group, _lt("Heading"), [
+            [Style, _lt('H1'), { element: 'h1' }],
+            [Style, _lt('H2'), { element: 'h2', }],
+            [Style, _lt('H3'), { element: 'h3', }],
+            [Style, _lt('H4'), { element: 'h4', }],
+            [Style, _lt('H5'), { element: 'h5', }],
+            [Style, _lt('H6'), { element: 'h6', }]
+        ]]
     ],
     // editor.ui.items -> possible commands &al
     // editor.applyStyle(new CKEDITOR.style({element: "span",styles: {color: "#(color)"},overrides: [{element: "font",attributes: {color: null}}]}, {color: '#ff0000'}));
     start: function () {
-        var self = this;
         this.$el.hide();
 
-        _(this.commands).foldl(function (jq, command) {
-            return jq.add(self.button_for(command));
-        }, $()).appendTo(this.$el);
+        return $.when.apply(
+            null, _(this.commands).map(this.proxy('start_command')));
+    },
+    init_command: function (command) {
+        var type = command[0], args = command.slice(1);
+        args.unshift(this);
+        var F = function (args) {
+            return type.apply(this, args);
+        };
+        F.prototype = type.prototype;
+
+        return new F(args);
+    },
+    start_command: function (command) {
+        return this.init_command(command).appendTo(this.$el);
     },
     start_edition: function ($elements) {
         var self = this;
@@ -154,20 +252,18 @@ instance.website.RTE = instance.web.Widget.extend({
             });
     },
 
-    button_for: function (command) {
-        var self = this;
-        return $('<button type="button">').click(function () {
-            var editor = self._current_editor();
-            editor.fire('saveSnapshot');
-
-            if (command.style) {
-                editor.applyStyle(new CKEDITOR.style(command.style));
-            } else if (typeof command.command === 'string') {
-                editor.execCommand(command.command);
-            } else {
-                command.command(editor);
-            }
-        }).text(command.name);
+    /**
+     * @param {Function} fn
+     * @param {Boolean} [snapshot=true]
+     * @returns {$.Deferred}
+     */
+    with_editor: function (fn, snapshot) {
+        var editor = this._current_editor();
+        if (snapshot !== false) { editor.fire('saveSnapshot'); }
+        return $.when(fn(editor)).then(function () {
+            if (snapshot !== false) { editor.fire('saveSnapshot'); }
+            editor.focus();
+        });
     },
 
     _current_editor: function () {
diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml
index 1754b7b81b6..5dc34257a07 100644
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -11,4 +11,12 @@
         <li class="oe_right"><button data-action="edit">Edit</button></li>
     </ul>
 </t>
+<t t-name="Website.ActionGroup">
+    <div class="dropdown">
+        <button type="button" class="oe_button_list dropdown-toggle">
+            <t t-esc="widget.name"/>
+        </button>
+        <ul class="dropdown-menu" role="menu"/>
+    </div>
+</t>
 </templates>