webcit/tiny_mce/plugins/safari/editor_plugin_src.js

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