Faire cohabiter html5 shiv & Aloha

aloha-editor-logo.png La méga-geekerie du jour, pour celles et ceux qui tentent de faire cohabiter l'éditeur wysiwyg Aloha et html5shiv pour MSIE. Je sais, mais on est barge ou on l'est pas :-) Les deux ne fonctionnent pas ensemble et comme j'ai pas mal galéré pour trouver la solution, ça mérite un billet vite fait sur le gaz avant d'aller au lit.

Les protagonistes

Aloha est un éditeur de contenu html5, très prometteur mais encore un peu pas fini.

html5 shiv est un javascript qui permet de faire reconnaître les balises html5 à ces $%!**censuré**!! de Microsft Explorer 7 & 8

Le problème

En chargeant à la fois l'un et l'autre, MSIE 7&8 retournent une erreur du genre très parlant: "Invalid Argument" à la ligne 64125 de aloha.js

Le problème vient en fait de html5 shiv qui contient une fonction qui surcharge createElement. Et quand la fonction getTextRangeBoundaryPosition d'Aloha fait appel à createElement, elle bute sur la surcharge.

La solution (un peu trash)

(j'utilise la version vpre3.5 non minifiée)

Modifier la fonction shivMethods de html5 shiv :

Remplacer (ligne 91) :

ownerDocument.createElement = function(nodeName) {
      //abort shiv
      if(!html5.shivMethods){
          return docCreateElement(nodeName);
      }

      var node;

Par :

ownerDocument.createElement = function(nodeName) {
      //abort shiv
      if(!html5.shivMethods){
          return docCreateElement(nodeName);
      }
			
      // Aloha Editor compatibility on MSIE
      var fnamePattern = new RegExp('getTextRangeBoundaryPosition');
      if(fnamePattern.test(arguments.callee.caller.toString())){
          return docCreateElement(nodeName);
      }
      var node;

Cinq heures à se mordre les dents pour 3 lignes de code, pas mal. Happy coding ;-)