Paragraph wrap callback for TinyMCE

When using TinyMCE if you only insert one line of text the selection will not be wrapped in paragraph tags. As soon as you hit return the selection will be wrapped in paragraphs but when you are handing the editor off to non-technical clients you can’t always be sure that’s going to happen.

We ran into this problem while building our form builder at UVa. Since the entire interface was being built with XSLT in Javascript the results coming out of the TinyMCE based message editor needed to be consistent. In the process I came up with the function that can be called as a save callback from TinyMCE.

This is the function that we will call from the callback. If you are using hak_tinymce make sure you have 0.6.3 and add it to the Callback Functions area.


function mceTagWrap(element_id, html, body) {
 html = trim(html);
 /*check that text starts and ends with tags if not wrap it in <p>s.  
   This only happens for single line text messages*/
  if(html.charAt(0) != "<" || (html.charAt(html.length - 1) != ">" || html.charAt(html.length -2) == "/")) {
	html = "<p>"+html+"</p>";	
  }
 return html;
}
function trim(sInString) {
  sInString = sInString.replace( /^\s+/g, "" );// strip leading
  return sInString.replace( /\s+$/g, "" );// strip trailing
}

The mceTagWrap() function will check if the results being sent back from TinyMCE start with < and end with > otherwise it will wrap it in <p></p>. It will also check if the second to last character is a / so a block opening with <img /> and ending with <br /> will still be wrapped in paragraph tags. trim() is just used by mceTagWrap() to remove unwanted spaces before and after the text block so that the first and last values are not spaces.

In order to call the function on save add this it to your TinyMCE.init().

save_callback:"mceTagWrap",

hak_tinymce - WYSIWYG article editor

This plugin adds a TinyMCE based WYSIWYG editor to Textpattern.

This is an update for mic_tinymce, originally developed by Michele Campeotto.

Read More »

hak_article_image

<txp:hak_article_image /> is an enhancement to <txp:article_image /> it supports multiple images per article along with various ways of attaching links to the images.

Read More »

Textile for upm_quicktags

This is basically an implementation of hak_textile_tags to be used with upm_quicktags. It is designed to be used in the write tab of Textpattern and will allow you to use textile to format your articles instead of XHTML.

Install Instructions

This package contains a replacement write.js. Simply replace your original /upm_quicktags/write.js with this file and you will get the textile functionality. Back up your original.

Limitations

Only tags that have textile equivalents were translated. The rest still output xhtml. Images and Links are currently hardcoded so they don’t output textile yet.

hak_textile_tags Plugin

Finaly got the chance to finish this. This plugin was designed to make using textile in comment forms simpler. Basically it provides the user leaving the comment with simple buttons to insert the textile formating code in for them.

It is based on Alex King’s Quicktags from Wordpress’ article editing interface.

You can see it in action by trying to leave a comment to this article.

New update 10-29-05

hak_textile_tags.txt

Read More »

| older words »