3

I'm trying to implement a custom CSS property in my TinyMCE editor stylesheet for an EPiServer CMS project.

According to the EPiServer SDK, in order for me to add a custom style to the TinyMCE Styles dropdown, I need to use the EditMenuName property within the style class I'm planning to use.

Something like this:

.h1 {
    font-size: 2.5em;
    EditMenuName: Heading 1;
}

Adding the EditMenuName as a property name to my Less file generates a compile error.

Is this even possible at all?

Dzulqarnain Nasir
  • 2,150
  • 1
  • 19
  • 16
  • Is this answered in [this][1] similar question? [1]: http://stackoverflow.com/questions/17052003/custom-css-attributes-while-using-less – tompipe Jul 01 '13 at 09:50
  • Yes, the issue in [the link](http://stackoverflow.com/questions/17052003/custom-css-attributes-while-using-less) tompipe posted is that capital letters are not allowed in property names in LESS. Whether that is a bug or a lacking feature is unknown to me. – ScottS Jul 01 '13 at 13:58

1 Answers1

2

Update: This issue will be resolved in the release of LESS 1.4.2

Your Issue is the Capital Letters

Since there seems to be no consensus to close this as a duplicate of this question, I'll give a similar answer here.

LESS (whether by intentional design, unintentional lack in a feature, or simply a bug, I do not know) currently (as of this posting) does not allow capital letters in property names. This is true even of standard properties, such that Color: will not work. So your...

EditMenuName: Heading 1;

...would need to be some variation of these two...

editmenuname: Heading 1; 
edit-menu-name: Heading 1;

...none of which are likely to interface with your TinyMCE. To quote myself in that other answer:

I have not for certain isolated where in the actual LESS code itself this might be fixed (if it can be fixed for the way LESS handles the property rules). I suspect the cause is in the parser.js file lines 1578-1584 (as of this writing), which are:

property: function () {
  var name;

  if (name = $(/^(\*?-?[_a-z0-9-]+)\s*:/)) {
    return name[1];
  }
}

This seems to be filtering out allowing for capital letters. I don't know what the consequences would be if that regular expression was changed to allow for them.

So your only chances of making it interface as you want are either:

  1. Fix LESS to allow capital letters (perhaps by tweaking the above code).
  2. See if TinyMCE can have the property value changed to not have CamelCasing for the property name.
Community
  • 1
  • 1
ScottS
  • 71,703
  • 13
  • 126
  • 146
  • Thanks. It does seem like the problem is LessCSS not accepting uppercase characters. I'll find another way to fix this. – Dzulqarnain Nasir Jul 05 '13 at 14:53
  • I submitted [an enhancement request to LESS for this issue](https://github.com/less/less.js/issues/1398) using this and another question on SO for validity as to why it is needed. Perhaps they will respond soon. – ScottS Jul 05 '13 at 14:57
  • @DzulqarnainNasir: The release of LESS 1.4.2 will have this issue resolved so that capital letters are allowed in property names. – ScottS Jul 20 '13 at 14:16