PDA

View Full Version : [CLOSED] HtmlEditor currentRange in IE11



CPA1158139
Jan 04, 2015, 11:45 PM
In the new version, and I met this problem?
http://forums.ext.net/showthread.php?33321-OPEN-477-HtmlEditor-icw-IE11&highlight=HtmlEditor+currentRange

It will remind currentRange undefined When clicked the field.


onEditorEvent: function () {
if (Ext.isIE && !Ext.isIE11) {
this.currentRange = this.getDoc().selection.createRange();
}
this.updateToolbar();
},


I do not know the location of 'override' right:


<%@ Page Language="C#" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.HtmlEditor1.Text = "<b>Some Initial HTML. You can edit it and submit to server.</b>";
}
}

protected void Submit(object sender, DirectEventArgs e)
{
X.Msg.Alert("Submit", "The following has been submitted:<br/><br/>" + this.HtmlEditor1.Text).Show();
}
</script>

<!DOCTYPE html>
<html>
<head runat="server">
<title>HtmlEditor - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script type="text/javascript">

Ext.form.field.HtmlEditor.override({
insertAtCursor: function (text) {
var doc, r, nnode;

if (!this.activated) {
return;
}

this.win.focus();
if (Ext.isIE && !Ext.isIE11) {
doc = this.getDoc();
r = this.currentRange || doc.selection.createRange();

if (r) {
r.pasteHTML(text);
this.syncValue();
this.deferFocus();
}
} else if (Ext.isIE11) {
doc = this.getDoc();
r = doc.getSelection().getRangeAt(0);

nnode = doc.createElement("span"); // Is there any way to avoid that? I cannot find...
r.surroundContents(nnode);
nnode.innerHTML = text;
} else {
this.execCmd("InsertHTML", text);
this.deferFocus();
}
}
});
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<h1>HtmlEditor</h1>

<p>Provides a lightweight HTML Editor component.</p>

<p>For more details, we would strongly recommend to read <a href="http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.HtmlEditor">the HtmlEditor ExtJS docs article</a> and <a href="http://forums.ext.net/showthread.php?20425&p=88270&viewfull=1#post88270">this Ext.NET forums thread</a> about possible problems with HtmlEditor.</p>

<br/>

<ext:HtmlEditor
ID="HtmlEditor1"
runat="server"
Width="600"
EnableAlignments="false"
EnableFontSize="false"
CreateLinkText="My CreateLinkText">
<ButtonTips>
<BackColor Text="My BackColor Tip" />
<Bold Text="My Bold Tip" />
</ButtonTips>
</ext:HtmlEditor>

<ext:Button runat="server" Text="Submit" OnDirectClick="Submit" />
</form>
</body>
</html>

http://forums.ext.net/attachment.php?attachmentid=18191&stc=1

RaphaelSaldanha
Jan 05, 2015, 1:14 AM
For now i suggest the following:


Ext.form.field.HtmlEditor.override({
onEditorEvent: function () {
if (Ext.isIE && !Ext.isIE11) {
var doc = this.getDoc();
if (doc.selection != null) {
this.currentRange = doc.selection.createRange();
}
}
this.updateToolbar();
}
});

CPA1158139
Jan 05, 2015, 4:53 AM
It works fine.
Thank you very much.
pls close.

RaphaelSaldanha
Jan 05, 2015, 6:22 AM
You're welcome.

It seems to be a bug, so let's wait for Daniil's position regarding this issue.

Daniil
Jan 05, 2015, 2:49 PM
Hi everybody,

Yes, I have already removed the old fix. The initial problem has been fixed in ExtJS 5 and everything should be OK now.

Once I commit ExtJS 5.1.0 to SVN, I will post a follow-up here.

RaphaelSaldanha
Jan 05, 2015, 3:25 PM
Thank you Daniil. Please keep us posted.

CPA1158139
Jan 06, 2015, 1:23 PM
By the way,
How to judge whether there is a htmlEditor control on a page in js ?
thanks.

RaphaelSaldanha
Jan 06, 2015, 1:52 PM
You can try one of the following approaches:

#1


