We Keep Coding

TinyMCE - how do you use onClick instead of <a href=""> for links?

Is there a way to change the defalt behaviour of TimyMCE, so that when you insert a link, it renders something like this:
<span onclick="window.open('http://google.com', '_blank', 'location=yes');"></span>
instead of
Ideally, I would like this to be done by the Link button, but it could be done onSubmit.
ADDED:
The reason for doing this (as I know it seems like bad practice) is to be able to port to PhoneGap (using the InAppBrowser plugin), as is not intended for browser use.

Overlooking that this really isn't a good practice, I will assume you have a valid use case for wanting to do such black magic.
But before, a few things to consider:
I would advise you to keep links as links while working in TinyMCE. That way, your users will be able to insert and edit them as usual. Changing them to span elements inside the editor will practically eliminate the ability to edit them without editing the full source. You should probably convert them to span elements outside the editor.
If you're the stubborn type and don't care about #1 or your users, you should note that the default TinyMCE 4 configuration doesn't allow onclick attributes, so you'll need to update extended_valid_elements, otherwise they will be removed during the cleanup process.
There is probably a better way to do what you're trying to do. As #Vic suggested, an event listener would probably be a better option.
Nevertheless, I will humor you. Below is an overview of the process with a working example.
Overview
If you are developing with TinyMCE 3.x, you'll want to tap into the onSaveContent event. If you are using 4.x, use the saveContent event. In both cases, the concept is the same.
This event gets fired whenever the content of the editor is "saved". This happens automatically if TinyMCE is submitted as part of a form, but you can also use tinymce.triggerSave() to force it on all editors at once.
So, simply setup your callback function to replace all links with the evil span alternative. You can use pure JS or TinyMCE's built-in DOM utilities (probably only a good idea if you're already familiar with them), but for clarity (and sanity) it's much easier with jQuery.
Working Example
TinyMCE Fiddle: http://fiddle.tinymce.com/mAdaab/1
This example uses TinyMCE 4
Open your browser's console to see the output
After TinyMCE loads, press the Save button
The resulting HTML will appear in your console
Do with it what you wish, but remember that there probably is a better way.

What you are proposing is a really bad practice (as in not using anchor tags for links) wouldnt it be easier to actually give your link an id or class and attach event listener with javascript and on click prevent default behavour grab the href attribute and use your window.open?

Prevent the creation of certain tags in TinyMCE on the server and user side

I'm using TinyMCE plug in to create a text editor. The thing is, I want my users to control the positioning, weight, and list/no list of their document, but not font, font-color, or font-size. I'm looking for a TinyMCE property which will stop the program from adding those tags to the css. Also, I need to implement this on the server side. I'm using django, so is there any function that will do that as well?

One may specify exactly which HTML tags and related attributes are allowed using 'valid_elements' configuration setting:
http://www.tinymce.com/wiki.php/Configuration:valid_elements

I believe that as long as you don't provide the buttons for font-related stuff (using the theme_advanced_buttons_1/2/3 parameters), and also don't give them the HTML button, the users won't be able to change fonts/color/etc.
But if they were to paste in some text created elsewhere, which happens to be HTML, they might still do it. To get rid of that, you'd probably have to filter what the server receives - I have no insight into any ready-made way to do that.

JQuery pop up/ alert needed

I have a list of elements that need to have a corresponding pop up for each element. This is not a pop up where the background is blacked. This is more like a javascript alert although I need to create my own styled button within the pop up with our own bespoke event assigned to it. I need each pop to position itself appropriately next to the relevant item within the UI.
Whats the best way to do this? Are there any examples please? I only want the pop up to show when the visitor triggers an event.
Many thanks,

I suggest you to use Colorbox for pop-up systems. Fırst of all; it is easy to learn and use.
And most importantly: Colorbox won't create conflicts with your other plugins (sometimes fancybox does that).
Some Features:
Supports photos, grouping, slideshow, ajax, inline, and iframed
content.
Lightweight: 10KB of JavaScript (less than 5KBs gzipped).
Appearance is controlled through CSS so it can be restyled.

You can easily do this without using jQuery Plugins.
I put together a little example.

What about http://jqueryui.com/demos/dialog/#modal-confirmation
or http://jqueryui.com/demos/dialog/#modal-message

Why can I sometimes not type into my <input> in IE?

I'm having an issue where, periodically, I am unable to type into any input/textareas on Internet Explorer. I'm working primarily with IE9 at the moment.
When I click on an input, the JS click handler (which empties placeholder text) runs, and the active css is applied. However, the cursor does not appear and I can't type. If I tab to an input field, and start typing, everything starts working again.
I have a fair bit of JS running, but no errors running. I suspected TinyMCE had something to do with it, but it also happens when there are no editors on the page, so that doesn't seem to be it either. If you don't have an answer, I'd love an idea of what could be happening here that I could look into more, since I'm a bit stumped.

I eventually solved this. It was a strange and nasty issue with TinyMCE, where TinyMCE was being destroyed while the cursor was inside the main window. Fix was to explicitly focus out before it gets destroyed.

I had a similar issue once with I.E. where I was using .split to make sure the input box was not empty when gaining focus. However, I.E. did not support .split and would crash my js. I had to write my own and it ended up working out. Not sure if this in any way applies to what you are doing, but I thought I would just throw it out there.

Since you have lots of javascript on the page, a likely reason would be either a naming conflict or even more likely a js crash. Traverse your code for the 200th time.

css3 animation on click

The following zip contains the website html and required files: http://dl.getdropbox.com/u/4281191/login.zip
When you hover the html (html:hover) you see a animation that transforms the container into a loginbox, I want that to happen when I click on "Login" at the "Hello, Guest" menu instead.
Anyway to get this done? I'm new to js...
Additional info:
the css is inside the html,
and the css3 animation gets triggered by:
html:hover id/class {
property: value;
}
Thanks for any help!
And I can't vote at comments since I don't have enough reputation...but I could do some free design work for the person who helps me ^^

I still don't know much about animations, but for what matters here, you could use something like the .classname:active or .classname:focus selectors. But as soon as you click something inside it (e.g. a text box), the style will disappear.
So, for this, it really depends. Do you just want a menu that has links that take the user to another page (for this case, you'll be fine) or do you want a login form (for this case, forget it, use jquery)?
For today and future reference, save this link because it'll be your best friend:
http://www.w3.org/TR/selectors/#selectors
Update
Yes, I hovered but I didn't look at the code. I looked now and, unfortunately, the answer is no. You can't affect some upper level object like that using CSS.
For that use jQuery. The simpler way would be use jQuery to add a class to the element you want to change (like $("#the-object-id").addClass('class-name')). To keep the effect add the duration argument. Read this page about Adding a class using jQuery.