Adding/editing buttons

So it appears CLEditor is what Front-End Editor uses. So I’ve been looking at CLEditor documentation on how to add buttons. I’ve found some examples, but not sure how to best implement it with Front-End Editor so that I don’t have to edit any code and can update/upgrade the plugin easily. Any recommendations on how to do this the right way?

http://ww.wp.xz.cn/extend/plugins/front-end-editor/

Ok, so the way to do this…I think…

1) Create your own plugin with a php file and a js file.
2) Hook into the front_end_editor_loaded action in your php file like:

function add_code_button() {
	echo "<script type='text/javascript' src='".plugins_url('/code_button.js', __FILE__)."'></script>";
}

add_action('front_end_editor_loaded', 'add_code_button');

3) Add js to register a button to CLEditor (got this from: here):

(function($) {
  $.cleditor.buttons.pastecode = {
    name: "pastecode",
    image: "**** PUT YOUR IMAGE FOR THE BUTTON HERE! ****",
    title: "Code",
    command: "inserthtml",
    popupName: "pastecode",
    popupClass: "cleditorPrompt",
    popupContent: "Paste the code:<br /><textarea cols='40' rows='3'></textarea><br /><input type='button' value='Ok' />",
    buttonClick: pastecodeClick
  };

  // Handle the hello button click event
  function pastecodeClick(e, data) {
    // Wire up the submit button click event
    $(data.popup).children(":button")
      .unbind("click")
      .bind("click", function(e) {

        // Get the editor
        var editor = data.editor;

        // Get the entered name
        var codeblock = $(data.popup).find("textarea").val();
        var html = '<pre>' + codeblock + '</pre>';

        // Insert some html into the document
        editor.execCommand(data.command, html, null, data.button);

        // Hide the popup and set focus back to the editor
        editor.hidePopups();
        editor.focus();
      });
  }
})(jQuery);