How to insert <span> tag into rich:editor using jquery drag and drop?

Hello everyone. I have another question on rich:editor. I am implementing a feature that allows a user to drag a tag, which serves as a placeholder (kinda like a template) into Richfaces component rich:editor at the cursor. I was able to get it to work, but only partially: I can drag and drop the text value of the span into rich:faces, but not the actual tag. Here is what I have:

<h:panelGroup id="column1PG" layout="block">
    <rich:editor theme="advanced" plugins="fullscreen" value="Sample data..." 
                 id="headerDesignArea" autoResize="true" width="250" height="100" 
                 required="false">
        <%-- I defined a few <f:param> components here --%>
    </rich:editor>

<h:panelGroup layout="block" id="pseudodroppable" />

$(document).ready(function() {
          var options = {
             accept: "span.placeholder",
             drop: function(ev, ui) {
               insertAtCaret($("iframe#templatesDetailsPanel\\:headerDesignAreaTextArea_ifr").get(0), 
               ui.draggable.eq(0).text());
             }
         };

$("span.placeholder").draggable({
             helper:'clone',
             start: function(event, ui) {
                var txta = $("iframe#templatesDetailsPanel\\:headerDesignAreaTextArea_ifr");
                $("div#templatesDetailsPanel\\:pseudodroppable").css({
                   position:"absolute",
                   top:txta.position().top,
                   left:txta.position().left,
                   width:txta.width(),
                   height:txta.height()
                }).droppable(options).show();
            },
            stop: function(event, ui) {
               $("div#templatesDetailsPanel\\:pseudodroppable").droppable('destroy').hide();
            }
        });

});
    </script>
    </h:panelGroup>

<%-- These are the spans I want to drag and drop --%>                
    <h:panelGroup layout="block" >
        <h:panelGroup styleClass="placeholder">Placeholder 1</h:panelGroup><br/>
        <h:panelGroup styleClass="placeholder">Placeholder 2</h:panelGroup><br/>
        <h:panelGroup styleClass="placeholder">Placeholder 3</h:panelGroup><br/>
        <h:panelGroup styleClass="placeholder">Placeholder 4</h:panelGroup><br/>
    </h:panelGroup>

I know I'm missing something fairly simple, but, unfortunately, I'm rather new to jquery. The method insertAtCaret I've found somewhere on http://stackoverflow.com website and I was able to make it work with the text inside rich:editor, but as placing the actual span there and make sure that rich:editor displays it properly - I'm a bit lost here.
Another thing I've noticed is that you can actually drag and drop the span into rich:editor, at the right place in the text without using jquery, but for that you have to select a span first, which with jquery you can drag the whole thing. It would be great if someone here could help me or point me to the right direction.

Thanks

I figured it out. However, I have another problem. How would you call "onkeyup" event from rich:editor? I want to be able to check if the user tries to delete a certain object, because some of them are not meant to be deleted, and I need to prevent the user from deleting it. I thought I can use onkeyup event to achieve that, but I don't know how to run it from rich:editor and doesn't do anything. Any suggestions? Thanks

Actually, your best bet is to look at the docs for the component that the rich:editor is based on. I believe that it's tinyMCE.

RichFaces often prefers to use pre-existing functionality over re-inventing the idea from scratch, so in the case of a rich editor, they wrapped one of the more popular HTML editors with JSF support.