Problem/Motivation

The ability to add multiple classes to an individual element is not readily apparent in the current description text.

Proposed resolution

Add a line of text to the description text explaining this, which could probably do with some community review.
"Multiple classes may be added to an individual element.
Example: Small Title=h2.small.title"

Remaining tasks

  • Communally agree that the text is either good or terrible.
  • If it is terrible, adjust it.

User interface changes

Update to the description text in wysiwyg_ckeditor_settings_form().

API changes

None.

Issue fork wysiwyg-1783500

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

carwin’s picture

Here is a patch containing the update.

TwoD’s picture

Nice issue description.
Looks good to me. Any objections, Sun?

sun’s picture

+++ b/editors/ckeditor.inc
@@ -133,9 +133,10 @@ function wysiwyg_ckeditor_themes($editor, $profile) {
+    $form['css']['css_classes']['#description'] = t('Optionally define CSS classes for the "Font style" dropdown list.<br />Enter one class on each line in the format: !format. Example: !example<br />Multiple classes may be added to an individual element. Example: !example2<br />If left blank, CSS classes are automatically imported from loaded stylesheet(s).', array(

I think there are two issues here:

1) The entire text talks about classes, but the actual definition is about block formats/styles, not classes. This especially makes this part very confusing: "Enter one class on each line in the format:" -- it sorta implies that there can only be one class. But it actually means "one format on each line." (perhaps "selector" would be a more appropriate term; but then again, IIRC the editor only supports tagname + class[es] combinations)

2) I'm not sure whether we need an entire separate sentence to clarify on multiple classes. What if the example snippet just simply showed that possibility baked-in? E.g., Title=h1.first-class.second-class

What do you think?

TwoD’s picture

Good points, that could get confusing to someone not already familiar with this feature.

CKEditor actually supports a lot more complex style sets, take a look at http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles

You can make the Font Styles dropdown apply pretty much any attribute or style to the current selected element.

carwin’s picture

Status: Needs review » Patch (to be ported)
FileSize
1.32 KB

I agree with you on both points, I think a better clarification would be to remove the "class" part of the current description line and instead say "tag"/"selector"/"whatever" and then do as you suggested in the example, which would give us something like this:

Enter one tag/selector/whatever on each line in the format: Title=h1.first-class.second-class

This is a much more concise approach.

I'm attaching a patch that does just this, and I chose to use "tag" since that's the way HTML describes elements.

Edit: I think I chose the wrong status. Should this be "needs review" ?

carwin’s picture

TwoD posted while I was writing my last comment so I didn't see the new information he shared -- but that's pretty cool, I didn't realize we could put IDs there too. Perhaps a more verbose explanation is due after all, or heck -- what about linking to a documentation page rather than trying to fit everything into this description text?

Also according the the w3c spec, it should probably be "element" rather than "tag": http://dev.w3.org/html5/markup/elements.html

Edit: While the documentation TwoD posted does say IDs are available (as well as tons of other cool things like element attributes) - it looks like the module itself is limited to classes. That might be a pretty cool feature to implement.

sun’s picture

Status: Patch (to be ported) » Needs review

I'm pretty sure that we won't be able to support arbitrary attributes within that textarea -- or at least, that would be massively complex parser code and most probably require a syntax that no one understands ;)

I wonder whether this would cut it?

Enter one format on each line: Title=h1.first-class.second-class

That would be on the assumption that the users who are configuring this can make sufficient sense of the example snippet and understand that the actual syntax is my label=element[classnames] (classnames are optional) — so instead of trying to explain the syntax in words, the actual example helps users more.

Since this a custom string syntax that is being parsed by the module, I don't think that a link to CKEditor's documentation would be helpful (I'd think it would be misleading and confusing, actually).

carwin’s picture

That line seems good to me. It solves my original issue at any rate!

When I mentioned linking to some documentation I meant a page here on D.O which would give us a little more breathing room to explain the thing. Probably overkill considering you just summed it up in one line though.

carwin’s picture

Here is a patch containing sun's suggestion.

I also found this same description listed in wysiwyg.admin.inc so I updated it there. Whether or not that change should be included as well is up to the maintainer. However, I would like to note that the original, unchanged, text in wysiwg.admin.inc varies from the original text in editors/ckeditor.inc by one word: "all."

In ckeditor.inc:
CSS classes are automatically imported from loaded stylesheet(s)

In wysiwyg.admin.inc:
CSS classes are automatically imported from all loaded stylesheet(s)

I also updated the formatting of the line in wysiwyg.admin.inc to match ckeditor.inc for readability. You can see all that in the patch.

Seriously, no big deal - just thought I'd point that out for consistency in case my patch doesn't make it into the project.

TwoD’s picture

@carwin, the old description is still valid for TinyMCE.

I just did a grep -lr css_classes . inside the wysiwyg folder to see which files uses the 'css_classes' property.
The result was pretty disappointing.

./wysiwyg.admin.inc
./editors/ckeditor.inc
./editors/tinymce.inc

Problem: The css_classes feature is only supported by two editors, (3 if #671528: Support custom css styles gets some more attention), but it's shown for all editors.

Suggestion: Remove any mention of this feature from wysiwyg.admin.inc and move the code from wysiwyg.admin.inc to tinymce.inc, adjust ckeditor.inc as needed.

Result: Users aren't tricked into thinking we support this feature for the other editors, less confusing UI, easier to customize the implementation for each editor.

Implementation: Removed all code related to css_classes from wysiwyg.admin.inc. Moved the complete css_classes element definition to ckeditor.inc and tinymce.inc. Used a simplified validation regexp in tinymce.inc since it only supports one classname (haven't checked their code, but the examples only use one class). Made sure the css_classes setting is initialized if it doesn't exist. No need to remove it from existing profiles since it won't hurt and it will automatically be skipped if not needed when profiles are saved.

Additional: I found something odd in the validation regexp for CKEditor. It looks like this: '@^.+= *[a-zA-Z0-9]+(\.[a-zA-Z0-9_ -]+)*$@', which would not allow _ or - in the first classname, so I changed that to: '@^.+= *[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_ -]+)*$@'. Validation works better now.

TwoD’s picture

Changed 'altered' to 'added' in the element validation function comments, since the css_classes element no longer exists by default.

carwin’s picture

Status: Needs review » Reviewed & tested by the community

TwoD I didn't realize that's what was going on in wyswiyg.admin.inc - I like your solution to the sub-issue this has become!

Patch works as described.

kunal_sahu made their first commit to this issue’s fork.

TwoD’s picture

Issue summary: View changes
Status: Reviewed & tested by the community » Needs work

This patch no longer applies.