CKEditor Insert non editable HTML within style

Question

I'm currently working on a port of CKEditor into concrete5. As part of that, concrete5 has the ability to create "Snippets" which can be inserted via the editor. Developers have the ability to define what kind of HTML output these widgets produce but while in edit mode, it simply shows a place holder with the following HTML:

'<span 
    class="ccm-content-editor-snippet" 
    contenteditable="false" 
    data-scsHandle="' + selectedSnippet.scsHandle + '"
>' + selectedSnippet.scsName +'</span>'

I've looked into CKEditor widgets, but don't necessarily want to clutter my toolbar with a potentially large number of buttons to activate such functionaity. I'm curious if it's possible to add something to the stylescombo dropdown (or similar dropdown) which would then insert a snippet like the one above.

Currently what I have to try and do this can be found at https://github.com/ExchangeCore/Concrete5-CKEditor/blob/feature/magicstyles/assets/concrete5styles/plugin.js#L17-L30 This doesn't quite work because I have no way to insert the selectedSnippet.scsName into the innerHTML of the style. Is there some way to do this or some other more obvious way to go about this kind of insert functionality within CKEditor without making tons of toolbar buttons?

Also, the content of that span should be able to be removed, but not editable.

Answer 1

With this plugin you can create a dropdown to insert any HTML block that you want: http://ckeditor.com/addon/htmlbuttons

If it doesn't fit your needs, look at the source code and pick the parts that you are missing.