X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=Roo%2Fform%2FHtmlEditor.js;h=de06645be9056993b9e119ba089d3f46108bcd22;hb=b84ecaacaa43d545c0b76931a7a42fe62517f8c4;hp=65cb17c5d7ff62fa9c7623c61f41676cd5b19781;hpb=b68ca3593aa70f25601577ecfe93732ba24470aa;p=roojs1 diff --git a/Roo/form/HtmlEditor.js b/Roo/form/HtmlEditor.js index 65cb17c5d7..de06645be9 100644 --- a/Roo/form/HtmlEditor.js +++ b/Roo/form/HtmlEditor.js @@ -59,7 +59,7 @@ Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, { width: 500, /** - * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets. + * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets - this is usally a good idea rootURL + '/roojs1/css/undoreset.css', . * */ stylesheets: false, @@ -86,7 +86,31 @@ Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, { * */ white: false, + /** + * @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, + /** + * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled) + */ + enableBlocks : true, + /** + * @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 {string} bodyCls default '' default classes to add to body of editable area - usually undoreset is a good start.. + */ + bodyCls : '', + /** + * @cfg {String} language default en - language of text (usefull for rtl languages) + * + */ + language: 'en', + + // id of frame.. frameId: false, @@ -105,7 +129,7 @@ Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, { defaultAutoCreate : { // modified by initCompnoent.. tag: "textarea", style:"width:500px;height:300px;", - autocomplete: "off" + autocomplete: "new-password" }, // private @@ -184,12 +208,26 @@ Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, { * preview the saved version of htmlEditor * @param {HtmlEditor} this */ - savedpreview: true + savedpreview: true, + + /** + * @event stylesheetsclick + * Fires when press the Sytlesheets button + * @param {Roo.HtmlEditorCore} this + */ + stylesheetsclick: true, + /** + * @event paste + * Fires when press user pastes into the editor + * @param {Roo.HtmlEditorCore} this + */ + paste: true, + }); this.defaultAutoCreate = { tag: "textarea", style:'width: ' + this.width + 'px;height: ' + this.height + 'px;', - autocomplete: "off" + autocomplete: "new-password" }; }, @@ -215,8 +253,19 @@ Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, { }, - - + /** + * get the Context selected node + * @returns {DomElement|boolean} selected node if active or false if none + * + */ + getSelectedNode : function() + { + if (this.toolbars.length < 2 || !this.toolbars[1].tb) { + return false; + } + return this.toolbars[1].tb.selectedNode; + + }, // private onRender : function(ct, position) { @@ -256,24 +305,116 @@ Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, { this.resizeEl.resizeTo.defer(100, this.resizeEl,[ this.width,this.height ] ); // should trigger onReize.. } - Roo.log('el!!!!'); - Roo.log(this.el); + this.keyNav = new Roo.KeyNav(this.el, { "tab" : function(e){ e.preventDefault(); - Roo.log('TAB'); + + var value = this.getValue(); + + var start = this.el.dom.selectionStart; + var end = this.el.dom.selectionEnd; + + if(!e.shiftKey){ + + this.setValue(value.substring(0, start) + "\t" + value.substring(end)); + this.el.dom.setSelectionRange(end + 1, end + 1); + return; + } + + var f = value.substring(0, start).split("\t"); + + if(f.pop().length != 0){ + return; + } + + this.setValue(f.join("\t") + value.substring(end)); + this.el.dom.setSelectionRange(start - 1, start - 1); + }, "home" : function(e){ e.preventDefault(); - Roo.log('HOME'); - Roo.log(this.el.dom.setSelectionRange(0,0)); + + var curr = this.el.dom.selectionStart; + var lines = this.getValue().split("\n"); + + if(!lines.length){ + return; + } + + if(e.ctrlKey){ + this.el.dom.setSelectionRange(0, 0); + return; + } + + var pos = 0; + + for (var i = 0; i < lines.length;i++) { + pos += lines[i].length; + + if(i != 0){ + pos += 1; + } + + if(pos < curr){ + continue; + } + + pos -= lines[i].length; + + break; + } + + if(!e.shiftKey){ + this.el.dom.setSelectionRange(pos, pos); + return; + } + + this.el.dom.selectionStart = pos; + this.el.dom.selectionEnd = curr; }, "end" : function(e){ e.preventDefault(); - Roo.log('END'); + + var curr = this.el.dom.selectionStart; + var lines = this.getValue().split("\n"); + + if(!lines.length){ + return; + } + + if(e.ctrlKey){ + this.el.dom.setSelectionRange(this.getValue().length, this.getValue().length); + return; + } + + var pos = 0; + + for (var i = 0; i < lines.length;i++) { + + pos += lines[i].length; + + if(i != 0){ + pos += 1; + } + + if(pos < curr){ + continue; + } + + break; + } + + if(!e.shiftKey){ + this.el.dom.setSelectionRange(pos, pos); + return; + } + + this.el.dom.selectionStart = curr; + this.el.dom.selectionEnd = pos; }, scope : this, @@ -318,7 +459,7 @@ Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, { var ah = h - this.wrap.getFrameWidth('tb') - tbh;// this.tb.el.getHeight(); ah -= 5; // knock a few pixes off for look.. - Roo.log(ah); +// Roo.log(ah); this.el.setHeight(this.adjustWidth('textarea', ah)); var eh = ah; } @@ -345,6 +486,8 @@ Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, { this.el.removeClass('x-hidden'); this.el.dom.removeAttribute('tabIndex'); this.el.focus(); + this.el.dom.scrollTop = 0; + for (var i = 0; i < this.toolbars.length; i++) { if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){ @@ -412,7 +555,17 @@ Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, { this.editorcore.pushValue(); }, + /** + * update the language in the body - really done by core + * @param {String} language - eg. en / ar / zh-CN etc.. + */ + updateLanguage : function(lang) + { + this.language = lang; + this.editorcore.language = lang; + this.editorcore.updateLanguage(); + }, // private deferFocus : function(){ this.focus.defer(10, this); @@ -461,6 +614,16 @@ Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, { pushValue : function() { this.editorcore.pushValue(); + }, + + setStylesheets : function(stylesheets) + { + this.editorcore.setStylesheets(stylesheets); + }, + + removeStylesheets : function() + { + this.editorcore.removeStylesheets(); }