This is just a short post to note down what I found out about the Insitu tag editor component from Alfresco 4.0 and how to use it in your own code. I have not actually used it yet, so the code below is not complete nor working. It is just meant as a reference (for me).

You need to include the documentlibary.css the editors CSS:

<@link rel="stylesheet" type="text/css" href="${page.url.context}/res/components/documentlibrary/documentlist.css " />

Then you need a DIV to create the editor:

<div id="${el}-tageditor"></div>

You can create a Insitu-Editor for tags from Javascript like this:

var tageditor = Alfresco.util.createInsituEditor(this.id + "-tageditor",
{
	type: "tagEditor",
	nodeRef : "workspace://SpacesStore/79cced9b-947b-4833-bf03-5fb4660449d9",  // use nodeRef here
	name: "prop_cm_taggable",
	value: "", // here go the tags of the current node
	validations: [{
		type: Alfresco.forms.validation.nodeName,
		when: "keyup",
		message: this.msg("validation-hint.nodeName")
	}],
	title: this.msg("tip.insitu-tag"),
	errorMessage: this.msg("message.insitu-edit.tag.failure")
},
{
	 fn: this._insituCallback,  // your callback
	 scope: this,
	 obj: record // your object
});

To display the editor you call:

tageditor.doShow();

This displays the following tag editor you know from the document library:

What it does:

• Provide a textbox, a save and a cancel button (as text)
• Suggest and auto complete tags as you enter them
• Create new tags in the repository on save
• Save the tags for the node (using the nodeRef you specified)
• Call your code after the update in the repo

What it does not do:

• It does not read the current tags. You have to pass them in using the value parameter.