1 //<script type="text/javascript">
4 * Based Ext JS Library 1.1.1
5 * Copyright(c) 2006-2007, Ext JS, LLC.
11 * @class Roo.HtmlEditorCore
12 * @extends Roo.Component
13 * Provides a the editing component for the HTML editors in Roo. (bootstrap and Roo.form)
15 * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
18 Roo.HtmlEditorCore = function(config){
21 Roo.HtmlEditorCore.superclass.constructor.call(this, config);
27 * Fires when the editor is fully initialized (including the iframe)
28 * @param {Roo.HtmlEditorCore} this
33 * Fires when the editor is first receives the focus. Any insertion must wait
34 * until after this event.
35 * @param {Roo.HtmlEditorCore} this
40 * Fires before the textarea is updated with content from the editor iframe. Return false
42 * @param {Roo.HtmlEditorCore} this
43 * @param {String} html
48 * Fires before the iframe editor is updated with content from the textarea. Return false
50 * @param {Roo.HtmlEditorCore} this
51 * @param {String} html
56 * Fires when the textarea is updated with content from the editor iframe.
57 * @param {Roo.HtmlEditorCore} this
58 * @param {String} html
63 * Fires when the iframe editor is updated with content from the textarea.
64 * @param {Roo.HtmlEditorCore} this
65 * @param {String} html
71 * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
72 * @param {Roo.HtmlEditorCore} this
79 // at this point this.owner is set, so we can start working out the whitelisted / blacklisted elements
81 // defaults : white / black...
82 this.applyBlacklists();
89 Roo.extend(Roo.HtmlEditorCore, Roo.Component, {
93 * @cfg {Roo.form.HtmlEditor|Roo.bootstrap.HtmlEditor} the owner field
99 * @cfg {String} resizable 's' or 'se' or 'e' - wrapps the element in a
104 * @cfg {Number} height (in pixels)
108 * @cfg {Number} width (in pixels)
112 * @cfg {boolean} autoClean - default true - loading and saving will remove quite a bit of formating,
113 * if you are doing an email editor, this probably needs disabling, it's designed
118 * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled)
122 * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
127 * @cfg {String} language default en - language of text (usefull for rtl languages)
133 * @cfg {boolean} allowComments - default false - allow comments in HTML source
134 * - by default they are stripped - if you are editing email you may need this.
136 allowComments: false,
140 // private properties
141 validationEvent : false,
145 sourceEditMode : false,
146 onFocus : Roo.emptyFn,
152 // blacklist + whitelisted elements..
161 * Protected method that will not generally be called directly. It
162 * is called when the editor initializes the iframe with HTML contents. Override this method if you
163 * want to change the initialization markup of the iframe (e.g. to add stylesheets).
165 getDocMarkup : function(){
169 // inherit styels from page...??
170 if (this.stylesheets === false) {
172 Roo.get(document.head).select('style').each(function(node) {
173 st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
176 Roo.get(document.head).select('link').each(function(node) {
177 st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
180 } else if (!this.stylesheets.length) {
182 st = '<style type="text/css">' +
183 'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
186 for (var i in this.stylesheets) {
187 if (typeof(this.stylesheets[i]) != 'string') {
190 st += '<link rel="stylesheet" href="' + this.stylesheets[i] +'" type="text/css">';
195 st += '<style type="text/css">' +
196 'IMG { cursor: pointer } ' +
199 var cls = 'roo-htmleditor-body';
201 if(this.bodyCls.length){
202 cls += ' ' + this.bodyCls;
205 return '<html><head>' + st +
206 //<style type="text/css">' +
207 //'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
209 ' </head><body contenteditable="true" data-enable-grammerly="true" class="' + cls + '"></body></html>';
213 onRender : function(ct, position)
216 //Roo.HtmlEditorCore.superclass.onRender.call(this, ct, position);
217 this.el = this.owner.inputEl ? this.owner.inputEl() : this.owner.el;
220 this.el.dom.style.border = '0 none';
221 this.el.dom.setAttribute('tabIndex', -1);
222 this.el.addClass('x-hidden hide');
226 if(Roo.isIE){ // fix IE 1px bogus margin
227 this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
231 this.frameId = Roo.id();
235 var iframe = this.owner.wrap.createChild({
237 cls: 'form-control', // bootstrap..
241 'src' : Roo.SSL_SECURE_URL ? Roo.SSL_SECURE_URL : "javascript:false"
246 this.iframe = iframe.dom;
250 this.doc.designMode = 'on';
253 this.doc.write(this.getDocMarkup());
257 var task = { // must defer to wait for browser to be ready
259 //console.log("run task?" + this.doc.readyState);
261 if(this.doc.body || this.doc.readyState == 'complete'){
263 this.doc.designMode="on";
268 Roo.TaskMgr.stop(task);
269 this.initEditor.defer(10, this);
276 Roo.TaskMgr.start(task);
281 onResize : function(w, h)
283 Roo.log('resize: ' +w + ',' + h );
284 //Roo.HtmlEditorCore.superclass.onResize.apply(this, arguments);
288 if(typeof w == 'number'){
290 this.iframe.style.width = w + 'px';
292 if(typeof h == 'number'){
294 this.iframe.style.height = h + 'px';
296 (this.doc.body || this.doc.documentElement).style.height = (h - (this.iframePad*2)) + 'px';
303 * Toggles the editor between standard and source edit mode.
304 * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
306 toggleSourceEdit : function(sourceEditMode){
308 this.sourceEditMode = sourceEditMode === true;
310 if(this.sourceEditMode){
312 Roo.get(this.iframe).addClass(['x-hidden','hide', 'd-none']); //FIXME - what's the BS styles for these
315 Roo.get(this.iframe).removeClass(['x-hidden','hide', 'd-none']);
316 //this.iframe.className = '';
319 //this.setSize(this.owner.wrap.getSize());
320 //this.fireEvent('editmodechange', this, this.sourceEditMode);
327 * Protected method that will not generally be called directly. If you need/want
328 * custom HTML cleanup, this is the method you should override.
329 * @param {String} html The HTML to be cleaned
330 * return {String} The cleaned HTML
332 cleanHtml : function(html){
335 if(Roo.isSafari){ // strip safari nonsense
336 html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
339 if(html == ' '){
346 * HTML Editor -> Textarea
347 * Protected method that will not generally be called directly. Syncs the contents
348 * of the editor iframe with the textarea.
350 syncValue : function()
352 //Roo.log("HtmlEditorCore:syncValue (EDITOR->TEXT)");
353 if(this.initialized){
355 this.undoManager.addEvent();
358 var bd = (this.doc.body || this.doc.documentElement);
362 var div = document.createElement('div');
363 div.innerHTML = bd.innerHTML;
366 if (this.enableBlocks) {
367 new Roo.htmleditor.FilterBlock({ node : div });
372 var html = div.innerHTML;
374 var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
375 var m = bs ? bs.match(/text-align:(.*?);/i) : false;
377 html = '<div style="'+m[0]+'">' + html + '</div>';
380 html = this.cleanHtml(html);
381 // fix up the special chars.. normaly like back quotes in word...
382 // however we do not want to do this with chinese..
383 html = html.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g, function(match) {
385 var cc = match.charCodeAt();
387 // Get the character value, handling surrogate pairs
388 if (match.length == 2) {
389 // It's a surrogate pair, calculate the Unicode code point
390 var high = match.charCodeAt(0) - 0xD800;
391 var low = match.charCodeAt(1) - 0xDC00;
392 cc = (high * 0x400) + low + 0x10000;
394 (cc >= 0x4E00 && cc < 0xA000 ) ||
395 (cc >= 0x3400 && cc < 0x4E00 ) ||
396 (cc >= 0xf900 && cc < 0xfb00 )
401 // No, use a numeric entity. Here we brazenly (and possibly mistakenly)
402 return "&#" + cc + ";";
409 if(this.owner.fireEvent('beforesync', this, html) !== false){
410 this.el.dom.value = html;
411 this.owner.fireEvent('sync', this, html);
417 * TEXTAREA -> EDITABLE
418 * Protected method that will not generally be called directly. Pushes the value of the textarea
419 * into the iframe editor.
421 pushValue : function()
423 //Roo.log("HtmlEditorCore:pushValue (TEXT->EDITOR)");
424 if(this.initialized){
425 var v = this.el.dom.value.trim();
428 if(this.owner.fireEvent('beforepush', this, v) !== false){
429 var d = (this.doc.body || this.doc.documentElement);
432 this.el.dom.value = d.innerHTML;
433 this.owner.fireEvent('push', this, v);
435 if (this.autoClean) {
436 new Roo.htmleditor.FilterParagraph({node : this.doc.body}); // paragraphs
437 new Roo.htmleditor.FilterSpan({node : this.doc.body}); // empty spans
440 Roo.htmleditor.Block.initAll(this.doc.body);
441 this.updateLanguage();
443 var lc = this.doc.body.lastChild;
444 if (lc && lc.nodeType == 1 && lc.getAttribute("contenteditable") == "false") {
445 // add an extra line at the end.
446 this.doc.body.appendChild(this.doc.createElement('br'));
454 deferFocus : function(){
455 this.focus.defer(10, this);
460 if(this.win && !this.sourceEditMode){
467 assignDocWin: function()
469 var iframe = this.iframe;
472 this.doc = iframe.contentWindow.document;
473 this.win = iframe.contentWindow;
475 // if (!Roo.get(this.frameId)) {
478 // this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
479 // this.win = Roo.get(this.frameId).dom.contentWindow;
481 if (!Roo.get(this.frameId) && !iframe.contentDocument) {
485 this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
486 this.win = (iframe.contentWindow || Roo.get(this.frameId).dom.contentWindow);
491 initEditor : function(){
492 //console.log("INIT EDITOR");
497 this.doc.designMode="on";
499 this.doc.write(this.getDocMarkup());
502 var dbody = (this.doc.body || this.doc.documentElement);
503 //var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
504 // this copies styles from the containing element into thsi one..
505 // not sure why we need all of this..
506 //var ss = this.el.getStyles('font-size', 'background-image', 'background-repeat');
508 //var ss = this.el.getStyles( 'background-image', 'background-repeat');
509 //ss['background-attachment'] = 'fixed'; // w3c
510 dbody.bgProperties = 'fixed'; // ie
511 //Roo.DomHelper.applyStyles(dbody, ss);
512 Roo.EventManager.on(this.doc, {
514 'mouseup': this.onEditorEvent,
515 'dblclick': this.onEditorEvent,
516 'click': this.onEditorEvent,
517 'keyup': this.onEditorEvent,
522 Roo.EventManager.on(this.doc, {
523 'paste': this.onPasteEvent,
527 Roo.EventManager.on(this.doc, 'keypress', this.mozKeyPress, this);
530 if(Roo.isIE || Roo.isSafari || Roo.isOpera){
531 Roo.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
533 this.initialized = true;
536 // initialize special key events - enter
537 new Roo.htmleditor.KeyEnter({core : this});
541 this.owner.fireEvent('initialize', this);
544 // this is to prevent a href clicks resulting in a redirect?
546 onPasteEvent : function(e,v)
548 // I think we better assume paste is going to be a dirty load of rubish from word..
550 // even pasting into a 'email version' of this widget will have to clean up that mess.
551 var cd = (e.browserEvent.clipboardData || window.clipboardData);
553 // check what type of paste - if it's an image, then handle it differently.
554 if (cd.files.length > 0) {
556 var urlAPI = (window.createObjectURL && window) ||
557 (window.URL && URL.revokeObjectURL && URL) ||
558 (window.webkitURL && webkitURL);
560 var url = urlAPI.createObjectURL( cd.files[0]);
561 this.insertAtCursor('<img src=" + url + ">');
565 var html = cd.getData('text/html'); // clipboard event
566 var parser = new Roo.rtf.Parser(cd.getData('text/rtf'));
567 var images = parser.doc ? parser.doc.getElementsByType('pict') : [];
571 images = images.filter(function(g) { return !g.path.match(/^rtf\/(head|pgdsctbl|listtable)/); }) // ignore headers
572 .map(function(g) { return g.toDataURL(); });
575 html = this.cleanWordChars(html);
577 var d = (new DOMParser().parseFromString(html, 'text/html')).body;
580 var sn = this.getParentElement();
581 // check if d contains a table, and prevent nesting??
582 //Roo.log(d.getElementsByTagName('table'));
584 //Roo.log(sn.closest('table'));
585 if (d.getElementsByTagName('table').length && sn && sn.closest('table')) {
587 this.insertAtCursor("You can not nest tables");
588 //Roo.log("prevent?"); // fixme -
592 if (images.length > 0) {
593 Roo.each(d.getElementsByTagName('img'), function(img, i) {
594 img.setAttribute('src', images[i]);
597 if (this.autoClean) {
598 new Roo.htmleditor.FilterStyleToTag({ node : d });
599 new Roo.htmleditor.FilterAttributes({
601 attrib_white : ['href', 'src', 'name', 'align'],
602 attrib_clean : ['href', 'src' ]
604 new Roo.htmleditor.FilterBlack({ node : d, tag : this.black});
606 new Roo.htmleditor.FilterKeepChildren({node : d, tag : [ 'FONT' ]} );
607 new Roo.htmleditor.FilterParagraph({ node : d });
608 new Roo.htmleditor.FilterSpan({ node : d });
609 new Roo.htmleditor.FilterLongBr({ node : d });
611 if (this.enableBlocks) {
613 Array.from(d.getElementsByTagName('img')).forEach(function(img) {
614 if (img.closest('figure')) { // assume!! that it's aready
617 var fig = new Roo.htmleditor.BlockFigure({
620 fig.updateElement(img); // replace it..
626 this.insertAtCursor(d.innerHTML.replace(/ /g,' '));
627 if (this.enableBlocks) {
628 Roo.htmleditor.Block.initAll(this.doc.body);
634 // default behaveiour should be our local cleanup paste? (optional?)
635 // for simple editor - we want to hammer the paste and get rid of everything... - so over-rideable..
636 //this.owner.fireEvent('paste', e, v);
639 onDestroy : function(){
645 //for (var i =0; i < this.toolbars.length;i++) {
646 // // fixme - ask toolbars for heights?
647 // this.toolbars[i].onDestroy();
650 //this.wrap.dom.innerHTML = '';
651 //this.wrap.remove();
656 onFirstFocus : function(){
659 this.undoManager = new Roo.lib.UndoManager(100,(this.doc.body || this.doc.documentElement));
661 this.activated = true;
664 if(Roo.isGecko){ // prevent silly gecko errors
666 var s = this.win.getSelection();
667 if(!s.focusNode || s.focusNode.nodeType != 3){
668 var r = s.getRangeAt(0);
669 r.selectNodeContents((this.doc.body || this.doc.documentElement));
674 this.execCmd('useCSS', true);
675 this.execCmd('styleWithCSS', false);
678 this.owner.fireEvent('activate', this);
682 adjustFont: function(btn){
683 var adjust = btn.cmd == 'increasefontsize' ? 1 : -1;
684 //if(Roo.isSafari){ // safari
687 var v = parseInt(this.doc.queryCommandValue('FontSize')|| 3, 10);
688 if(Roo.isSafari){ // safari
689 var sm = { 10 : 1, 13: 2, 16:3, 18:4, 24: 5, 32:6, 48: 7 };
690 v = (v < 10) ? 10 : v;
691 v = (v > 48) ? 48 : v;
692 v = typeof(sm[v]) == 'undefined' ? 1 : sm[v];
697 v = Math.max(1, v+adjust);
699 this.execCmd('FontSize', v );
702 onEditorEvent : function(e)
706 if (e && (e.ctrlKey || e.metaKey) && e.keyCode === 90) {
707 return; // we do not handle this.. (undo manager does..)
709 // in theory this detects if the last element is not a br, then we try and do that.
710 // its so clicking in space at bottom triggers adding a br and moving the cursor.
712 e.target.nodeName == 'BODY' &&
713 e.type == "mouseup" &&
714 this.doc.body.lastChild
716 var lc = this.doc.body.lastChild;
717 // gtx-trans is google translate plugin adding crap.
718 while ((lc.nodeType == 3 && lc.nodeValue == '') || lc.id == 'gtx-trans') {
719 lc = lc.previousSibling;
721 if (lc.nodeType == 1 && lc.nodeName != 'BR') {
722 // if last element is <BR> - then dont do anything.
724 var ns = this.doc.createElement('br');
725 this.doc.body.appendChild(ns);
726 range = this.doc.createRange();
727 range.setStartAfter(ns);
728 range.collapse(true);
729 var sel = this.win.getSelection();
730 sel.removeAllRanges();
737 this.fireEditorEvent(e);
738 // this.updateToolbar();
739 this.syncValue(); //we can not sync so often.. sync cleans, so this breaks stuff
742 fireEditorEvent: function(e)
744 this.owner.fireEvent('editorevent', this, e);
747 insertTag : function(tg)
749 // could be a bit smarter... -> wrap the current selected tRoo..
750 if (tg.toLowerCase() == 'span' ||
751 tg.toLowerCase() == 'code' ||
752 tg.toLowerCase() == 'sup' ||
753 tg.toLowerCase() == 'sub'
756 range = this.createRange(this.getSelection());
757 var wrappingNode = this.doc.createElement(tg.toLowerCase());
758 wrappingNode.appendChild(range.extractContents());
759 range.insertNode(wrappingNode);
766 this.execCmd("formatblock", tg);
767 this.undoManager.addEvent();
770 insertText : function(txt)
774 var range = this.createRange();
775 range.deleteContents();
776 //alert(Sender.getAttribute('label'));
778 range.insertNode(this.doc.createTextNode(txt));
779 this.undoManager.addEvent();
785 * Executes a Midas editor command on the editor document and performs necessary focus and
786 * toolbar updates. <b>This should only be called after the editor is initialized.</b>
787 * @param {String} cmd The Midas command
788 * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
790 relayCmd : function(cmd, value)
796 case 'justifycenter':
797 // if we are in a cell, then we will adjust the
798 var n = this.getParentElement();
799 var td = n.closest('td');
801 var bl = Roo.htmleditor.Block.factory(td);
802 bl.textAlign = cmd.replace('justify','');
804 this.owner.fireEvent('editorevent', this);
807 this.execCmd('styleWithCSS', true); //
811 // if there is no selection, then we insert, and set the curson inside it..
812 this.execCmd('styleWithCSS', false);
822 this.execCmd(cmd, value);
823 this.owner.fireEvent('editorevent', this);
824 //this.updateToolbar();
825 this.owner.deferFocus();
829 * Executes a Midas editor command directly on the editor document.
830 * For visual commands, you should use {@link #relayCmd} instead.
831 * <b>This should only be called after the editor is initialized.</b>
832 * @param {String} cmd The Midas command
833 * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
835 execCmd : function(cmd, value){
836 this.doc.execCommand(cmd, false, value === undefined ? null : value);
843 * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
845 * @param {String} text | dom node..
847 insertAtCursor : function(text)
854 if(Roo.isGecko || Roo.isOpera || Roo.isSafari){
858 // from jquery ui (MIT licenced)
862 if (win.getSelection && win.getSelection().getRangeAt) {
864 // delete the existing?
866 this.createRange(this.getSelection()).deleteContents();
867 range = win.getSelection().getRangeAt(0);
868 node = typeof(text) == 'string' ? range.createContextualFragment(text) : text;
869 range.insertNode(node);
870 range = range.cloneRange();
871 range.collapse(false);
873 win.getSelection().removeAllRanges();
874 win.getSelection().addRange(range);
878 } else if (win.document.selection && win.document.selection.createRange) {
879 // no firefox support
880 var txt = typeof(text) == 'string' ? text : text.outerHTML;
881 win.document.selection.createRange().pasteHTML(txt);
884 // no firefox support
885 var txt = typeof(text) == 'string' ? text : text.outerHTML;
886 this.execCmd('InsertHTML', txt);
894 mozKeyPress : function(e){
896 var c = e.getCharCode(), cmd;
899 c = String.fromCharCode(c).toLowerCase();
913 // this.cleanUpPaste.defer(100, this);
931 fixKeys : function(){ // load time branching for fastest keydown performance
936 var k = e.getKey(), r;
939 r = this.doc.selection.createRange();
942 r.pasteHTML('    ');
947 /// this is handled by Roo.htmleditor.KeyEnter
950 r = this.doc.selection.createRange();
952 var target = r.parentElement();
953 if(!target || target.tagName.toLowerCase() != 'li'){
955 r.pasteHTML('<br/>');
962 //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
963 // this.cleanUpPaste.defer(100, this);
969 }else if(Roo.isOpera){
975 this.execCmd('InsertHTML','    ');
979 //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
980 // this.cleanUpPaste.defer(100, this);
985 }else if(Roo.isSafari){
991 this.execCmd('InsertText','\t');
997 //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
998 // this.cleanUpPaste.defer(100, this);
1006 getAllAncestors: function()
1008 var p = this.getSelectedNode();
1011 a.push(p); // push blank onto stack..
1012 p = this.getParentElement();
1016 while (p && (p.nodeType == 1) && (p.tagName.toLowerCase() != 'body')) {
1020 a.push(this.doc.body);
1024 lastSelNode : false,
1027 getSelection : function()
1029 this.assignDocWin();
1030 return Roo.lib.Selection.wrap(Roo.isIE ? this.doc.selection : this.win.getSelection(), this.doc);
1034 * @param {DomElement} node the node to select
1036 selectNode : function(node, collapse)
1038 var nodeRange = node.ownerDocument.createRange();
1040 nodeRange.selectNode(node);
1042 nodeRange.selectNodeContents(node);
1044 if (collapse === true) {
1045 nodeRange.collapse(true);
1048 var s = this.win.getSelection();
1049 s.removeAllRanges();
1050 s.addRange(nodeRange);
1053 getSelectedNode: function()
1055 // this may only work on Gecko!!!
1057 // should we cache this!!!!
1061 var range = this.createRange(this.getSelection()).cloneRange();
1064 var parent = range.parentElement();
1066 var testRange = range.duplicate();
1067 testRange.moveToElementText(parent);
1068 if (testRange.inRange(range)) {
1071 if ((parent.nodeType != 1) || (parent.tagName.toLowerCase() == 'body')) {
1074 parent = parent.parentElement;
1079 // is ancestor a text element.
1080 var ac = range.commonAncestorContainer;
1081 if (ac.nodeType == 3) {
1085 var ar = ac.childNodes;
1088 var other_nodes = [];
1089 var has_other_nodes = false;
1090 for (var i=0;i<ar.length;i++) {
1091 if ((ar[i].nodeType == 3) && (!ar[i].data.length)) { // empty text ?
1094 // fullly contained node.
1096 if (this.rangeIntersectsNode(range,ar[i]) && this.rangeCompareNode(range,ar[i]) == 3) {
1101 // probably selected..
1102 if ((ar[i].nodeType == 1) && this.rangeIntersectsNode(range,ar[i]) && (this.rangeCompareNode(range,ar[i]) > 0)) {
1103 other_nodes.push(ar[i]);
1107 if (!this.rangeIntersectsNode(range,ar[i])|| (this.rangeCompareNode(range,ar[i]) == 0)) {
1112 has_other_nodes = true;
1114 if (!nodes.length && other_nodes.length) {
1117 if (has_other_nodes || !nodes.length || (nodes.length > 1)) {
1125 createRange: function(sel)
1127 // this has strange effects when using with
1128 // top toolbar - not sure if it's a great idea.
1129 //this.editor.contentWindow.focus();
1130 if (typeof sel != "undefined") {
1132 return sel.getRangeAt ? sel.getRangeAt(0) : sel.createRange();
1134 return this.doc.createRange();
1137 return this.doc.createRange();
1140 getParentElement: function()
1143 this.assignDocWin();
1144 var sel = Roo.isIE ? this.doc.selection : this.win.getSelection();
1146 var range = this.createRange(sel);
1149 var p = range.commonAncestorContainer;
1150 while (p.nodeType == 3) { // text node
1161 * Range intersection.. the hard stuff...
1165 * [ -- selected range --- ]
1169 * if end is before start or hits it. fail.
1170 * if start is after end or hits it fail.
1172 * if either hits (but other is outside. - then it's not
1178 // @see http://www.thismuchiknow.co.uk/?p=64.
1179 rangeIntersectsNode : function(range, node)
1181 var nodeRange = node.ownerDocument.createRange();
1183 nodeRange.selectNode(node);
1185 nodeRange.selectNodeContents(node);
1188 var rangeStartRange = range.cloneRange();
1189 rangeStartRange.collapse(true);
1191 var rangeEndRange = range.cloneRange();
1192 rangeEndRange.collapse(false);
1194 var nodeStartRange = nodeRange.cloneRange();
1195 nodeStartRange.collapse(true);
1197 var nodeEndRange = nodeRange.cloneRange();
1198 nodeEndRange.collapse(false);
1200 return rangeStartRange.compareBoundaryPoints(
1201 Range.START_TO_START, nodeEndRange) == -1 &&
1202 rangeEndRange.compareBoundaryPoints(
1203 Range.START_TO_START, nodeStartRange) == 1;
1207 rangeCompareNode : function(range, node)
1209 var nodeRange = node.ownerDocument.createRange();
1211 nodeRange.selectNode(node);
1213 nodeRange.selectNodeContents(node);
1217 range.collapse(true);
1219 nodeRange.collapse(true);
1221 var ss = range.compareBoundaryPoints( Range.START_TO_START, nodeRange);
1222 var ee = range.compareBoundaryPoints( Range.END_TO_END, nodeRange);
1224 //Roo.log(node.tagName + ': ss='+ss +', ee='+ee)
1226 var nodeIsBefore = ss == 1;
1227 var nodeIsAfter = ee == -1;
1229 if (nodeIsBefore && nodeIsAfter) {
1232 if (!nodeIsBefore && nodeIsAfter) {
1233 return 1; //right trailed.
1236 if (nodeIsBefore && !nodeIsAfter) {
1237 return 2; // left trailed.
1243 cleanWordChars : function(input) {// change the chars to hex code
1246 [ 8211, "–" ],
1247 [ 8212, "—" ],
1256 Roo.each(swapCodes, function(sw) {
1257 var swapper = new RegExp("\\u" + sw[0].toString(16), "g"); // hex codes
1259 output = output.replace(swapper, sw[1]);
1269 cleanUpChild : function (node)
1272 new Roo.htmleditor.FilterComment({node : node});
1273 new Roo.htmleditor.FilterAttributes({
1275 attrib_black : this.ablack,
1276 attrib_clean : this.aclean,
1277 style_white : this.cwhite,
1278 style_black : this.cblack
1280 new Roo.htmleditor.FilterBlack({ node : node, tag : this.black});
1281 new Roo.htmleditor.FilterKeepChildren({node : node, tag : this.tag_remove} );
1287 * Clean up MS wordisms...
1288 * @deprecated - use filter directly
1290 cleanWord : function(node)
1292 new Roo.htmleditor.FilterWord({ node : node ? node : this.doc.body });
1299 * @deprecated - use filters
1301 cleanTableWidths : function(node)
1303 new Roo.htmleditor.FilterTableWidth({ node : node ? node : this.doc.body});
1310 applyBlacklists : function()
1312 var w = typeof(this.owner.white) != 'undefined' && this.owner.white ? this.owner.white : [];
1313 var b = typeof(this.owner.black) != 'undefined' && this.owner.black ? this.owner.black : [];
1315 this.aclean = typeof(this.owner.aclean) != 'undefined' && this.owner.aclean ? this.owner.aclean : Roo.HtmlEditorCore.aclean;
1316 this.ablack = typeof(this.owner.ablack) != 'undefined' && this.owner.ablack ? this.owner.ablack : Roo.HtmlEditorCore.ablack;
1317 this.tag_remove = typeof(this.owner.tag_remove) != 'undefined' && this.owner.tag_remove ? this.owner.tag_remove : Roo.HtmlEditorCore.tag_remove;
1321 Roo.each(Roo.HtmlEditorCore.white, function(tag) {
1322 if (b.indexOf(tag) > -1) {
1325 this.white.push(tag);
1329 Roo.each(w, function(tag) {
1330 if (b.indexOf(tag) > -1) {
1333 if (this.white.indexOf(tag) > -1) {
1336 this.white.push(tag);
1341 Roo.each(Roo.HtmlEditorCore.black, function(tag) {
1342 if (w.indexOf(tag) > -1) {
1345 this.black.push(tag);
1349 Roo.each(b, function(tag) {
1350 if (w.indexOf(tag) > -1) {
1353 if (this.black.indexOf(tag) > -1) {
1356 this.black.push(tag);
1361 w = typeof(this.owner.cwhite) != 'undefined' && this.owner.cwhite ? this.owner.cwhite : [];
1362 b = typeof(this.owner.cblack) != 'undefined' && this.owner.cblack ? this.owner.cblack : [];
1366 Roo.each(Roo.HtmlEditorCore.cwhite, function(tag) {
1367 if (b.indexOf(tag) > -1) {
1370 this.cwhite.push(tag);
1374 Roo.each(w, function(tag) {
1375 if (b.indexOf(tag) > -1) {
1378 if (this.cwhite.indexOf(tag) > -1) {
1381 this.cwhite.push(tag);
1386 Roo.each(Roo.HtmlEditorCore.cblack, function(tag) {
1387 if (w.indexOf(tag) > -1) {
1390 this.cblack.push(tag);
1394 Roo.each(b, function(tag) {
1395 if (w.indexOf(tag) > -1) {
1398 if (this.cblack.indexOf(tag) > -1) {
1401 this.cblack.push(tag);
1406 setStylesheets : function(stylesheets)
1408 if(typeof(stylesheets) == 'string'){
1409 Roo.get(this.iframe.contentDocument.head).createChild({
1420 Roo.each(stylesheets, function(s) {
1425 Roo.get(_this.iframe.contentDocument.head).createChild({
1437 updateLanguage : function()
1439 if (!this.iframe || !this.iframe.contentDocument) {
1442 Roo.get(this.iframe.contentDocument.body).attr("lang", this.language);
1446 removeStylesheets : function()
1450 Roo.each(Roo.get(_this.iframe.contentDocument.head).select('link[rel=stylesheet]', true).elements, function(s){
1455 setStyle : function(style)
1457 Roo.get(this.iframe.contentDocument.head).createChild({
1466 // hide stuff that is not compatible
1484 * @cfg {String} fieldClass @hide
1487 * @cfg {String} focusClass @hide
1490 * @cfg {String} autoCreate @hide
1493 * @cfg {String} inputType @hide
1496 * @cfg {String} invalidClass @hide
1499 * @cfg {String} invalidText @hide
1502 * @cfg {String} msgFx @hide
1505 * @cfg {String} validateOnBlur @hide
1509 Roo.HtmlEditorCore.white = [
1510 'AREA', 'BR', 'IMG', 'INPUT', 'HR', 'WBR',
1512 'ADDRESS', 'BLOCKQUOTE', 'CENTER', 'DD', 'DIR', 'DIV',
1513 'DL', 'DT', 'H1', 'H2', 'H3', 'H4',
1514 'H5', 'H6', 'HR', 'ISINDEX', 'LISTING', 'MARQUEE',
1515 'MENU', 'MULTICOL', 'OL', 'P', 'PLAINTEXT', 'PRE',
1516 'TABLE', 'UL', 'XMP',
1518 'CAPTION', 'COL', 'COLGROUP', 'TBODY', 'TD', 'TFOOT', 'TH',
1521 'DIR', 'MENU', 'OL', 'UL', 'DL',
1527 Roo.HtmlEditorCore.black = [
1528 // 'embed', 'object', // enable - backend responsiblity to clean thiese
1530 'BASE', 'BASEFONT', 'BGSOUND', 'BLINK', 'BODY',
1531 'FRAME', 'FRAMESET', 'HEAD', 'HTML', 'ILAYER',
1532 'IFRAME', 'LAYER', 'LINK', 'META', 'OBJECT',
1533 'SCRIPT', 'STYLE' ,'TITLE', 'XML',
1534 //'FONT' // CLEAN LATER..
1535 'COLGROUP', 'COL' // messy tables.
1538 Roo.HtmlEditorCore.clean = [ // ?? needed???
1539 'SCRIPT', 'STYLE', 'TITLE', 'XML'
1541 Roo.HtmlEditorCore.tag_remove = [
1546 Roo.HtmlEditorCore.ablack = [
1550 Roo.HtmlEditorCore.aclean = [
1551 'action', 'background', 'codebase', 'dynsrc', 'href', 'lowsrc'
1555 Roo.HtmlEditorCore.pwhite= [
1556 'http', 'https', 'mailto'
1559 // white listed style attributes.
1560 Roo.HtmlEditorCore.cwhite= [
1561 // 'text-align', /// default is to allow most things..
1567 // black listed style attributes.
1568 Roo.HtmlEditorCore.cblack= [
1569 // 'font-size' -- this can be set by the project