Reading IframePanel HTML "local" Content

[itg-assistant]

Eric Mathay asked 2018-01-04 16:21:00 UTC

Hi,

How can I get the HTML content of what is currently displayed by such a control. (iFramePanel, AsPnetPanel, Webbrowser,...)

If the control is displaying a FORM html, for example containing Input fields (i.e : contains ).

I would like to be able to read the HTML of what the user has input into the displayed Form.

I presume this is possible ?

Regards.

[itg-assistant]

Luca answered 2018-01-05 02:16:13 UTC

It's possible on the client and only if the url of the iframe is from the same origin of the container or the browser blocks all cross-frame javascript.

You can execute javascript in the context of the iframe and retrieve the body element using "this.getBody()" when  this is the iFramePanel widget. You can process the dom elements on the client and fire back events to the server or call a server method marked using [WebMethod].

[itg-assistant]

Eric Mathay answered 2018-01-17 21:57:04 UTC

Hi Luca,

After having hacked Franck's Sample (https://wisej.com/support/question/ckeditor-control-how-to-get-plain-text-from-control), but I'm still stucked.

Franck's code is implementing your proposal for a CKEditor, and I can get the FORM (using Input fields) modified content, but in my IFrame version neither this.getBody() or App.Window1.myIFrame1.getBody() does work.

Also tried to keep the working ckeditor project and added a javascript CSS component to hide the cke_top element. (Prohibit the end user to modify the Form layout).

By the way in Franck's code (for the ckEditor), to get also the Form input fields, I had to change from :

Eval("this.__GetPlainTextCallback(this.editor.document.getBody().getText(), " + callback.GetHashCode() + ")");

to be :

Eval("this.__GetPlainTextCallback(this.editor.getData(), " + callback.GetHashCode() + ")");
//Or this one does the same
//Eval("this.__GetPlainTextCallback(App.Window1.ckEditor1.getText(), " + callback.GetHashCode() + ")");

I have attached an Iframe Zipped version and a screenshot of the CSS

Can you help ?

Thanks.

[itg-assistant]

Luca answered 2018-01-17 22:48:52 UTC

See attached changes. You don't need the callback system. We use it for async calls on the client when the javascript cannot callback the server with WebMethods.

All you need it this:

Eval("this.Save2Disk(this.myIFrame1.getBody().innerHTML)");
Eval("this.Save2Disk(this.myIFrame1.getWindow().TextField1.value)");
Eval("this.SaveArray2Disk(this.myIFrame1.getWindow().getFormValues())");

I added 3 options:

1: gets the HTML of the entire body.

2: gets the value of TextField1

3: calls a js function in Form_Document.html that returns an array of strings.

The iframe widgets exposes getBody(), getDocument() and getWindow(). The body is the body element in the iframe. The document is the document object and window is the navigator window where all the global functions reside.

HTH

[itg-assistant]

Eric Mathay answered 2018-01-18 13:32:43 UTC

Hi Luca,

It doesn't work as expected.

The only case of returned Data is when using "this.myIFrame1.getBody().innerHTML", but it doesn't contain the user modified data. only the initially loaded  text.(See TEST_IFramePanel2.png).

Your proposed solutions to not use the callback is far easier to understand and implement :) Because it wasn't working for the IFrame, I did the same changes with Franck's code. For the ckEditor it works when using Eval("this.Save2Disk(App.Window1.ckEditor1.getText())");

Using Eval("this.Save2Disk(this.editor.getData())"); generates error "this.editor is undefined". Neither this.ckeditor1, this.myckeditor1 is recognized.

With the working sample, I discovered that in the ckeditor, changing the inputbox needs a double-click + filling presented form, and also that comobox and checkbox can't be changed, but that's another story than what we track here.

Running through IIS express doesn't behave the same as IIS deployment -> all test done by deploying.

What I can't understand is the fact that when debugging in firefox(F12), the intellisense isn't showing getBody as an option for this.myIFrame1, but "this.myIFrame1.getBody().innerHTML" is working through the code ??? (See TEST_IFramePanel4.png)

The same with Franck's code, using the callback method, "this.__GetPlainTextCallback(this.editor.getData(),.... is accepted but without callback "this.editor is undefined".

To me it means that "this." isn't the same object, but which one is which and how to differentiate ?

Sorry to come back with this, I was really trusting you had the solution.

[itg-assistant]

Luca answered 2018-01-18 21:27:17 UTC

Hi Eric, I'm not sure I fully understand. See below in case it helps:

• getBody(), etc. on a ckeditor cannot work. Those methods are exposed by the iFrame widget in wisej.

• iframe.getWindow().TextField1 works only if the input field has an ID (I had modified the html in the zip attached to my previous reply).

• I tried the TEST_IFramePanel (modified) with FireFox and it works fine, you have to make sure to use the modified html with the id in the field.

