TopSecretProject

In my current project I have developed a light-weight tag library based on Radius Tags. I am using TinyMCE as my WYSIWYG editor and needed to handle these custom tags in an intuitive fashion. In this case, I am happy for the user to have to manually edit the code in the HTML view to interact with the tags, but I want to at least let them know the tag is there.

Assuming we have a tag: <o:title/>

I simply add the following to my TinyMCE configuration:

extended_valid_elements : "o:title",
custom_elements: "o:title"

extended_valid_elements tells the editor that this tag is valid.

custom_elements makes TinyMCE switch the tag into a div when in the WYSIWYG view. The div has a “mce_name” attribute with the value of the tag name (in this case mce_name=”o:title”).

With the tag being handled by TinyMCE, I can now customise the display by providing some styles in the Editor CSS.

You can assign a generic div style:

div[mce_name] {
  background-color:#EEEEEE;
  border:1px solid #CCCCCC;
  height:225px;
  width:600px;
}

As well as specific styles for a named tag (in this case  using a background image to render the display):

div[mce_name="o:title"] {
  background-image:url(/images/title_tag.png);
  background-repeat:no-repeat;
  background-position:2px 5px;
}

Easy!