webcit/tiny_mce/plugins/safari/editor_plugin_src.js

   1 /*\r
   2  * Copyright © 2004-2008, Moxiecode Systems AB, All rights reserved.\r
   3  */\r
   4 \r
   5 (function() {\r
   6         var Event = tinymce.dom.Event, grep = tinymce.grep, each = tinymce.each, inArray = tinymce.inArray, isOldWebKit = tinymce.isOldWebKit;\r
   7 \r
   8         function isEmpty(d, e, f) {\r
   9                 var w, n;\r
  10 \r
  11                 w = d.createTreeWalker(e, NodeFilter.SHOW_ALL, null, false);\r
  12                 while (n = w.nextNode()) {\r
  13                         // Filter func\r
  14                         if (f) {\r
  15                                 if (!f(n))\r
  16                                         return false;\r
  17                         }\r
  18 \r
  19                         // Non whitespace text node\r
  20                         if (n.nodeType == 3 && n.nodeValue && /[^\s\u00a0]+/.test(n.nodeValue))\r
  21                                 return false;\r
  22 \r
  23                         // Is non text element byt still content\r
  24                         if (n.nodeType == 1 && /^(HR|IMG|TABLE)$/.test(n.nodeName))\r
  25                                 return false;\r
  26                 }\r
  27 \r
  28                 return true;\r
  29         };\r
  30 \r
  31         tinymce.create('tinymce.plugins.Safari', {\r
  32                 init : function(ed) {\r
  33                         var t = this, dom;\r
  34 \r
  35                         // Ignore on non webkit\r
  36                         if (!tinymce.isWebKit)\r
  37                                 return;\r
  38 \r
  39                         t.editor = ed;\r
  40                         t.webKitFontSizes = ['x-small', 'small', 'medium', 'large', 'x-large', 'xx-large', '-webkit-xxx-large'];\r
  41                         t.namedFontSizes = ['xx-small', 'x-small','small','medium','large','x-large', 'xx-large'];\r
  42 \r
  43                         // Safari CreateLink command will not work correctly on images that is aligned\r
  44                         ed.addCommand('CreateLink', function(u, v) {\r
  45                                 var n = ed.selection.getNode(), dom = ed.dom, a;\r
  46 \r
  47                                 if (n && (/^(left|right)$/i.test(dom.getStyle(n, 'float', 1)) || /^(left|right)$/i.test(dom.getAttrib(n, 'align')))) {\r
  48                                         a = dom.create('a', {href : v}, n.cloneNode());\r
  49                                         n.parentNode.replaceChild(a, n);\r
  50                                         ed.selection.select(a);\r
  51                                 } else\r
  52                                         ed.getDoc().execCommand("CreateLink", false, v);\r
  53                         });\r
  54 \r
  55                         ed.onPaste.add(function(ed, e) {\r
  56                                 function removeStyles(e) {\r
  57                                         e = e.target;\r
  58 \r
  59                                         if (e.nodeType == 1) {\r
  60                                                 e.style.cssText = '';\r
  61 \r
  62                                                 each(ed.dom.select('*', e), function(e) {\r
  63                                                         e.style.cssText = '';\r
  64                                                 });\r
  65                                         }\r
  66                                 };\r
  67 \r
  68                                 Event.add(ed.getDoc(), 'DOMNodeInserted', removeStyles);\r
  69 \r
  70                                 window.setTimeout(function() {\r
  71                                         Event.remove(ed.getDoc(), 'DOMNodeInserted', removeStyles);\r
  72                                 }, 0);\r
  73                         });\r
  74 \r
  75                         ed.onKeyUp.add(function(ed, e) {\r
  76                                 var h, b, r, n, s;\r
  77 \r
  78                                 // If backspace or delete key\r
  79                                 if (e.keyCode == 46 || e.keyCode == 8) {\r
  80                                         b = ed.getBody();\r
  81                                         h = b.innerHTML;\r
  82                                         s = ed.selection;\r
  83 \r
  84                                         // If there is no text content or images or hr elements then remove everything\r
  85                                         if (b.childNodes.length == 1 && !/<(img|hr)/.test(h) && tinymce.trim(h.replace(/<[^>]+>/g, '')).length == 0) {\r
  86                                                 // Inject paragrah and bogus br\r
  87                                                 ed.setContent('<p><br mce_bogus="1" /></p>', {format : 'raw'});\r
  88 \r
  89                                                 // Move caret before bogus br\r
  90                                                 n = b.firstChild;\r
  91                                                 r = s.getRng();\r
  92                                                 r.setStart(n, 0);\r
  93                                                 r.setEnd(n, 0);\r
  94                                                 s.setRng(r);\r
  95                                         }\r
  96                                 }\r
  97                         });\r
  98 \r
  99                         // Workaround for FormatBlock bug, http://bugs.webkit.org/show_bug.cgi?id=16004\r
 100                         ed.addCommand('FormatBlock', function(u, v) {\r
 101                                 var dom = ed.dom, e = dom.getParent(ed.selection.getNode(), dom.isBlock);\r
 102 \r
 103                                 if (e)\r
 104                                         dom.replace(dom.create(v), e, 1);\r
 105                                 else\r
 106                                         ed.getDoc().execCommand("FormatBlock", false, v);\r
 107                         });\r
 108 \r
 109                         // Workaround for InsertHTML bug, http://bugs.webkit.org/show_bug.cgi?id=16382\r
 110                         ed.addCommand('mceInsertContent', function(u, v) {\r
 111                                 ed.getDoc().execCommand("InsertText", false, 'mce_marker');\r
 112                                 ed.getBody().innerHTML = ed.getBody().innerHTML.replace(/mce_marker/g, ed.dom.processHTML(v) + '<span id="_mce_tmp">XX</span>');\r
 113                                 ed.selection.select(ed.dom.get('_mce_tmp'));\r
 114                                 ed.getDoc().execCommand("Delete", false, ' ');\r
 115                         });\r
 116 \r
 117                         ed.onKeyPress.add(function(ed, e) {\r
 118                                 var se, li, lic, r1, r2, n, sel, doc, be, af, pa;\r
 119 \r
 120                                 if (e.keyCode == 13) {\r
 121                                         sel = ed.selection;\r
 122                                         se = sel.getNode();\r
 123 \r
 124                                         // Workaround for missing shift+enter support, http://bugs.webkit.org/show_bug.cgi?id=16973\r
 125                                         if (e.shiftKey || ed.settings.force_br_newlines && se.nodeName != 'LI') {\r
 126                                                 t._insertBR(ed);\r
 127                                                 Event.cancel(e);\r
 128                                         }\r
 129 \r
 130                                         // Workaround for DIV elements produced by Safari\r
 131                                         if (li = dom.getParent(se, 'LI')) {\r
 132                                                 lic = dom.getParent(li, 'OL,UL');\r
 133                                                 doc = ed.getDoc();\r
 134 \r
 135                                                 pa = dom.create('p');\r
 136                                                 dom.add(pa, 'br', {mce_bogus : "1"});\r
 137 \r
 138                                                 if (isEmpty(doc, li)) {\r
 139                                                         // If list in list then use browser default behavior\r
 140                                                         if (n = dom.getParent(lic.parentNode, 'LI,OL,UL'))\r
 141                                                                 return;\r
 142 \r
 143                                                         n = dom.getParent(lic, 'p,h1,h2,h3,h4,h5,h6,div') || lic;\r
 144 \r
 145                                                         // Create range from the start of block element to the list item\r
 146                                                         r1 = doc.createRange();\r
 147                                                         r1.setStartBefore(n);\r
 148                                                         r1.setEndBefore(li);\r
 149 \r
 150                                                         // Create range after the list to the end of block element\r
 151                                                         r2 = doc.createRange();\r
 152                                                         r2.setStartAfter(li);\r
 153                                                         r2.setEndAfter(n);\r
 154 \r
 155                                                         be = r1.cloneContents();\r
 156                                                         af = r2.cloneContents();\r
 157 \r
 158                                                         if (!isEmpty(doc, af))\r
 159                                                                 dom.insertAfter(af, n);\r
 160 \r
 161                                                         dom.insertAfter(pa, n);\r
 162 \r
 163                                                         if (!isEmpty(doc, be))\r
 164                                                                 dom.insertAfter(be, n);\r
 165 \r
 166                                                         dom.remove(n);\r
 167 \r
 168                                                         n = pa.firstChild;\r
 169                                                         r1 = doc.createRange();\r
 170                                                         r1.setStartBefore(n);\r
 171                                                         r1.setEndBefore(n);\r
 172                                                         sel.setRng(r1);\r
 173 \r
 174                                                         return Event.cancel(e);\r
 175                                                 }\r
 176                                         }\r
 177                                 }\r
 178                         });\r
 179 \r
 180                         // Safari doesn't place lists outside block elements\r
 181                         ed.onExecCommand.add(function(ed, cmd) {\r
 182                                 var sel, dom, bl, bm;\r
 183 \r
 184                                 if (cmd == 'InsertUnorderedList' || cmd == 'InsertOrderedList') {\r
 185                                         sel = ed.selection;\r
 186                                         dom = ed.dom;\r
 187 \r
 188                                         if (bl = dom.getParent(sel.getNode(), function(n) {return /^(H[1-6]|P|ADDRESS|PRE)$/.test(n.nodeName);})) {\r
 189                                                 bm = sel.getBookmark();\r
 190                                                 dom.remove(bl, 1);\r
 191                                                 sel.moveToBookmark(bm);\r
 192                                         }\r
 193                                 }\r
 194                         });\r
 195 \r
 196                         // Workaround for bug, http://bugs.webkit.org/show_bug.cgi?id=12250\r
 197                         ed.onClick.add(function(ed, e) {\r
 198                                 e = e.target;\r
 199 \r
 200                                 if (e.nodeName == 'IMG') {\r
 201                                         t.selElm = e;\r
 202                                         ed.selection.select(e);\r
 203                                 } else\r
 204                                         t.selElm = null;\r
 205                         });\r
 206 \r
 207                         ed.onInit.add(function() {\r
 208                                 t._fixWebKitSpans();\r
 209 \r
 210                                 if (isOldWebKit)\r
 211                                         t._patchSafari2x(ed);\r
 212                         });\r
 213 \r
 214                         ed.onSetContent.add(function() {\r
 215                                 dom = ed.dom;\r
 216 \r
 217                                 // Convert strong,b,em,u,strike to spans\r
 218                                 each(['strong','b','em','u','strike','sub','sup','a'], function(v) {\r
 219                                         each(grep(dom.select(v)).reverse(), function(n) {\r
 220                                                 var nn = n.nodeName.toLowerCase(), st;\r
 221 \r
 222                                                 // Convert anchors into images\r
 223                                                 if (nn == 'a') {\r
 224                                                         if (n.name)\r
 225                                                                 dom.replace(dom.create('img', {mce_name : 'a', name : n.name, 'class' : 'mceItemAnchor'}), n);\r
 226 \r
 227                                                         return;\r
 228                                                 }\r
 229 \r
 230                                                 switch (nn) {\r
 231                                                         case 'b':\r
 232                                                         case 'strong':\r
 233                                                                 if (nn == 'b')\r
 234                                                                         nn = 'strong';\r
 235 \r
 236                                                                 st = 'font-weight: bold;';\r
 237                                                                 break;\r
 238 \r
 239                                                         case 'em':\r
 240                                                                 st = 'font-style: italic;';\r
 241                                                                 break;\r
 242 \r
 243                                                         case 'u':\r
 244                                                                 st = 'text-decoration: underline;';\r
 245                                                                 break;\r
 246 \r
 247                                                         case 'sub':\r
 248                                                                 st = 'vertical-align: sub;';\r
 249                                                                 break;\r
 250 \r
 251                                                         case 'sup':\r
 252                                                                 st = 'vertical-align: super;';\r
 253                                                                 break;\r
 254 \r
 255                                                         case 'strike':\r
 256                                                                 st = 'text-decoration: line-through;';\r
 257                                                                 break;\r
 258                                                 }\r
 259 \r
 260                                                 dom.replace(dom.create('span', {mce_name : nn, style : st, 'class' : 'Apple-style-span'}), n, 1);\r
 261                                         });\r
 262                                 });\r
 263                         });\r
 264 \r
 265                         ed.onPreProcess.add(function(ed, o) {\r
 266                                 dom = ed.dom;\r
 267 \r
 268                                 each(grep(o.node.getElementsByTagName('span')).reverse(), function(n) {\r
 269                                         var v, bg;\r
 270 \r
 271                                         if (o.get) {\r
 272                                                 if (dom.hasClass(n, 'Apple-style-span')) {\r
 273                                                         bg = n.style.backgroundColor;\r
 274 \r
 275                                                         switch (dom.getAttrib(n, 'mce_name')) {\r
 276                                                                 case 'font':\r
 277                                                                         if (!ed.settings.convert_fonts_to_spans)\r
 278                                                                                 dom.setAttrib(n, 'style', '');\r
 279                                                                         break;\r
 280 \r
 281                                                                 case 'strong':\r
 282                                                                 case 'em':\r
 283                                                                 case 'sub':\r
 284                                                                 case 'sup':\r
 285                                                                         dom.setAttrib(n, 'style', '');\r
 286                                                                         break;\r
 287 \r
 288                                                                 case 'strike':\r
 289                                                                 case 'u':\r
 290                                                                         if (!ed.settings.inline_styles)\r
 291                                                                                 dom.setAttrib(n, 'style', '');\r
 292                                                                         else\r
 293                                                                                 dom.setAttrib(n, 'mce_name', '');\r
 294 \r
 295                                                                         break;\r
 296 \r
 297                                                                 default:\r
 298                                                                         if (!ed.settings.inline_styles)\r
 299                                                                                 dom.setAttrib(n, 'style', '');\r
 300                                                         }\r
 301 \r
 302 \r
 303                                                         if (bg)\r
 304                                                                 n.style.backgroundColor = bg;\r
 305                                                 }\r
 306                                         }\r
 307 \r
 308                                         if (dom.hasClass(n, 'mceItemRemoved'))\r
 309                                                 dom.remove(n, 1);\r
 310                                 });\r
 311                         });\r
 312 \r
 313                         ed.onPostProcess.add(function(ed, o) {\r
 314                                 // Safari adds BR at end of all block elements\r
 315                                 o.content = o.content.replace(/<br \/><\/(h[1-6]|div|p|address|pre)>/g, '</$1>');\r
 316 \r
 317                                 // Safari adds id="undefined" to HR elements\r
 318                                 o.content = o.content.replace(/ id=\"undefined\"/g, '');\r
 319                         });\r
 320                 },\r
 321 \r
 322                 getInfo : function() {\r
 323                         return {\r
 324                                 longname : 'Safari compatibility',\r
 325                                 author : 'Moxiecode Systems AB',\r
 326                                 authorurl : 'http://tinymce.moxiecode.com',\r
 327                                 infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/safari',\r
 328                                 version : tinymce.majorVersion + "." + tinymce.minorVersion\r
 329                         };\r
 330                 },\r
 331 \r
 332                 // Internal methods\r
 333 \r
 334                 _fixWebKitSpans : function() {\r
 335                         var t = this, ed = t.editor;\r
 336 \r
 337                         if (!isOldWebKit) {\r
 338                                 // Use mutator events on new WebKit\r
 339                                 Event.add(ed.getDoc(), 'DOMNodeInserted', function(e) {\r
 340                                         e = e.target;\r
 341 \r
 342                                         if (e && e.nodeType == 1)\r
 343                                                 t._fixAppleSpan(e);\r
 344                                 });\r
 345                         } else {\r
 346                                 // Do post command processing in old WebKit since the browser crashes on Mutator events :(\r
 347                                 ed.onExecCommand.add(function() {\r
 348                                         each(ed.dom.select('span'), function(n) {\r
 349                                                 t._fixAppleSpan(n);\r
 350                                         });\r
 351 \r
 352                                         ed.nodeChanged();\r
 353                                 });\r
 354                         }\r
 355                 },\r
 356 \r
 357                 _fixAppleSpan : function(e) {\r
 358                         var ed = this.editor, dom = ed.dom, fz = this.webKitFontSizes, fzn = this.namedFontSizes, s = ed.settings, st, p;\r
 359 \r
 360                         if (dom.getAttrib(e, 'mce_fixed'))\r
 361                                 return;\r
 362 \r
 363                         // Handle Apple style spans\r
 364                         if (e.nodeName == 'SPAN' && e.className == 'Apple-style-span') {\r
 365                                 st = e.style;\r
 366 \r
 367                                 if (!s.convert_fonts_to_spans) {\r
 368                                         if (st.fontSize) {\r
 369                                                 dom.setAttrib(e, 'mce_name', 'font');\r
 370                                                 dom.setAttrib(e, 'size', inArray(fz, st.fontSize) + 1);\r
 371                                         }\r
 372 \r
 373                                         if (st.fontFamily) {\r
 374                                                 dom.setAttrib(e, 'mce_name', 'font');\r
 375                                                 dom.setAttrib(e, 'face', st.fontFamily);\r
 376                                         }\r
 377 \r
 378                                         if (st.color) {\r
 379                                                 dom.setAttrib(e, 'mce_name', 'font');\r
 380                                                 dom.setAttrib(e, 'color', dom.toHex(st.color));\r
 381                                         }\r
 382 \r
 383                                         if (st.backgroundColor) {\r
 384                                                 dom.setAttrib(e, 'mce_name', 'font');\r
 385                                                 dom.setStyle(e, 'background-color', st.backgroundColor);\r
 386                                         }\r
 387                                 } else {\r
 388                                         if (st.fontSize)\r
 389                                                 dom.setStyle(e, 'fontSize', fzn[inArray(fz, st.fontSize)]);\r
 390                                 }\r
 391 \r
 392                                 if (st.fontWeight == 'bold')\r
 393                                         dom.setAttrib(e, 'mce_name', 'strong');\r
 394 \r
 395                                 if (st.fontStyle == 'italic')\r
 396                                         dom.setAttrib(e, 'mce_name', 'em');\r
 397 \r
 398                                 if (st.textDecoration == 'underline')\r
 399                                         dom.setAttrib(e, 'mce_name', 'u');\r
 400 \r
 401                                 if (st.textDecoration == 'line-through')\r
 402                                         dom.setAttrib(e, 'mce_name', 'strike');\r
 403 \r
 404                                 if (st.verticalAlign == 'super')\r
 405                                         dom.setAttrib(e, 'mce_name', 'sup');\r
 406 \r
 407                                 if (st.verticalAlign == 'sub')\r
 408                                         dom.setAttrib(e, 'mce_name', 'sub');\r
 409 \r
 410                                 dom.setAttrib(e, 'mce_fixed', '1');\r
 411                         }\r
 412                 },\r
 413 \r
 414                 _patchSafari2x : function(ed) {\r
 415                         var t = this, setContent, getNode, dom = ed.dom, lr;\r
 416 \r
 417                         // Inline dialogs\r
 418                         if (ed.windowManager.onBeforeOpen) {\r
 419                                 ed.windowManager.onBeforeOpen.add(function() {\r
 420                                         r = ed.selection.getRng();\r
 421                                 });\r
 422                         }\r
 423 \r
 424                         // Fake select on 2.x\r
 425                         ed.selection.select = function(n) {\r
 426                                 this.getSel().setBaseAndExtent(n, 0, n, 1);\r
 427                         };\r
 428 \r
 429                         getNode = ed.selection.getNode;\r
 430                         ed.selection.getNode = function() {\r
 431                                 return t.selElm || getNode.call(this);\r
 432                         };\r
 433 \r
 434                         // Fake range on Safari 2.x\r
 435                         ed.selection.getRng = function() {\r
 436                                 var t = this, s = t.getSel(), d = ed.getDoc(), r, rb, ra, di;\r
 437 \r
 438                                 // Fake range on Safari 2.x\r
 439                                 if (s.anchorNode) {\r
 440                                         r = d.createRange();\r
 441 \r
 442                                         try {\r
 443                                                 // Setup before range\r
 444                                                 rb = d.createRange();\r
 445                                                 rb.setStart(s.anchorNode, s.anchorOffset);\r
 446                                                 rb.collapse(1);\r
 447 \r
 448                                                 // Setup after range\r
 449                                                 ra = d.createRange();\r
 450                                                 ra.setStart(s.focusNode, s.focusOffset);\r
 451                                                 ra.collapse(1);\r
 452 \r
 453                                                 // Setup start/end points by comparing locations\r
 454                                                 di = rb.compareBoundaryPoints(rb.START_TO_END, ra) < 0;\r
 455                                                 r.setStart(di ? s.anchorNode : s.focusNode, di ? s.anchorOffset : s.focusOffset);\r
 456                                                 r.setEnd(di ? s.focusNode : s.anchorNode, di ? s.focusOffset : s.anchorOffset);\r
 457 \r
 458                                                 lr = r;\r
 459                                         } catch (ex) {\r
 460                                                 // Sometimes fails, at least we tried to do it by the book. I hope Safari 2.x will go disappear soooon!!!\r
 461                                         }\r
 462                                 }\r
 463 \r
 464                                 return r || lr;\r
 465                         };\r
 466 \r
 467                         // Fix setContent so it works\r
 468                         setContent = ed.selection.setContent;\r
 469                         ed.selection.setContent = function(h, s) {\r
 470                                 var r = this.getRng(), b;\r
 471 \r
 472                                 try {\r
 473                                         setContent.call(this, h, s);\r
 474                                 } catch (ex) {\r
 475                                         // Workaround for Safari 2.x\r
 476                                         b = dom.create('body');\r
 477                                         b.innerHTML = h;\r
 478 \r
 479                                         each(b.childNodes, function(n) {\r
 480                                                 r.insertNode(n.cloneNode(true));\r
 481                                         });\r
 482                                 }\r
 483                         };\r
 484                 },\r
 485 \r
 486                 _insertBR : function(ed) {\r
 487                         var dom = ed.dom, s = ed.selection, r = s.getRng(), br;\r
 488 \r
 489                         // Insert BR element\r
 490                         r.insertNode(br = dom.create('br'));\r
 491 \r
 492                         // Place caret after BR\r
 493                         r.setStartAfter(br);\r
 494                         r.setEndAfter(br);\r
 495                         s.setRng(r);\r
 496 \r
 497                         // Could not place caret after BR then insert an nbsp entity and move the caret\r
 498                         if (s.getSel().focusNode == br.previousSibling) {\r
 499                                 s.select(dom.insertAfter(dom.doc.createTextNode('\u00a0'), br));\r
 500                                 s.collapse(1);\r
 501                         }\r
 502 \r
 503                         // Scroll to new position, scrollIntoView can't be used due to bug: http://bugs.webkit.org/show_bug.cgi?id=16117\r
 504                         ed.getWin().scrollTo(0, dom.getPos(s.getRng().startContainer).y);\r
 505                 }\r
 506         });\r
 507 \r
 508         // Register plugin\r
 509         tinymce.PluginManager.add('safari', tinymce.plugins.Safari);\r
 510 })();\r
 511 \r