• My FF shows the getBody(), etc. methods in intellisense too. Sometimes the browsers overrides what it "deducted" according to what you type.

• "this" in Eval is the widget calling the Eval or Call methods.

• You can call any method available to the CKEditor using "this.editor.{methods}". Some functionality is wrapped in the widget so "this.getText()" is the same as "this.editor.getData()". When "this" is the CKEditor instance.

• The function getFieldValues() was added to the html document in my zip.

• The CKEditor object (not the wisej widget) exposes "window" and "document" as objects. See https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.editor

• You can access the inner iframe document managed by the CKEditor using this.editor.document.$;

• Looks weird by the CKEditor adds the $ as the native element. So to get a field you need to do this: this.editor.document.$.getElementById("field2").value. You can't address the field using the ID (as I did in my previous modification) because the content in the editable iframe is "editable" so it's not handled by the browser as normal content (which is why you can check the checkbox). The elements have the "contenteditable" attribute on.

That's  the way CKEditor works. Once you reach the inner deep iframe then you can use "normal" javascript on the elements, but the elements in the editor are editable and different from rendered elements.

Are you trying to create a form in a CKEditor and read the content of the fields in the form while it's being edited in the CKEditor?

Can you send me a specific sample that shows exactly what you need to achieve?

HTH

[itg-assistant]

Eric Mathay answered 2018-01-19 16:23:51 UTC

Hi Luca,

Thanks for those good explanations. I didn't copy the modified sample.html file, my fault. Further more even after copying, I had caching problems. :(

Now it's working as expected, but still a problem.

You asked for what I want to achieve : (I have sent you code)

I would like to have the user receive a template Form html (input fields at least, eventually combo+check) presented. He fills the values, then I use a Save button to save the modified html to disk.

In this scenario, we would have 2 user types: the end user just filling the Form through IFramePanel and the editor creating the form through ckEditor.
Editor's will create in WYSIWYG , so no added function to the created html, or it needs to be injected at save time.

There is a SaveAs button to archive the whole filled form.

As you can see, I had foreseen 2 controls. After those tests, IframePanel seems to require more efforts to get the whole modified data, where with ckeditor I can get it easier (as discussed before), but needs to manipulate the ckeditor toolbar visibility.

Using the ckeditor details you gave me, I will investigate using only ckeditor and hiding/showing the ckeditor toolbar to switch between form filling and form creation.

• I need to know how Wisej has foreseen to configure the ckeditor toolbar, is it through config.js (Where to place?) or something else ?

• Show/Hide ckeditor toolbar by code:

??

Thanks for the teaching I got digging into those javascript interactions, which are completely new to me.

Regards.

[itg-assistant]

Eric Mathay answered 2018-01-19 16:26:11 UTC

It's still a problem as the whole modified content isn't read.

[itg-assistant]

Luca answered 2018-01-19 16:30:31 UTC

I wouldn't use the ckeditor to show the form in edit mode, use it to create the form html. There are a lot of internals in the ckeditor that are painful to manage. You can configure it using the Options property. It's a dynamic object.

In edit mode you can easily show the html either inside an iframe or an html panel or even in an html label. The only reason to use an iframe would if the html file is coming from a URL. When your code loads the html form previously created (and I assume in the db), you can always attach a simple javascript function (i.e. getValues) that reads the values from the fields in the form and returns an array. Then your html panel that shows the form can read everything with one call.
I'll send you an example later next week.

HTH

[itg-assistant]

Luca answered 2018-01-19 16:31:33 UTC

That’s correct. The HTML read using innerHTML is the original html, it’s nor modified when entering the values. The values are read correctly.

[itg-assistant]

Eric Mathay answered 2018-01-22 22:19:57 UTC

Hi Luca,

I agree that there is a lot of options to set for the ckeditor. The idea behind using the ckeditor was to be able to get the whole modified stream, to be able to archive it as a new filled document. The presented document being  template, and the saved document the filled one.

Extracting fields values is also clearly interesting and wanted in parallel for Db archiving of the values only.

For the moment I digged a little into the ckeditor config and could remove the taskbar buttons,  but it's effectively not locked to only change the document input fields.

{
    "toolbarGroups": [],
    "enableContextMenu": "false"
}

Attached is a screenshot for others wanting to experiment with the ckeditor config options inside Wisej.

I will further experiment.

Regards.

[itg-assistant]

Luca answered 2018-01-22 22:49:43 UTC

“whole modified stream” means the forms as HTML but with the edited values? I don’t think it’s possible. The html is not changed when editing.

[itg-assistant]

Eric Mathay answered 2018-01-23 08:11:48 UTC

So you mean I have to collect the entered values and merge them with the original template ?
Huhh, that’s new to me. I will then experiment further into IframePanel + getvalues and develop an appropriate methodology to work with the data.

NB : I also found that Inputfields,checkboxes, … are directly “fillable” inside the IFramePanel but require a double-Click in the ckeditor to change value.

Regards.