Develop Reference

Adding HTML elements that are not part of TinyMCE content

I wonder if there's a way with TinyMCE to add HTML elements, but without these elements being part of the content (i.e. if I call getContent() they will not appear).
My use case is to add for example a small toolbar to edit an element, and this toolbar should not appear in the code returned by getContent(). I couldn't find anything about it in the doc. Any idea if TinyMCE allows something like this?

You can configure which HTML elements will remain using the valid_elements, invalid_elements and extended_valid_elements options.
The valid_elements option defines which elements will remain in the edited text when the editor saves.
Example usage:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
valid_elements : 'a[href|target=_blank],strong/b,div[align],br'
});
The invalid_elements option instructs the editor to remove specific elements when TinyMCE executes a cleanup.
Example usage:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
invalid_elements : 'strong,em'
});
The extended_valid_elements option is very similar to valid_elements. The only difference between this option and valid_elements is that this one gets added to the existing rule set.
Example usage:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
extended_valid_elements : 'img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]'
});
Check out the Tiny documentation for more information:
valid_elements
invalid_elements
extended_valid_elements

Remove title tag tooltip

Is there any way to remove the tooltip from title attribute without actually remove the title.
I have a link with a title attribute like this
It is important that the title is intact since I need to read the url from there. All the fixes for this that I have found is to remove the title attribute and reuse it but in this case this is not possible.
Any ideas?

It's all about the browser. It's the browser that sees the title as a tooltip, from the browser specifications and interpretations.
You should use if you want to handle data like that, the HTML5 way (which you can use in any other document type as it's ignored) and use:
with the data- attributes, there will be no tooltip as title is not used, and you can easily get that using:
$("a").attr("data-title")
but, you will need to convert stuff and you said that you don't/can't do that.
you can easily convert all titles into data-title and clean the title using
$("a").attr("data-title", function() { return $(this).attr("title"); } );
$("a").removeAttr("title");
(all code is to be used with jQuery Framework)

As you didn't mark this question as jquery, I'm assuming that you'd be open to a pure JavaScript solution?
The following works (on Ubuntu 11.04) in Firefox 5, Chromium 12 and Opera 11, I'm unable to test in IE, but as I'm using querySelectorAll() I'd suspect that it wouldn't work well, if at all. However:
var titled = document.querySelectorAll('[title]'); // gets all elements with a 'title' attribute, as long as the browser supports the css attribute-selector
var numTitled = titled.length;
for (i=0; i<numTitled; i++){
titled[i].setAttribute('data-title',titled[i].title); // copies from 'title' to 'data-title' attribute
titled[i].removeAttribute('title'); // removes the 'title' attribute
}
JS Fiddle demo.
References:
document.querySelectorAll at the Mozilla Developer Network.

Why don't you use jQuery to move this information from title to element data.
Run this on element load:
$(el).data('url', $(el).attr('title')).attr('title', '');
And afterwards read URL like this:
$(el).data('url');
Variable el here is DOM element or element selector.

TinyMce Allow all Html tag

I'm using TinyMce and even though the danger of a script attack, I need to enable all html tags with the editor.
Currently, I'm use like:
valid_elements: "#[class],p[style],h3,h4,h5,h6,a[href|target],strong/b,"
+ "div[align],br,table,tbody,thead,tr,td,ul,ol,li,img[src]"
But always need to add something, I want to enable ALL HTML tags with all attributes. Is there such switch that Disables the HTML filtering?

You can set
valid_elements : '*[*]',
to allow all html tags.

To keep style tags, use valid_children : "+body[style]"

Reset TinyMCE box

I am using TinyMCE editor. I want to clear the content inside the editor box with some button click present on my form.
Can you let me know how to do so?

This can be easily done (no need to use the slow jQuery tinymce build) using the following code as onclick-action of your button:
// 'content' is tinymce default,
// but if your textarea got an ID that is the one you need!
var my_editor_id = 'content';
// set the content empty
tinymce.get(my_editor_id).setContent('');

From the TinyMCE jQuery Plugin documentation, can be easily found from the page you linked:
// Will change the contents of an textarea with the ID "someeditor"
$('#someeditor').html('Some contents...');
// Will change the contents all text areas with the class tinymce
$('textarea.tinymce').html('Some contents...');
// Gets the contents from a specific editor
alert($('#someeditor').html());
Try setting it to empty string, might be just what you need.

If you are interested in clearing the content of the editor you can use:
tinymce.get('#editorId').setContent(''); // like others have suggested
However, if you'd like to reset the content and menu buttons etc. - essentially resetting the editor altogether you might consider using:
tinymce.get('#editorId').init();

Sets the specified content to the editor instance, this will cleanup the content before it gets set using
the different cleanup rules options.
tinymce.activeEditor.setContent('');

$('#name_of_your_textarea').val('');

Is there a JQuery tooltip plugin that supports HTML content and automatically positions tooltips?

I am searching for a Tooltip plugin/library for JQuery. It should be able to automaticlly position tooltips, like TipTip, and also support HTML content for the tips.
TipTip does fullfill both conditions, but:
Added HTML support with Tip Tip. You can now add HTML into the Title attribute (though this is not recommended if you want strictly valid code).

I believe this one does. For instance, this demo shows an image. You could easily have a bodyHandler that retrieves the HTML from an attribute on the element. For instance
foo
That's perfectly valid HTML, and the bodyHandler would look something like
return this.attr("data-tooltip"));

I didn't want to leave jquery native plugin and mess with additional libs, so I figured out quite simple solution:
$('.tooltips').tooltip({
content: function(){
return $(this).attr('title');
}
})
This way - your title attribute with HTML may be used successfully.

I like TipTip a lot. The "title" field usage is awkward, but you don't have to do that:
content: string (false by default) - HTML or String to use as the content for TipTip. Will overwrite content from any HTML attribute.
(via http://code.drewwilson.com/entry/tiptip-jquery-plugin)

This tooltip widget included in the jQuery UI library supports different automatic positions and HTML in the title attribute: http://api.jqueryui.com/tooltip/