TinyMCE add runtime styles to disable editing an element

1 Views

I’m trying to create better “in editor” previews for my shortcodes.

So, I’m wrapping them with CSS classed divs that I can style via editor-styles.css like so:

Read More
    if (customid != 0 && customid == 'divider_bar_soft_up' ){
        tagtext = "<div class="my_editor_style mceItemNoResize">["+ customid + "/]</div>";
    }

Which works fine except that the mceItemNoResize class is not attaching to the element when its transferred into the editor. The source code inside the editor looks like this: 

<div class="my_editor_style">[divider_bar_soft_up/]</div>

My question is “How can I apply a custom css class or styling to this element so that it cannot be inadvertently edited (other than moved or deleted)?

I’m trying to prevent the user to accidentally inserting their cursor inside my wrapper div and start typing.

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. Hmm, you could catch click events on the wrapper div and return false.

    Example:
    Checks if a ckick occurs if the specified element has been clicked and moves the cursor after that element. Be aware that in case you have more html elements inside that div you need to do aditional checks.

    ed.on('init', function(e){
    ed.on('click', function(evt){
        if (evt.target == 'DIV' && evt.target.className == 'my_editor_style')
        {
            // remove selection
            ed.selection.select(evt.target);
            // collapse selection range to end
            ed.selection.collapse(0);
        }
    });
});