I'm porting a TinyMCE 3 installation to version 5. I set up a toolbar button that opens a dialog that contains a custom page and is therefore loaded using the new windowManager.openUrl method. I have some footer buttons, too, and, of course, an onAction( dialogApi, details ) handler that is invoked when a button is clicked. details.name contains the name of the button that was clicked so I can react on every click individually.
It seems, when a regular dialog is used, I configure every input field in my plugin.js file and retrieve its value through the getData method of first param that in passed into my onAction handler. This method does not exist in my dialogApi for the URL dialog.
My iframe/dialog contains a dropdown and I want to insert the selected value into the editor instance when a dialog footer button is clicked. I understand I can use postMessage to send information from the iframe to the plugin but that's not what I want.
How can I access input fields in the dialog, when a button is clicked and my dialog was opened through openUrl? How do I access the document in the dialog's iframe? this seems to be the JavaScript object I passed into openUrl. document is the page where the editor is embedded.
I've made a demo that shows two different ways of getting the data from user inputs in an iframe dialog:
https://codesandbox.io/embed/tinymce-dialog-openurl-demo-fpfew
This blog post is also an excellent resource for working with iframe dialogs in TinyMCE:
https://www.martyfriedel.com/blog/tinymce-5-url-dialog-component-and-window-messaging
The first method in my demo uses a button in the HTML of the iframe itself. That button collects user data and uses postMessage to send that data back to the TinyMCE editor.
As you can see, the process is a little more complex using the footer buttons as opposed to the "in iframe" button. Essentially, the footer button sends a message to the iframe in the dialog asking the iframe to collect and insert user data into TinyMCE.
When using an iframe, you have to respect the browser security policy, so most times you can't interact with an iframe directly (the exception being if the iframe uses the same domain). Here's some more information about iframe security policy:
https://security.stackexchange.com/questions/67889/why-do-browsers-enforce-the-same-origin-security-policy-on-iframes
This also means that TinyMCE has no way of knowing what's inside the iframe like it does with a TinyMCE dialog, so the data needs to be fetched "manually". With that in mind, if it's a cross origin request (different domain) there's no way to access the iframe content without using postMessage.
The getData method mentioned works with TinyMCE dialogs because everything in the dialog is a TinyMCE component. TinyMCE components have a custom concept of values/states that getData can access to return data.
When you use a URL dialog, the dialog no longer uses TinyMCE components so it isn't able to collect the data for getData, hence it the method doesn't exist. That's why you have to manually get the data needed from whatever elements are in the URL dialog, and send them back to TinyMCE using postMessage.
Related
I'm trying to track form completions on a page where the form's URL is the same as the confirmation page.
Form Page
Does anybody know if this can be done with Google Tag Manager/Google Analytics please?
Completion page
Simply tracking clicks of the Submit button will result in false positives because sometimes people will not type the security code correctly.
Is there a tracking code of some sort that can be added to the confirmation page, so that each time it loads the count goes up one?
I'm grateful of any help you can provide.
Thanks!
You can use the built-in visibility trigger - e.g. as soon as a link element with the link back to the homepage becomes visible you let the trigger fire. Specifics depend on the CSS id or class for that link (if any, else you'd have to test the click text).
In the visibility trigger you might have to enable "listen for DOM changes" if the confirmation message is loaded per Ajax (as opposed to just have their CSS display property set to 'none'.
I'm trying to catch email address as a variable with Google Tag Manager (GTM) on signup form submit on http://cloud.feedgee.com/ru/signup and fire a tag with it. On submit, the page is being reloaded.
By now tried to catch it with Form submission by form id set as shown on screenshot) and a Button click as a Custom event with it's click id
I initiated a DOM element variable with Id of the Form text field (Element Id=ContentPlace_loginEmail)
With these settings in Preview mode on Form Submit, I can not see my Tag in "Tags Fired On This Page" row before page reload.
What can be the reasons for this if Id's of the elements are correct?
May it depend on the container script location on the page?
Now It's located right after the HTML tag.
Can I store form text field in a DOM variable to use it in the tag?
If you want to store the email value in your own API, Google Tag Manager is not the right tool for you. You should only use it to track events that fit under Google's terms of use.
Having said that, when you're working with forms in GTM, hold the <shift> key with you click the submit button. If you do that, a new tab will open up, but the current page wont get redirected or refresh. You'll then be able to see what data is being pushed to the dataLayer.
I have a page (jsp) with a form and a submit button. After clicking the button the form data is posted to another JSP that creates the output (a table with links).
My problem is, I need to do this AUTOMATIC, I can fill the form via url GET thats not the problem but how can I force the post to that other page without clicking a button. I want to include the result (table with links) on another page (with php or just iframe) so the result has to be generated when the page is opened.
I CAN NOT change any of the JSP pages, they are part of a closed system which I can't change.
Thanks...
I have a page called contact.htm with a working form. One of the checkbox fields on the form is named Garden (so either it is checked or not when using the form).
I have another page that I want to link to my form page, so that if a user clicks a particular link, they are sent to the form page and the field Garden is pre-clicked.
I have not been able to do this though I have tried several methods...such as:
a href="contact.htm?checkbox=Garden,on" or
a href="contact.htm?checkbox=Garden,checked" or
a href="contact.htm?input type="checkbox" name="Garden" value="checked", and some others.
I would appreciate any help.
You'll need to use JavaScript on the target webpage to process the argument and fill the values in. There is no automatic way of doing this just by URL.
This link shows how to retrieve URL arguments from JavaScript. From there, it's a matter of using standard JavaScript or JQuery to fill the values in.
My requirement is to integrate my client webpage and facebook using the Flike button.
I have an html page which is used for all the products. Based on the product code selected, the content in the page changes. The URL format is something like this -
in the browser it shows : http://xyz.com/product.aspx,
in the view source, in the action attribute of the form tag : ../../product.aspx?prdcode=123&catcode=3453
Now, my requirement is to place an flike button on this page. I have tried doing it in several ways... but the issue is:
If I click on flike button on one page.. the button is disabled for every other product.
Not sure what all needs to be included in to get this functionality right.
For a product listing page you'd need to have multiple like buttons, each pointing at a URL which represents an individual product - each of those pages needs the appropriate open graph meta tags, include the JS SDK once on your listing page, and have multiple <fb:like tags pointing at the individual product URLs
If the page content is dynamic, I think you can do the same, but you'll need to remove and add the like button as the content changes