PhenoEdit

PhenoEdit is an extremely lightweight (~2 KB) non-rich text <textarea> markup plugin for jQuery. It's great for low profile cms systems and user submitted forms. PhenoEdit basically lets the user select text and add markup code to it, and can be extended easily. It appears to be working with all mayor browsers. Please take a look at the examples below for usage instructions.

Current version: 1.2 - download

Prerequisite

jQuery is required for PhenoEdit to work. If you don't know what this means, check out the jQuery website first.

Install

Installing is easy. Just include jQuery in your favourite flavour and add the PhenoEdit script to the HEAD section of your code, for example:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://path.to/phenoedit-compressed.js"></script>

Simple example

The plugin can be attached to one or more TEXTAREAs using any jQuery selector. For example, if you want to attach it to all elements with class="edit", put the following somewhere in inside the BODY part of your page:

<script>
$(function(){
  $('.edit').phenoedit();
});
</script>

Customizing

In this example, several elements are customized. It only shows b, strong, i, and a in the button bar.

<script>
$(function(){
  $('[your selector]').phenoedit({
    prepend:'Stylishness:',
    append:'&copy; MyCoolEditor',
    cleanUpText:'clear formatting',
    items:['b', 'strong', 'i', 'a'],
  });
});
</script>

Advanced

Example of advanced overridden behaviour for heading and a. As you can see, you can easily make PhenoEdit generate XML or even BBCode.

<script>
$(function(){
  $('[your selector]').phenoedit({
    items:['b', 'i', 'heading', 'a'],
    custom:[
      {
        code : 'heading',
        replaceFunction : function ( selectedStr ){
          return( '<div class="heading"><h1>' + selectedStr + '</h1></div>' );
        }
      },
      {
        code : 'a',
        replaceFunction : function ( selectedStr ){
          selectedStr = selectedStr.replace( 'http://', '' );
          return( '<a class="external" target="_blank" href="http://' + selectedStr + '">' + selectedStr + '</a>'  );           
        }         
      }
    ]
  });
});
</script>

Styling

The styling on this page is archieved as follows. Be creative.

/* PhenoEdit styling */
.phenoEditContainer {
	font-family:Verdana;
	font-size:10px;
	margin:4px;
}
.phenoEditContainer div {
	margin-top:4px;
}

.phenoEditContainer div a {
	background-color:#ddf;
	border: 1px solid #bbc;
	color:#335;
	display:inline-block;
	padding: 0px 6px;
	line-height:14px;
	text-align:center;
	cursor:pointer;
	border-radius:3px;
}

.phenoEditContainer div a.cleanup:hover {
	text-decoration:none;
	background-color:transparent;
}

.phenoEditContainer div a.cleanup {
	width:auto;
	background-color:transparent;
	border:none;
	color:#000;
	text-decoration:underline;
}

.phenoEditContainer div a:hover {
	background-color:#eef;
	color:#333;
}

More

If you want to use even more advanced features, like overwriting the replace and clean up functions, have a look at the commented code.

Blabla

PhenoEdit is © 2012 by Jens Bruinlier and is distributed under the GNU PUBLIC LICENSE. The latest version can always be found on the PhenoEdit website. The source is distributed via its SourceForge page.