We are using igHtmlEditor 14.1.20141.1020 in an ASP.NET MVC application. Loading is done as shown below in a .cshtml file:
$.ig.loader({ scriptPath: "@Url.Content("~/js/infra/")", cssPath: "@Url.Content("~/css/third-party/infra/")", resources: "igHtmlEditor" });
$.ig.loader(function () {$('#@ViewBag.HtmlEditorId').igHtmlEditor({ inputName: "Post", width: "98%", height: "48em", showInsertObjectToolbar: false, customToolbars: GetCustomToolbar() });
When executing thr above, the following error is thrown in infragistics.ui.htmleditor.js:
this.workspace.contentWindow.document.execCommand("styleWithCSS", showUI, comandValue); // Line 913
Can someone please help us in resolving the issue?
Thanks.
Hello Furqan,
Could you provide any more details about the error message you are getting? Is it "NS_ERROR_FAILURE" and if so do you have your igHtmlEditor located inside of a div that has display:none specified? If so, then this may be an issue with Firefox:
https://bugzilla.mozilla.org/show_bug.cgi?id=586366#c1
Please provide me with more details about how you are encountering this issue and how you have your page laid out.
Hi Jason,
Thanks for the reply.
1. Exception is of type NS_ERROR_FAILURE. T
2. The html editor layout is as below:
<div class="control-container"> <div name="EmailBodyContainer" id="EmailBodyContainer"> <iframe style="width: 100%; height: 100%;" scrolling="no" src="some_url" id="EmailBodyIFrame" iframeloaded="true">
<html document here> --> Just shows the html editor with toolbars but no content </iframe>
</div> </div>
3. Display:none is not set as mentioned by you.
Please let me know if you need more information.
Thanks,
Furqan
That appears to be the final rendered markup. To reproduce I'd need to know how you implementing the logic in your application, so I'd most likely need your logic in your View.
How does this page render in other browsers? Do you get exceptions there as well or is it only in FireFox? If you run the ASP.NET MVC Helper Sample from the Ignite UI Samples Browser in Firefox do you get the same error?
The exception is encountered only in Firefox and not on other browsers.
We call the action method from client which returns a view. Inside the view we are loading the ightmleditor, then fetching the content to be shown from server. Since the loading is throwing an uncaught exception, what i have done now is wrapped the ightml editor loading in a try..catch block as shown below:
$.ig.loader(function () { try{ $('#@ViewBag.HtmlEditorId').igHtmlEditor({ inputName: "Post", width: "98%", height: "48em", showInsertObjectToolbar: false, customToolbars: GetCustomToolbar() }); } catch (ex) { console.log('exception caught'); }
// fetch the content from server here });
Now the content is being shown,however since the loading threw an error, the styles are not applied. For eg, in the attached image, you can see that the content is not taking the entire height of the container. On other browsers, the height style is applied on the iframe:
<iframe class="ui-widget-content" id="EmailHtmlEditor_editor" style="height: 577.199999809265px;"></iframe>
In firefox, the style element is missing. Also the toolbar functions too dont function.
Please find the image here: http://1drv.ms/1ElZowb
Also please find the view.cshtml below for your perusal:
<!DOCTYPE html><html lang="en-US"><head> <title>Edit</title> <script src="infragistics.loader.js" type="text/javascript" </script> <script type="text/javascript"> $.ig.loader({ scriptPath: "@Url.Content("~/js/infra/")", cssPath: "@Url.Content("~/css/third-party/infra/")", resources: "igHtmlEditor" });
$.ig.loader(function () { $('#@ViewBag.HtmlEditorId').igHtmlEditor({ inputName: "Post", width: "98%", height: "48em", showInsertObjectToolbar: false, customToolbars: GetCustomToolbar() }); }
</script></head>
<body> <div id="@ViewBag.HtmlEditorId"></div></body></html>
Furqan,
What are you doing in the GetCustomToolbar function and how are you inserting content in to the HTML editor? So far everything I see here looks pretty standard and should work without issue. My thoughts is that most likely something is happening in that call to GetCustomToolbar(). If you remove that call do you still get the exception?
In GetCustomToolbar , for this particular scenario we are returning an empty array since we dont have any custom toolbar to be displayed. I have removed the call and the error is still reproducible.
This is how we are inserting content:
$.ajax({ url: url, cache: false, data: { ..some data }, success: function (result) { document.getElementById(iframeId).contentWindow.SetContent(result); }, failure: function (result) { } });
thanks,
If you want to set the content of the igHtmlEditor it is recommended to go through the editor's API and use the setContent method. Is there a reason you are setting the content on the iframe directly?
I attempted to follow a similar approach but used the setContent method. If you run the sample I have attached with this update are you able to reproduce the error you encounter in Firefox? If my sample is not a good representation of your implementation please feel free to modify the sample and send it back.
We are using the below code to set the content:
$('#HtmlEditorId').igHtmlEditor("setContent", value, "html");
The above method is called after getting the response from server.
Actually, the loading code is what is throwing the exception which is invoked before the call to get the content from the server. So not sure if loading the content is the issue.
The sample you have provided is working fine in firefox.
What does the styleWithCSS command is doing and why is it failing? Is it an issue with any css not being available?
execCommand("styleWithCss") is a standard JavaScript function that is used when a document is switched to designMode or when using contentEditable. In this instance we are telling the iframe that is the main editor of the control that it should have contentEditable=true and that it should use style attributes in markup for any styling that is applied. This really shouldn't cause any conflict in Firefox as the browser is compatible with this function.
Do you see anything in the sample that I provided that is a radical departure from how you have implemented the control? Would you be able to send me a sample that reproduces the behavior?