Styles for multiple elements and context-sensitive selection

[Randall Severy]

For several years now I've used the "StylesXmlPath" config variable to dynamically load the Styles drop-down in the editor based on styles parsed from the web page being edited. But I never quite figured out how to get it to work properly, and just used the "span" element for every style. This caused every document being edited to end up with lots of spans, oftentimes overlapping several times, resulting in frustrated users. So with the upgrade to the version 2.6 beta I decided to take another stab at this area and I must admit I am just as confused as I've always been.

Many web pages have styles that are applied to multiple objects in a web page (p, a, li, etc.), but all attempts to specify a single style in the Styles XML file that can apply to multiple elements have failed. Is such a thing even possible? The best I could come up with was to create a variant of each style for each possible element, for example:

<Style name="p.mystyle" element="p">
  <Attribute name="class" value="mystyle" /> 
</Style>
<Style name="div.mystyle" element="div">
  <Attribute name="class" value="mystyle" /> 
</Style>
<Style name="mystyle" element="span">
  <Attribute name="class" value="mystyle" /> 
</Style>

The above approach doesn't really scale when you want to have each style available for dozens of elements, as the style drop-down would quickly grow to an unmanageable size. Also, a lot of times the users don't even know which type of object they have selected, and so may easily select the wrong style (which would then change the element type to the selected style, not a good thing).

So how can I specify in the Styles XML file styles that can be applied to multiple elements without resorting to the above hack? Also, I keep hearing about how FCKeditor is smart enough to only show those styles in the drop-down that are available for the selected object, but I haven't been able to get that to work either. When I click in a "p" tag, for example, I see all of the above styles in the drop-down, not just those available for the "p" element. The above hack would work ok if only those styles available for the selected object were shown (although the fact that the object type is prepended to the style name would still be annoying).

[Randall Severy]

Post by A.M. on Sat Jul 05, 2008 8:41 am in the Forum:

I don't think you can do this. I would enter a feature request for this - it sounds like a great idea. That is, to be able to add a universal CSS selector (i.e. the one that matches any element) to the list of styles, so one can use this class against any edited content.

I would take it even further and suggested to add a new multi-select list of CSS classes (i.e. select more than one when Ctrl is depressed), which would allow adding multiple CSS classes to the selected editoed content, like this:

<p class="box blue-theme">Some text</p>

[Artur Formella]

#2493 is a DUP of this ticket.

[Jakub Ś]

This can be considered as duplicate of #5890.

As ​http://dev.ckeditor.com/ticket/5980#comment:7 describes it -> it is currently not possible to define one style for many elements as they are presented in dropdown.

[heaven]

+1 to this.

Opened 6 years ago

Ohh...

I do work a few hours with this editor and found plenty of so odd bugs and lags that anyone is impossible to not notice. Guys, your site works better than the product.