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
I'm still attempting to reproduce this on my end to get to the root cause of the behavior. Which element are you applying the igHtmlEditor to in that markup? The EmailBodyContainer div or the EmailBodyIFrame iframe?
How does the control behave in browsers other than Firefox?
This is the complete html :
<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 lang="en-GB"> <head> <title>Edit</title> <script type="text/javascript">
$.ig.loader({ scriptPath: "/RespondDev/js/infra/", cssPath: "/RespondDev/css/third-party/infra/", resources: "igHtmlEditor" });
$.ig.loader(function () {
$('#EmailHtmlEditor').igHtmlEditor({ inputName: "Post", width: "98%", height: "48em", showInsertObjectToolbar: false, customToolbars: GetCustomToolbar() });
});
</script> </head> <body> <div id="EmailHtmlEditor" class="ui-widget ui-widget-content ui-corner-all ui-ightmleditor ui-helper-clearfix" style="height: 48em; width: 98%;"> <div id="EmailHtmlEditor_toolbars" class="ui-igtoolbars-holder"/> <!-- toolbars here --> <div id="EmailHtmlEditor_content" class="ui-ightmleditor-content"> <iframe id="EmailHtmlEditor_editor" class="ui-widget-content"> <html> <head> <title>igHtmlEditor</title> </head> <body contenteditable="true" style="-webkit-tap-highlight-color: rgba(255, 255, 255, 0);" spellcheck="false"> <p><br></p> </body> </html> </iframe> </div> </div></body
</html>
</iframe> </div></div>
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?