<!DOCTYPE html>
<html>
<head runat="server">
<script type="text/javascript">
var hasHtmlEditor = function () {
for (var cmpID in Ext.ComponentManager.all) {
var cmp = Ext.ComponentManager.all[cmpID];
if (cmp.xtype == "htmleditor") {
alert("HtmlEditor found");
break;
}
}
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Button Text="Click Me" runat="server">
<Listeners>
<Click Handler="hasHtmlEditor()" />
</Listeners>
</ext:Button>
<ext:HtmlEditor ID="_hed" runat="server" />
</form>
</body>
</html>


#2


<!DOCTYPE html>
<html>
<head runat="server">
<script type="text/javascript">
var htmlEditorFound = false;

Ext.override(Ext.ComponentManager, {
register: function (item) {
this.callParent(arguments);
if (item.xtype == "htmleditor") {
htmlEditorFound = true;
}
},
});

var hasHtmlEditor = function () {
if (htmlEditorFound) {
alert("HtmlEditor found");
}
else {

alert("HtmlEditor not found");
}
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Button Text="Click Me" runat="server">
<Listeners>
<Click Handler="hasHtmlEditor()" />
</Listeners>
</ext:Button>
<ext:HtmlEditor ID="_hed" runat="server" />
</form>
</body>
</html>

CPA1158139
Jan 06, 2015, 2:12 PM
Thank you very much!
You are a good brother.

RaphaelSaldanha
Jan 06, 2015, 2:47 PM
You're welcome.

Let us know if you need further assistance.

Daniil
Jan 06, 2015, 3:22 PM
There is also one alternative approach more.

Ext.ComponentQuery.query("htmleditor").length > 0

RaphaelSaldanha
Jan 06, 2015, 4:05 PM
There is also one alternative approach more.


Ext.ComponentQuery.query("htmleditor").length > 0



The approach presented above works as expected but it has a performance problem, since it will navigate through all items, as shown below:

Ext.ComponentQuery.query uses Ext.ComponentQuery.filterByXType


filterByXType = function (items, xtype, shallow) {
if (xtype === '*') {
return items.slice();
}
else {
var result = [],
i = 0,
length = items.length,
candidate;
for (; i < length; i++) {
candidate = items[i];
if (candidate.isXType(xtype, shallow)) {
result.push(candidate);
}
}
return result;
}
}


Items passed to Ext.ComponentQuery.filterByXType:


Ext.ComponentManager.getAll()


CPA1158139's requirement is to know whether a HtmlEditor is presented on the page, so, in my opinion it's not good to navigate through all elements, although we are talking about milliseconds.

CPA1158139
Jan 07, 2015, 1:25 PM
You two really is too brilliant, admire. Learning.....

Daniil
Jan 07, 2015, 2:25 PM
Raphael, I agree with you on both the statements.

There might be another approach also. When you add an HtmlEditor on the page, you can set some global flag.

By the way, could you, please, clarify why you need to determine there is an HtmlEditor on the page or not? Just our of curiosity.

CPA1158139
Jan 07, 2015, 2:51 PM
The thing is that:
After RaphaelSaldanha tell me the code,I put this code into a JS file, start running good, later reported the error: Ext is not defined, but I do have a reference to the Ext.Net. so I think if to determine what, if the page is not htmlEditor, do not need to load the code. In fact this does not work either, because Ext is not defined the problem still exists, the judgment function also need Ext. and then I had to take him the code manually modify the download of the SVN code, and then get the Ext.Net.dll do not appear the mistake in the original.

So, I also feel strange, why don't you just give RaphaelSaldanha'code directly modifications to the SVN, so we in the IE 11 when running htmlEditor on all OK.

RaphaelSaldanha
Jan 07, 2015, 3:08 PM
There might be another approach also. When you add an HtmlEditor on the page, you can set some global flag.


Daniil, take a look on example #2: http://forums.ext.net/showthread.php?50111-HtmlEditor-currentRange-in-IE11&p=227981&viewfull=1#post227981

CPA1158139
Jan 07, 2015, 11:44 PM
When I update to the latest svn version #6243, this problem does not change.

Can replace B by A in SVN?

B:


onEditorEvent: function () {
if (Ext.isIE && !Ext.isIE11) {
this.currentRange = this.getDoc().selection.createRange();
}
this.updateToolbar();
}



A:


onEditorEvent: function () {
if (Ext.isIE && !Ext.isIE11) {
var doc = this.getDoc();
if (doc.selection != null) {
this.currentRange = doc.selection.createRange();
}
}
this.updateToolbar();
}

CPA1158139
Jan 08, 2015, 1:36 PM
They found a two frequent problems in the IE 11, NULL type error. The cursor will stay in the following location For reference only:

1、


fireEvent: function(eventName) {
var args = Array.prototype.slice.call(arguments, 1); //here!

return this.doFireEvent(eventName, args);
},




2、



getDoc: function () {
try {
return this.getWin().document; //here!
} catch (ex) {
return null;
}
},

getWin: function () {
var me = this,
name = me.id + "_IFrame",
win = Ext.isIE
? me.iframe.dom.contentWindow
: window.frames[name];
return win;
},

Daniil
Jan 09, 2015, 9:36 AM
Daniil, take a look on example #2: http://forums.ext.net/showthread.php?50111-HtmlEditor-currentRange-in-IE11&p=227981&viewfull=1#post227981

Raphael, I meant without overriding the Ext.ComponentManager's registerId. Just when an HtmlEditor is added to the page. Well, never mind at this moment.

@CPA1158139, the problem should be resolved with ExtJS 5.1.0, when I commit it to the SVN. Once I commit, I will let you know and we all could retest and confirm it is still reproducible or not. Apologize for the inconvenience.

CPA1158139
Jan 09, 2015, 3:44 PM
Never mind.Daniil.Thank you for working so hard.

I have a little not too clear,about ExtJS 5.1.0, is the direct integration of ext.net packaging, and I also installed separately? Or just get SVN updates only?

Daniil
Jan 12, 2015, 6:15 AM
I have a little not too clear,about ExtJS 5.1.0, is the direct integration of ext.net packaging, and I also installed separately? Or just get SVN updates only?

Currently, I have it only on my computer, in my local Ext.NET sources. I will committing it soon and it will get available via an SVN update.

Daniil
Jan 14, 2015, 9:17 AM
Hi @CPA1158139 and Raphael,

I just committed the initial ExtJS 5.1.0 update to SVN. It is still in a very beta stage, but you could test the existing issues.

Could you, please, confirm the issue with an HtmlEditor is solved or not?

RaphaelSaldanha
Jan 15, 2015, 11:26 AM
I confirm that this issue has been fixed in the SVN trunk. It will go to v3.1.0 beta release.

CPA1158139
Jan 15, 2015, 3:29 PM
I confirm that this issue has been fixed too.
Thank you very much.
Pls close.