Problems with simple custom widget

I'm writing a simple widget that will allow the user to put placeholders in an email template for things such as Header1, SubHeader, Subject, Content, etc.  All it needs to put in the html is a span like <span class="tokentags-widget">Header1<span> and then allow the user to use the widget edit dialog to select from a list of allowable values.

I tried to follow the widget tutorial and it all seems to work for the most part except for two things. First, when I put my cursor somewhere in the html and click my widget button, I get the dialog to select my token but when I click OK, the widget gets inserted at the beginning of the document instead of where the cursor is and the dialog stays open making me click OK twice to close it.

Secondly, once I have the widget placed somewhere in my html and I double click it to select a new token, it only actually changes the token in the widget every other time. The first time I try to change it it stays the same, the second time it accepts the change. The third time it stays the same, the fourth time it accepts the change, etc.

I've attached the plugin.js file, the dialog definition tokentags.js and the css file I'm using to style the widget.

Any clues what I might be doing wrong here? 

UPDATE: Solved my own problem. I had a knockout binding that was getting/setting the value to CKEDITOR that was causing the problem. I remove the knockout binding and now it works perfectly.