Using this site as example:
Whenever I change a data filter on the form input elements, that change is added to the URL with the usual field=value syntax.
However, if I copy the URL with the filters I want to another browser window, the filters aren't applied anymore, forcing me to manual set them again.
Is this intended behaviour and, if so, is there a way around it?
Related
I am trying to get TinyMCE 4's image_list to work with a URL returning JSON data as specified in the example here.
I have setup a GET endpoint http://demo.com/media on my server which gives back a JSON response consisting of a list of objects with their title and value attributes set, for example:
[{"title":"demo.jpg","value":"http://demo.com/demo.jpg"}]
I have also specified the option image_list: "http://demo.com/media" when initializing the plugin.
However, when I click the image icon in the toolbar, nothing pops up. All I can see in the network tab is an OPTIONS request with status 200, but then nothing. The GET request I was expecting never happens.
What is the correct way of using image_list in TinyMCE 4? Also, does anyone have a working demo example? I couldn't find anything.
It is somewhat hard to say what the issue is without seeing the exact data your URL is returning. I have created a TinyMCE Fiddle to show (in general) how this is supposed to work:
http://fiddle.tinymce.com/pwgaab
There is a JavaScript variable at the top (pretendFetchedData) that simulates what you would grab from the server (an array of JavaScript objects) and that is referenced via image_list.
If you enter your URL (http://demo.com/media) into a browser window what is returned? Are you sure its an array of JavaScript objects?
I have the identical problem. No matter what I do with the detail of the format (e.g. putting quotes round title and value), nothing happens.
I guess the only way (for me anyway) is to insert the list into the script with php before sending the web page.
I have a set of tabs with proper roles and attributes for accessibility support. The content that tab controls gets loaded in via ajax. But each wrapper for the content loaded in also has proper tab pane roles and attributes.
The problem is, when I run an automated audit using Chrome Accessibility Tools, the test fails stating that the corresponding ID of the tab pane is missing for all of the tabs except the one that's currently active (because that wrapper with ID has been loaded). The exact error states: "ARIA attributes which refer to other elements by ID should refer to elements which exist in the DOM."
Since the ID will exist once the tab with the corresponding aria-controls attribute is active, is this really an error? Or is this just a case of a false positive because it's an automated test and they can only do so much.
In summary, What does aria-controls do and does it really need to refer to an ID that currently exists in the DOM?
aria-controls give your assisting technology a way to move to the controlled element.
If this element is not in the DOM or can't be accessed, then yes it's an error.
The two (the element with aria-controls as well the element with the referenced id) must exist at the same time, whether at page render or via JS injection.
The DOM is parsed by the UA/AT combo before the user even gets to the control or your script fires to make it exist. If you use JS injection then you need to make sure the DOM is re-parsed.
This would apply to aria-owns as well.
I don't know whether the following would work in your architecture, but it would solve the error problem:
Design the tabs so they are all in the page at the time it loads. Format those that should not be shown to be outside the viewport using absolute positioning and something like "left: -99em." Use AJAX to reset the positioning when the time has come to display the tabs. The result is that the ARIA ID dependencies will always be valid because the tabs are always part of the DOM.
I customized the great filter in CKEditor to allow only some kind of tag:
config.allowedContent='img[!src]';
It works, but I also need to limit the src of the img to my domain only: I need something like this
config.allowedContent='img[!src=http://mysite.com/images/[1-9][0-9]*/dir/dir/file.jpg]';
Is it possible?
Advanced Content Filter does not allow now to validate attributes/styles values. We decided not to implement this feature, because it would make the whole filter a lot more complex. This may change in the future, but for now you can use a trick with the object format.
The object format of Allowed Content Rules is described very briefly in the Allowed Content Rules guide and you can check out the example configuration (3rd editor). But these samples do not show all object format's features. You'll be interested in the optional match property.
See pagebreak plugin for the example. If span does not have div parent with a page-break-after style, then that rule won't be applied to the span, so if there's no other rule that will accept it, then it will be removed. So the match rule allow you to define to which elements this rule will be applied.
But note that this filter won't influence image dialog's behaviour (so much). So you should also modify the src input validator.
And one more thing - you need to allow src=='cke-test', because this value is used to probe what filter allows. Without that image button may disappear.
When a user enters a valid URL in a form that I have, I'm using embedly to fetch the thumbnail of the URL (if one exists). I'm considering two ways of doing this right now.
Option 1. On blur event of the URL field, do a URL validation, if it passes validation, then use embedly behind the scenes to ajaxily return the thumbnail URL. If it returns one, then stick it back in the form in a hidden input field.
Option 2. When they POST the form, then handle it.
Option 3. ??? is there a better way?
Both ways will be done on the server using node.js, but am wondering what the best approach here is. My intent is to not have the user waiting on something that might not even be there (i.e. if there is no thumbnail returned).
Option #1 as it allows the user to see what they are posting.
We built a library to handle this case: http://embedly.github.io/jquery-preview/demo/
The newer versions of Firefox have a new 'feature' that remembers the stuff that was filled out in a form and repopulates the form with these values on refresh (maybe in other situations as well?).
The problem is we have a quite complicated web application which uses a fair bit of ajax and hidden form fields which are never filled out by the user, but by javascript.
Because of this new 'Feature' we get a lot of errors when refreshing form because these fields are suddenly populated with invalid values.
So i'm looking for a way to turn this 'feature' off without disabling auto-completion. (because that IS useful on the fields our customers fill in)
if i put
autocomplete='off'
in my html, the effect is disabled, but this loses auto-completion (obviously).
the problem is in fields getting filled in after a refresh without any user action.
While the password manager will populate a username and password if there is exactly one match, autocomplete itself doesn't automatically populate fields. But I'm guessing you're thinking about the sort of refresh you get, say, if you reload the page. In this case the field values are restored by session history, but you might be able to turn that off by marking your page as uncacheable.
Well you should set the value of these fields to nothing or or whatever default value they have using javascript right before you start your other javascript/ajax tasks.
It is a browser feature - without going into the settings of each client browser you can't disable this.
I suggest more robust validation - client and server side.
After the page is loaded, but before you do any other logic, you should force the value to be empty:
inputElem.value = '';
Here is a jQuery solution I put together.
It doesn't disable the autofill, rather it overrides the fields after the browser has done it's thing.
I was trying to fight Chromes autofill when I made this. Just using .val('') on it's own didn't work since it triggered before chromes autofill functionality kicked it.
var noFiller = $('input[type="text"]');
noFiller.val(' ');
var t=setTimeout(function(){
noFiller.val('');
},60);//keep increasing this number until it works
The Javascript solution (setting field values to empty when the page loads or updates via Ajax) has already been mentioned.
Another option might be to generate the ids of your fields with random numbers attached to them so that the browser can't match them to cached values, but this may screw up other things.
Autocomplete isn't a new thing. Every browser has it. See this http://www.w3.org/Submission/web-forms2/#the-autocomplete
Autofill? Are you sure? Check your input's value attribute with Firebug (Firefox addon). Check you post and response in your ajax. Maybe your ajax is filling it behind scenes.
BTW: remenber to disable any external toolbar. There are some toolbars for Firefox/IE/Chrome/etc that autofill data for the user. Warning with this.