SHARE
TWEET

Untitled

a guest Jun 26th, 2013 899 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // Plugin registrieren
  2. CKEDITOR.plugins.add('hotfix', {
  3.  
  4.         // Plugin initialisiert
  5.         init : function(editor) {
  6.  
  7.                 ////////////////////////////////////////////////////////////////////////
  8.                 // Webkit Span Bugfix //////////////////////////////////////////////////
  9.                 ////////////////////////////////////////////////////////////////////////
  10.  
  11.                 // Nur für Webkit Browser
  12.                 if ( CKEDITOR.env.webkit ) {
  13.  
  14.                         console.log('>>> Using Webkit Span Bugfix');
  15.  
  16.                         var getParentsToClosestBlockElement = function(node) {
  17.  
  18.                                 var parentsToBlockElement = new Array();
  19.  
  20.                                 if ( node instanceof CKEDITOR.dom.element || node instanceof CKEDITOR.dom.text ) {
  21.  
  22.                                         // Alle Elternknoten des Knotens holen (inkl. des Knotens selbst)
  23.                                         var parents = node.getParents(true);
  24.  
  25.                                         // Wenn Elternknoten vorhanden
  26.                                         if ( parents != null ) {
  27.  
  28.                                                 // Elternelementse durchschleifen
  29.                                                 for ( var i = 0; i < parents.length; i++ ) {
  30.  
  31.                                                         parentsToBlockElement[i] = parents[i];
  32.  
  33.                                                         // Wenn Elternelement ein Blockelement, dann das vorherige
  34.                                                         // Elternelement wegspeichern und abbrechen
  35.                                                         if ( i >= 1 && parents[i] instanceof CKEDITOR.dom.element
  36.                                                                 && parents[i].getComputedStyle('display') == 'block' ) {
  37.  
  38.                                                                 break;
  39.  
  40.                                                         }
  41.  
  42.                                                 }
  43.  
  44.                                         }
  45.  
  46.                                 }
  47.  
  48.                                 return parentsToBlockElement;
  49.  
  50.                         }
  51.  
  52.                         var getNextNodeSiblingsOfSelection = function() {
  53.  
  54.                                 // Rückgabearray
  55.                                 var siblings = new Array();
  56.  
  57.                                 // Selektion holen
  58.                                 var selection = editor.getSelection();
  59.  
  60.                                 var nextNode = null;
  61.  
  62.                                 // Wenn Selektion vorhanden
  63.                                 if ( selection != null ) {
  64.  
  65.                                         // Ranges der Selektion holen
  66.                                         var ranges = selection.getRanges();
  67.  
  68.                                         // Wenn Ranges vorhanden
  69.                                         if ( ranges.length ) {
  70.  
  71.                                                 var nextNode = ranges[0].getNextNode();
  72.  
  73.                                                 // Wenn Knoten vorhanden
  74.                                                 if ( nextNode != null ) {
  75.  
  76.                                                         var nextNodeParents = getParentsToClosestBlockElement(nextNode);
  77.  
  78.                                                         // Wenn Element vorhanden
  79.                                                         if ( nextNodeParents[nextNodeParents.length - 2] != undefined ) {
  80.  
  81.                                                                 var element = nextNodeParents[nextNodeParents.length - 2];
  82.  
  83.                                                                 // Das Element und alle seine nachfolgenden Elemente (in der gleichen Ebene)
  84.                                                                 // wegspeichern
  85.                                                                 do {
  86.  
  87.                                                                         siblings.push(element);
  88.                                                                         element = element.getNext();
  89.  
  90.                                                                 } while ( element != null );
  91.  
  92.                                                         }
  93.  
  94.                                                 }
  95.  
  96.                                         }
  97.  
  98.                                 }
  99.  
  100.                                 var redoSelection = function() {
  101.  
  102.                                         if ( selection != null && ranges != null && ranges.length ) {
  103.  
  104.                                                 selection.selectRanges(ranges);
  105.  
  106.                                         }
  107.  
  108.                                 }
  109.  
  110.                                 return {
  111.                                         'siblings':             siblings,
  112.                                         'redoSelection':        redoSelection,
  113.                                         'nextNode':             nextNode
  114.                                 };
  115.  
  116.                         }
  117.  
  118.                         // Wenn Editor im Editierungsmodus ist (WYSIWYG Modus)
  119.                         editor.on('contentDom', function() {
  120.  
  121.                                 // Wenn KeyDown Event getriggert wurde
  122.                                 editor.document.on('keydown', function(event) {
  123.  
  124.                                         var nextNodeSiblingsOnKeyDown = getNextNodeSiblingsOfSelection();
  125.  
  126.                                         // Einmalig beim keyDown Event das KeyUp Event binden
  127.                                         // => Wird dann aufgerufen, nachdem Chrome die SPANs gesetzt hat! ;)
  128.                                         editor.document.once('keyup', function(event) {
  129.  
  130.                                                 var nextNodeSiblingsOnKeyUp = getNextNodeSiblingsOfSelection();
  131.  
  132.                                                 var blockElementsMerged = false;
  133.  
  134.                                                 if ( nextNodeSiblingsOnKeyDown.nextNode != null
  135.                                                         && nextNodeSiblingsOnKeyUp.nextNode != null ) {
  136.  
  137.                                                         var nextNodeOnKeyDownParents = getParentsToClosestBlockElement(nextNodeSiblingsOnKeyDown.nextNode);
  138.                                                         var nextNodeOnKeyUpParents = getParentsToClosestBlockElement(nextNodeSiblingsOnKeyUp.nextNode);
  139.  
  140.                                                         if ( nextNodeOnKeyDownParents[nextNodeOnKeyDownParents.length - 1].getAddress().join('|')
  141.                                                                 != nextNodeOnKeyUpParents[nextNodeOnKeyUpParents.length - 1].getAddress().join('|') ) {
  142.  
  143.                                                                 blockElementsMerged = true;
  144.  
  145.                                                         }
  146.  
  147.                                                 }
  148.  
  149.                                                 if ( blockElementsMerged ) {
  150.  
  151.                                                         console.log('>>> Detected merge of block elements');
  152.  
  153.                                                         for ( var i = 0; i < nextNodeSiblingsOnKeyDown.siblings.length; i++ ) {
  154.  
  155.                                                                 if ( nextNodeSiblingsOnKeyUp.siblings[i] == undefined ) break;
  156.  
  157.                                                                 nodeBeforeKey   = nextNodeSiblingsOnKeyDown.siblings[i];
  158.                                                                 nodeAfterKey    = nextNodeSiblingsOnKeyUp.siblings[i];
  159.  
  160.                                                                 // Textknoten wurde in einen Span umgewandelt
  161.                                                                 if ( nodeBeforeKey instanceof CKEDITOR.dom.text
  162.                                                                         && nodeAfterKey instanceof CKEDITOR.dom.element
  163.                                                                         && nodeAfterKey.getName() == 'span' ) {
  164.  
  165.                                                                         console.log('>>> Remove Webkit Span', nodeAfterKey.getOuterHtml());
  166.  
  167.                                                                         nodeAfterKey.remove(true);
  168.  
  169.                                                                 // In einem Span Element wurde das Style-Attribut geändert
  170.                                                                 } else if ( nodeBeforeKey instanceof CKEDITOR.dom.element
  171.                                                                         && nodeBeforeKey.getName() == 'span'
  172.                                                                         && nodeAfterKey instanceof CKEDITOR.dom.element
  173.                                                                         && nodeAfterKey.getName() == 'span'
  174.                                                                         && nodeAfterKey.getAttribute('style') != nodeBeforeKey.getAttribute('style') ) {
  175.  
  176.                                                                         console.log('>>> Update Webkit Span Style Attribute', nodeAfterKey.getOuterHtml(), 'to', nodeBeforeKey.getAttribute('style'));
  177.  
  178.                                                                         nodeAfterKey.setAttribute('style', nodeBeforeKey.getAttribute('style'));
  179.  
  180.                                                                 }
  181.  
  182.                                                                 // Bugfix => Selektion wiederherstellen
  183.                                                                 nextNodeSiblingsOnKeyUp.redoSelection();
  184.  
  185.                                                         }
  186.  
  187.                                                 }
  188.  
  189.                                         });
  190.  
  191.                                 });
  192.  
  193.                         });
  194.  
  195.                 }
  196.  
  197.         }
  198. });
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top