Cannot apply basic style to non editable elements

I use TinyMce with the noneditable plugin.

I want to be able to wrap non editable elements with basic styling tags.

For example if I have :

Hello <span class="mceNonEditable">user_name</span> how are you today ?

If I click on user_name to select the non editable span and click on the TinyMce Bold button.

I would like the result to be :

Hello <b> <span class="mceNonEditable">user_name</span> </b> how are you today ? 

But instead of this, nothing happens. When I click the TinyMce Blod button, the code doesn’t change.

I created a small jsFiddle to demonstrate this : https://jsfiddle.net/timotheejeannin/2hhpenm5/

I tried to use the data-mce-contenteditable attribute to override the non editable behavior when a button is clicked. It looks like it’s used in DOMUtils.js line 1739 to determine if the element is editable or not.

I think the issue comes from the fact that Formatter.js line 715 just returns instead of doing work if a non editable element is found.

I posted a StackOverflow question here : http://stackoverflow.com/questions/40885928/apply-basic-style-to-non-editable-elements-in-tinymce

How can I solve this ? Is this a bug ?

[spocke]

This isn’t a bug but rather by design. However we have seen people wanting this behavior so maybe we should change the code to allow elements to be styled.

[hunterae]

I figured out a “slightly” less hacky way to do this. Essentially, I register a “BeforeExecCommand” event that, for certain events, removes the contenteditable attribute, allows the command to run, and readds the contenteditable false attribute in the “ExecCommand” event. Doing so allowed me to avoid having to custom handle the various possible events that I have seen in other proposed solutions. I have forked your original example to demonstrate the solution (and added a couple of additional formatting options and a “Variables” feature) which can be found here: https://jsfiddle.net/hunterae/8fsnv3h6/40/

Here are the most relevant pieces of the solution:

tinymce.init({
  // Additional options here
  setup: function (editor) {
  	var $ = tinymce.dom.DomQuery;
  	var nonEditableClass = editor.getParam('noneditable_noneditable_class', 'mceNonEditable');
    // Register a event before certain commands run that will turn contenteditable off temporarilly on noneditable fields
    editor.on('BeforeExecCommand', function (e) {
      // The commands we want to permit formatting noneditable items for
      var textFormatCommands = [
        'mceToggleFormat',
        'mceApplyTextcolor',
        'mceRemoveTextcolor'
      ];
      if (textFormatCommands.indexOf(e.command) !== -1) {
      	// Find all elements in the editor body that have the noneditable class on them
      	//  and turn contenteditable off  
        $(editor.getBody()).find('.' + nonEditableClass).attr('contenteditable', null);
      }
    });
    // Turn the contenteditable attribute back to false after the command has executed
    editor.on('ExecCommand', function (e) {
    	// Find all elements in the editor body that have the noneditable class on them
      //  and turn contenteditable back to false
      $(editor.getBody()).find('.' + nonEditableClass).attr('contenteditable', false);
    });
  },
  init_instance_callback: function (editor) {
	  
  	/* 
    	The following two hacks fix some weirdness with the way the textcolor
      plugin works - namely, it was attemping to apply color and background-color
      directly on the element that had the noneditable css class on it instead of putting
      a span around it as underline does.
  	*/
  	editor.formatter.get('forecolor')[0].exact = true;
    editor.formatter.get('hilitecolor')[0].exact = true;
    
    
  }
});