X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=Roo%2FHtmlEditorCore.js;h=b997fb1b5fb5c3a72718dce48bb0f493320fe92a;hb=f88cf3bdd5f9e788a2c376c5102a2cae13683b12;hp=af483685fe3f7ebe39d3ba0d99f474d7b537908f;hpb=c8d97ffdfa54722fd082a1c95c777a9716204df6;p=roojs1 diff --git a/Roo/HtmlEditorCore.js b/Roo/HtmlEditorCore.js index af483685fe..b997fb1b5f 100644 --- a/Roo/HtmlEditorCore.js +++ b/Roo/HtmlEditorCore.js @@ -71,7 +71,8 @@ Roo.HtmlEditorCore = function(config){ * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks. * @param {Roo.HtmlEditorCore} this */ - editorevent: true + editorevent: true + }); @@ -107,15 +108,30 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { * @cfg {Number} width (in pixels) */ width: 500, + /** + * @cfg {boolean} autoClean - default true - loading and saving will remove quite a bit of formating, + * if you are doing an email editor, this probably needs disabling, it's designed + */ + autoClean: true, + /** + * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled) + */ + enableBlocks : true, /** * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets. * */ stylesheets: false, + /** + * @cfg {String} language default en - language of text (usefull for rtl languages) + * + */ + language: 'en', /** - * @cfg {boolean} allowComments - default false - allow comments in HTML source - by default they are stripped - if you are editing email you may need this. + * @cfg {boolean} allowComments - default false - allow comments in HTML source + * - by default they are stripped - if you are editing email you may need this. */ allowComments: false, // id of frame.. @@ -139,6 +155,8 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { bodyCls : '', + + undoManager : false, /** * Protected method that will not generally be called directly. It * is called when the editor initializes the iframe with HTML contents. Override this method if you @@ -177,14 +195,16 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { st += ''; - - var cls = 'roo-htmleditor-body'; + + st += ''; + + var cls = 'notranslate roo-htmleditor-body'; if(this.bodyCls.length){ cls += ' ' + this.bodyCls; } - return '' + st + + return '' + st + //' + @@ -243,6 +263,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { if(this.doc.body || this.doc.readyState == 'complete'){ try { this.doc.designMode="on"; + } catch (e) { return; } @@ -310,7 +331,8 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { * @param {String} html The HTML to be cleaned * return {String} The cleaned HTML */ - cleanHtml : function(html){ + cleanHtml : function(html) + { html = String(html); if(html.length > 5){ if(Roo.isSafari){ // strip safari nonsense @@ -330,29 +352,36 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { */ syncValue : function() { - Roo.log("HtmlEditorCore:syncValue (EDITOR->TEXT)"); + //Roo.log("HtmlEditorCore:syncValue (EDITOR->TEXT)"); if(this.initialized){ - var bd = (this.doc.body || this.doc.documentElement); - //this.cleanUpPaste(); -- this is done else where and causes havoc.. - // not sure if this is really the place for this - // the blocks are synced occasionaly - since we currently dont add listeners on the blocks - // this has to update attributes that get duped.. like alt and caption.. + this.undoManager.addEvent(); + - Roo.each(Roo.get(this.doc.body).query('*[data-block]'), function(e) { - Roo.htmleditor.Block.factory(e); - },this); + var bd = (this.doc.body || this.doc.documentElement); + + var sel = this.win.getSelection(); var div = document.createElement('div'); div.innerHTML = bd.innerHTML; - // remove content editable. (blocks) + var gtx = div.getElementsByClassName('gtx-trans-icon'); // google translate - really annoying and difficult to get rid of. + if (gtx.length > 0) { + var rm = gtx.item(0).parentNode; + rm.parentNode.removeChild(rm); + } - - new Roo.htmleditor.FilterAttributes({node : div, attrib_black: [ 'contenteditable' ] }); + if (this.enableBlocks) { + new Roo.htmleditor.FilterBlock({ node : div }); + } //?? tidy? - var html = div.innerHTML; + var tidy = new Roo.htmleditor.TidySerializer({ + inner: true + }); + var html = tidy.serialize(div); + + if(Roo.isSafari){ var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element! var m = bs ? bs.match(/text-align:(.*?);/i) : false; @@ -403,7 +432,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { */ pushValue : function() { - Roo.log("HtmlEditorCore:pushValue (TEXT->EDITOR)"); + //Roo.log("HtmlEditorCore:pushValue (TEXT->EDITOR)"); if(this.initialized){ var v = this.el.dom.value.trim(); @@ -415,12 +444,14 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { this.el.dom.value = d.innerHTML; this.owner.fireEvent('push', this, v); } + if (this.autoClean) { + new Roo.htmleditor.FilterParagraph({node : this.doc.body}); // paragraphs + new Roo.htmleditor.FilterSpan({node : this.doc.body}); // empty spans + } + + Roo.htmleditor.Block.initAll(this.doc.body); + this.updateLanguage(); - Roo.each(Roo.get(this.doc.body).query('*[data-block]'), function(e) { - - Roo.htmleditor.Block.factory(e); - - },this); var lc = this.doc.body.lastChild; if (lc && lc.nodeType == 1 && lc.getAttribute("contenteditable") == "false") { // add an extra line at the end. @@ -489,20 +520,27 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { //var ss = this.el.getStyles( 'background-image', 'background-repeat'); //ss['background-attachment'] = 'fixed'; // w3c dbody.bgProperties = 'fixed'; // ie + dbody.setAttribute("translate", "no"); + //Roo.DomHelper.applyStyles(dbody, ss); Roo.EventManager.on(this.doc, { - //'mousedown': this.onEditorEvent, + 'mouseup': this.onEditorEvent, 'dblclick': this.onEditorEvent, 'click': this.onEditorEvent, 'keyup': this.onEditorEvent, - 'paste': this.onPasteEvent, + buffer:100, scope: this }); + Roo.EventManager.on(this.doc, { + 'paste': this.onPasteEvent, + scope : this + }); if(Roo.isGecko){ Roo.EventManager.on(this.doc, 'keypress', this.mozKeyPress, this); } + //??? needed??? if(Roo.isIE || Roo.isSafari || Roo.isOpera){ Roo.EventManager.on(this.doc, 'keydown', this.fixKeys, this); } @@ -517,20 +555,93 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { this.owner.fireEvent('initialize', this); this.pushValue(); }, - + // this is to prevent a href clicks resulting in a redirect? + onPasteEvent : function(e,v) { // I think we better assume paste is going to be a dirty load of rubish from word.. // even pasting into a 'email version' of this widget will have to clean up that mess. + var cd = (e.browserEvent.clipboardData || window.clipboardData); + + // check what type of paste - if it's an image, then handle it differently. + if (cd.files.length > 0) { + // pasting images? + var urlAPI = (window.createObjectURL && window) || + (window.URL && URL.revokeObjectURL && URL) || + (window.webkitURL && webkitURL); + + var url = urlAPI.createObjectURL( cd.files[0]); + this.insertAtCursor(''); + return false; + } + + var html = cd.getData('text/html'); // clipboard event + var parser = new Roo.rtf.Parser(cd.getData('text/rtf')); + var images = parser.doc ? parser.doc.getElementsByType('pict') : []; + Roo.log(images); + //Roo.log(imgs); + // fixme.. + images = images.filter(function(g) { return !g.path.match(/^rtf\/(head|pgdsctbl|listtable)/); }) // ignore headers + .map(function(g) { return g.toDataURL(); }); + + + html = this.cleanWordChars(html); + + var d = (new DOMParser().parseFromString(html, 'text/html')).body; + + + var sn = this.getParentElement(); + // check if d contains a table, and prevent nesting?? + //Roo.log(d.getElementsByTagName('table')); + //Roo.log(sn); + //Roo.log(sn.closest('table')); + if (d.getElementsByTagName('table').length && sn && sn.closest('table')) { + e.preventDefault(); + this.insertAtCursor("You can not nest tables"); + //Roo.log("prevent?"); // fixme - + return false; + } + + if (images.length > 0) { + Roo.each(d.getElementsByTagName('img'), function(img, i) { + img.setAttribute('src', images[i]); + }); + } + if (this.autoClean) { + new Roo.htmleditor.FilterStyleToTag({ node : d }); + new Roo.htmleditor.FilterAttributes({ + node : d, + attrib_white : ['href', 'src', 'name', 'align'], + attrib_clean : ['href', 'src' ] + }); + new Roo.htmleditor.FilterBlack({ node : d, tag : this.black}); + // should be fonts.. + new Roo.htmleditor.FilterKeepChildren({node : d, tag : [ 'FONT' ]} ); + new Roo.htmleditor.FilterParagraph({ node : d }); + new Roo.htmleditor.FilterSpan({ node : d }); + new Roo.htmleditor.FilterLongBr({ node : d }); + } + if (this.enableBlocks) { + + Array.from(d.getElementsByTagName('img')).forEach(function(img) { + if (img.closest('figure')) { // assume!! that it's aready + return; + } + var fig = new Roo.htmleditor.BlockFigure({ + image_src : img.src + }); + fig.updateElement(img); // replace it.. + + }); + } + + + this.insertAtCursor(d.innerHTML.replace(/ /g,' ')); + if (this.enableBlocks) { + Roo.htmleditor.Block.initAll(this.doc.body); + } - var txt = e.browserEvent.clipboardData.getData('Text'); // clipboard event - var d = document.createElement('div'); - d.innerHTML = txt; - new Roo.htmleditor.FilterStyleToTag({ node : d }); - new Roo.htmleditor.FilterAttributes({ node : d }); - - this.insertAtCursor(d.innerHTML); e.preventDefault(); return false; @@ -559,7 +670,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { onFirstFocus : function(){ this.assignDocWin(); - + this.undoManager = new Roo.lib.UndoManager(100,(this.doc.body || this.doc.documentElement)); this.activated = true; @@ -604,10 +715,48 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { onEditorEvent : function(e) { - this.owner.fireEvent('editorevent', this, e); + + + if (e && (e.ctrlKey || e.metaKey) && e.keyCode === 90) { + return; // we do not handle this.. (undo manager does..) + } + // in theory this detects if the last element is not a br, then we try and do that. + // its so clicking in space at bottom triggers adding a br and moving the cursor. + if (e && + e.target.nodeName == 'BODY' && + e.type == "mouseup" && + this.doc.body.lastChild + ) { + var lc = this.doc.body.lastChild; + // gtx-trans is google translate plugin adding crap. + while ((lc.nodeType == 3 && lc.nodeValue == '') || lc.id == 'gtx-trans') { + lc = lc.previousSibling; + } + if (lc.nodeType == 1 && lc.nodeName != 'BR') { + // if last element is
- then dont do anything. + + var ns = this.doc.createElement('br'); + this.doc.body.appendChild(ns); + range = this.doc.createRange(); + range.setStartAfter(ns); + range.collapse(true); + var sel = this.win.getSelection(); + sel.removeAllRanges(); + sel.addRange(range); + } + } + + + + this.fireEditorEvent(e); // this.updateToolbar(); this.syncValue(); //we can not sync so often.. sync cleans, so this breaks stuff }, + + fireEditorEvent: function(e) + { + this.owner.fireEvent('editorevent', this, e); + }, insertTag : function(tg) { @@ -629,7 +778,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { } this.execCmd("formatblock", tg); - + this.undoManager.addEvent(); }, insertText : function(txt) @@ -641,6 +790,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { //alert(Sender.getAttribute('label')); range.insertNode(this.doc.createTextNode(txt)); + this.undoManager.addEvent(); } , @@ -651,7 +801,37 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { * @param {String} cmd The Midas command * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null) */ - relayCmd : function(cmd, value){ + relayCmd : function(cmd, value) + { + + switch (cmd) { + case 'justifyleft': + case 'justifyright': + case 'justifycenter': + // if we are in a cell, then we will adjust the + var n = this.getParentElement(); + var td = n.closest('td'); + if (td) { + var bl = Roo.htmleditor.Block.factory(td); + bl.textAlign = cmd.replace('justify',''); + bl.updateElement(); + this.owner.fireEvent('editorevent', this); + return; + } + this.execCmd('styleWithCSS', true); // + break; + case 'bold': + case 'italic': + // if there is no selection, then we insert, and set the curson inside it.. + this.execCmd('styleWithCSS', false); + break; + + + default: + break; + } + + this.win.focus(); this.execCmd(cmd, value); this.owner.fireEvent('editorevent', this); @@ -684,20 +864,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { if(!this.activated){ return; } - /* - if(Roo.isIE){ - this.win.focus(); - var r = this.doc.selection.createRange(); - if(r){ - r.collapse(true); - r.pasteHTML(text); - this.syncValue(); - this.deferFocus(); - - } - return; - } - */ + if(Roo.isGecko || Roo.isOpera || Roo.isSafari){ this.win.focus(); @@ -707,19 +874,31 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { var win = this.win; if (win.getSelection && win.getSelection().getRangeAt) { + + // delete the existing? + + this.createRange(this.getSelection()).deleteContents(); range = win.getSelection().getRangeAt(0); node = typeof(text) == 'string' ? range.createContextualFragment(text) : text; range.insertNode(node); + range = range.cloneRange(); + range.collapse(false); + + win.getSelection().removeAllRanges(); + win.getSelection().addRange(range); + + + } else if (win.document.selection && win.document.selection.createRange) { // no firefox support var txt = typeof(text) == 'string' ? text : text.outerHTML; win.document.selection.createRange().pasteHTML(txt); + } else { // no firefox support var txt = typeof(text) == 'string' ? text : text.outerHTML; this.execCmd('InsertHTML', txt); } - this.syncValue(); this.deferFocus(); @@ -750,9 +929,11 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { } if(cmd){ - this.win.focus(); - this.execCmd(cmd); - this.deferFocus(); + + this.relayCmd(cmd); + //this.win.focus(); + //this.execCmd(cmd); + //this.deferFocus(); e.preventDefault(); } @@ -762,6 +943,8 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { // private fixKeys : function(){ // load time branching for fastest keydown performance + + if(Roo.isIE){ return function(e){ var k = e.getKey(), r; @@ -775,7 +958,8 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { } return; } - + /// this is handled by Roo.htmleditor.KeyEnter + /* if(k == e.ENTER){ r = this.doc.selection.createRange(); if(r){ @@ -788,6 +972,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { } } } + */ //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste // this.cleanUpPaste.defer(100, this); // return; @@ -804,6 +989,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { this.execCmd('InsertHTML','    '); this.deferFocus(); } + //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste // this.cleanUpPaste.defer(100, this); // return; @@ -820,6 +1006,8 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { this.deferFocus(); return; } + this.mozKeyPress(e); + //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste // this.cleanUpPaste.defer(100, this); // return; @@ -853,25 +1041,27 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { getSelection : function() { this.assignDocWin(); - return Roo.isIE ? this.doc.selection : this.win.getSelection(); + return Roo.lib.Selection.wrap(Roo.isIE ? this.doc.selection : this.win.getSelection(), this.doc); }, /** * Select a dom node * @param {DomElement} node the node to select */ - selectNode : function(node) + selectNode : function(node, collapse) { - - var nodeRange = node.ownerDocument.createRange(); - try { - nodeRange.selectNode(node); - } catch (e) { - nodeRange.selectNodeContents(node); - } - //nodeRange.collapse(true); - var s = this.win.getSelection(); - s.removeAllRanges(); - s.addRange(nodeRange); + var nodeRange = node.ownerDocument.createRange(); + try { + nodeRange.selectNode(node); + } catch (e) { + nodeRange.selectNodeContents(node); + } + if (collapse === true) { + nodeRange.collapse(true); + } + // + var s = this.win.getSelection(); + s.removeAllRanges(); + s.addRange(nodeRange); }, getSelectedNode: function() @@ -880,8 +1070,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { // should we cache this!!!! - - + var range = this.createRange(this.getSelection()).cloneRange(); @@ -945,6 +1134,8 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { return nodes[0]; }, + + createRange: function(sel) { // this has strange effects when using with @@ -1064,10 +1255,19 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { }, cleanWordChars : function(input) {// change the chars to hex code - var he = Roo.HtmlEditorCore; + var swapCodes = [ + [ 8211, "–" ], + [ 8212, "—" ], + [ 8216, "'" ], + [ 8217, "'" ], + [ 8220, '"' ], + [ 8221, '"' ], + [ 8226, "*" ], + [ 8230, "..." ] + ]; var output = input; - Roo.each(he.swapCodes, function(sw) { + Roo.each(swapCodes, function(sw) { var swapper = new RegExp("\\u" + sw[0].toString(16), "g"); // hex codes output = output.replace(swapper, sw[1]); @@ -1247,6 +1447,16 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { }, + + updateLanguage : function() + { + if (!this.iframe || !this.iframe.contentDocument) { + return; + } + Roo.get(this.iframe.contentDocument.body).attr("lang", this.language); + }, + + removeStylesheets : function() { var _this = this; @@ -1311,36 +1521,39 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { }); Roo.HtmlEditorCore.white = [ - 'area', 'br', 'img', 'input', 'hr', 'wbr', + 'AREA', 'BR', 'IMG', 'INPUT', 'HR', 'WBR', - 'address', 'blockquote', 'center', 'dd', 'dir', 'div', - 'dl', 'dt', 'h1', 'h2', 'h3', 'h4', - 'h5', 'h6', 'hr', 'isindex', 'listing', 'marquee', - 'menu', 'multicol', 'ol', 'p', 'plaintext', 'pre', - 'table', 'ul', 'xmp', + 'ADDRESS', 'BLOCKQUOTE', 'CENTER', 'DD', 'DIR', 'DIV', + 'DL', 'DT', 'H1', 'H2', 'H3', 'H4', + 'H5', 'H6', 'HR', 'ISINDEX', 'LISTING', 'MARQUEE', + 'MENU', 'MULTICOL', 'OL', 'P', 'PLAINTEXT', 'PRE', + 'TABLE', 'UL', 'XMP', - 'caption', 'col', 'colgroup', 'tbody', 'td', 'tfoot', 'th', - 'thead', 'tr', + 'CAPTION', 'COL', 'COLGROUP', 'TBODY', 'TD', 'TFOOT', 'TH', + 'THEAD', 'TR', - 'dir', 'menu', 'ol', 'ul', 'dl', + 'DIR', 'MENU', 'OL', 'UL', 'DL', - 'embed', 'object' + 'EMBED', 'OBJECT' ]; Roo.HtmlEditorCore.black = [ // 'embed', 'object', // enable - backend responsiblity to clean thiese - 'applet', // - 'base', 'basefont', 'bgsound', 'blink', 'body', - 'frame', 'frameset', 'head', 'html', 'ilayer', - 'iframe', 'layer', 'link', 'meta', 'object', - 'script', 'style' ,'title', 'xml' // clean later.. + 'APPLET', // + 'BASE', 'BASEFONT', 'BGSOUND', 'BLINK', 'BODY', + 'FRAME', 'FRAMESET', 'HEAD', 'HTML', 'ILAYER', + 'IFRAME', 'LAYER', 'LINK', 'META', 'OBJECT', + 'SCRIPT', 'STYLE' ,'TITLE', 'XML', + //'FONT' // CLEAN LATER.. + 'COLGROUP', 'COL' // messy tables. + ]; -Roo.HtmlEditorCore.clean = [ - 'script', 'style', 'title', 'xml' +Roo.HtmlEditorCore.clean = [ // ?? needed??? + 'SCRIPT', 'STYLE', 'TITLE', 'XML' ]; Roo.HtmlEditorCore.tag_remove = [ - 'font' + 'FONT', 'TBODY' ]; // attributes.. @@ -1371,15 +1584,6 @@ Roo.HtmlEditorCore.cblack= [ ]; -Roo.HtmlEditorCore.swapCodes =[ - [ 8211, "–" ], - [ 8212, "—" ], - [ 8216, "'" ], - [ 8217, "'" ], - [ 8220, '"' ], - [ 8221, '"' ], - [ 8226, "*" ], - [ 8230, "..." ] -]; + \ No newline at end of file