X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=Roo%2FHtmlEditorCore.js;h=b997fb1b5fb5c3a72718dce48bb0f493320fe92a;hb=f88cf3bdd5f9e788a2c376c5102a2cae13683b12;hp=3acb71dbf30c55a6aec0969181b2a66d1f5c291a;hpb=f14a94ea74cabea4dc54de9d65df8590d0369684;p=roojs1
diff --git a/Roo/HtmlEditorCore.js b/Roo/HtmlEditorCore.js
index 3acb71dbf3..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..
@@ -179,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 +
//' +
@@ -313,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
@@ -340,28 +359,29 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, {
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..
-
-
- //Roo.each(Roo.get(this.doc.body).query('*[data-block]'), function(e) {
- // Roo.htmleditor.Block.factory(e);
- //},this);
+
+ 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?
- new Roo.htmleditor.FilterBlock({ node : div });
+ var tidy = new Roo.htmleditor.TidySerializer({
+ inner: true
+ });
+ var html = tidy.serialize(div);
+
- var html = div.innerHTML;
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;
@@ -424,7 +444,13 @@ 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();
var lc = this.doc.body.lastChild;
if (lc && lc.nodeType == 1 && lc.getAttribute("contenteditable") == "false") {
@@ -494,9 +520,11 @@ 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,
@@ -512,6 +540,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, {
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);
}
@@ -526,7 +555,8 @@ 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..
@@ -578,25 +608,39 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, {
img.setAttribute('src', images[i]);
});
}
-
-
- 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.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);
- Roo.htmleditor.Block.initAll(this.doc.body);
+ this.insertAtCursor(d.innerHTML.replace(/ /g,' '));
+ if (this.enableBlocks) {
+ Roo.htmleditor.Block.initAll(this.doc.body);
+ }
e.preventDefault();
@@ -671,6 +715,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, {
onEditorEvent : function(e)
{
+
if (e && (e.ctrlKey || e.metaKey) && e.keyCode === 90) {
return; // we do not handle this.. (undo manager does..)
@@ -683,7 +728,8 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, {
this.doc.body.lastChild
) {
var lc = this.doc.body.lastChild;
- while (lc.nodeType == 3 && lc.nodeValue == '') {
+ // 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') {
@@ -702,10 +748,15 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, {
- this.owner.fireEvent('editorevent', this, e);
+ 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)
{
@@ -750,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);
@@ -848,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();
}
@@ -860,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;
@@ -904,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;
@@ -920,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;
@@ -953,13 +1041,13 @@ 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 {
@@ -967,7 +1055,10 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, {
} catch (e) {
nodeRange.selectNodeContents(node);
}
- //nodeRange.collapse(true);
+ if (collapse === true) {
+ nodeRange.collapse(true);
+ }
+ //
var s = this.win.getSelection();
s.removeAllRanges();
s.addRange(nodeRange);
@@ -979,8 +1070,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, {
// should we cache this!!!!
-
-
+
var range = this.createRange(this.getSelection()).cloneRange();
@@ -1044,6 +1134,8 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, {
return nodes[0];
},
+
+
createRange: function(sel)
{
// this has strange effects when using with
@@ -1355,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;