HtmlNode Attribute 'contentEditable=false' prevents html node from being modified in editable container

[cchet]

I have found your plugin and have played around a little bit with it and I have found out that
$(variableSpan).attr("contentEditable", "false") does exactly what we need.

It prevents the html node in the editable node from being modified and moves the caret over the html node and deletes it on backspace and delete key.
The only thing you need to do is to add the node via range.insertNode() and not via document.execCommand() (used in the editor source), which behaved very strange in chrome, where html node attributes such as id and class disappeared.
See here: Stackoverflow issue

So it does exactly what your plugin does, except the dynamic provided variables and selection.

Worked for me for me in CLEditor.

Enjoy :)

[Sitebase]

Thanks for this suggestion @cchet. I'm definitely going to look into this.

[cchet]

You'r welcome,
I have switched to ckeditor which provides more features and is in my opinion well documented.
Another issues was that the variable was not selectable with contentEditable=false, but still the variable html representation was able to be dragged or at least part of it, which destroyed the html representation of the variable.
Therefore I did some research and the following css did solve the issue. Now the html representation is not modifiable at all anymore.

.variable {
    cursor: pointer;
    background-color: #A0A0A0;
    color: #FFF;
    padding: 0px 2px 0px 2px;
    border-radius: 2px;
    font-weight: bold;
    font-style: italic;
    /*font-size: 10px;*/
    display: inline-block;
    /*line-height: 12px;*/

    /* disable drag drop for node (draggable=true on span has same effect) */
    user-drag: element;
    -moz-user-select: none;
    -webkit-user-drag: element;
    -webkit-user-select: none;
    -ms-user-select: element;
}

[Sitebase]

Added the contentEditable fix to the master branch.
execCommand seems to work without a problem here.
When I add the CSS code I get strange results when I try to drag. At the point I start to drag the actual variable string is shown (e.g. {bla}) while without the CSS it works without a problem.
@cchet How were you able to drag the variable because that doesn't seem to be possible in my Chrome?