Project

General

Profile

Actions

Bug #72460

closed

htmlArea RTE: CSS class names are lowercase in WebKit

Added by Hannes Lau about 8 years ago. Updated over 6 years ago.

Status:
Closed
Priority:
Must have
Assignee:
-
Category:
RTE (rtehtmlarea + ckeditor)
Target version:
-
Start date:
2015-12-28
Due date:
% Done:

0%

Estimated time:
TYPO3 Version:
7
PHP Version:
Tags:
Complexity:
Is Regression:
Yes
Sprint Focus:

Description

#32408 seems to be back. In Chrome 47.0.2526.106 on TYPO3 7.6.2 the RTE editor seems to lowercase all css class names.


Related issues 1 (0 open1 closed)

Related to TYPO3 Core - Bug #32408: htmlArea RTE: CSS class names are lowercase in WebKitClosedStanislas Rolland2011-12-09

Actions
Actions #1

Updated by Gianluigi Martino about 8 years ago

  • Status changed from New to Needs Feedback

i cannot reproduce this (see image).

do you use fluid_styled_content or css_styled_content?
your rte configuration?

Actions #2

Updated by Hannes Lau about 8 years ago

Image?

I use fluid_styled_content.

Here is some of my RTE configuration, set in a PageTSConfig.ts file

RTE.default {
    contentCSS = EXT:my_ext/Resources/Private/rte_content.css
    ignoreMainStyleOverride = 1

    showStatusBar = 1

    showButtons := addToList(copy, cut, paste)
    showButtons := addToList(pastetoggle, pastebehaviour)
    showButtons := addToList(undo, redo)
    showButtons := addToList(removeformat)
    showButtons := addToList(formatblock, blockstylelabel, blockstyle)
    showButtons := addToList(textstylelabel, textstyle)
    showButtons := addToList(orderedlist, unorderedlist)
    showButtons := addToList(emphasis, strong)
    showButtons := addToList(subscript, superscript)
    showButtons := addToList(insertsofthyphen)
    showButtons := addToList(link, unlink)
    showButtons := addToList(acronym, findreplace)
    showButtons := addToList(spellcheck)

    proc.allowTags = h3

    buttons.formatblock {
        addItems = h3
        restrictToItems = h3, p
        items.h3 {
            label = h3
            tagName = h3
        }
    }
}

rte_content.css contains a mixed-case class "linkList", which appears all-lowercase in the block style selector of any ul element. The problem does not occur in Firefox.

/* make ul.linkList selectable */
ul.linkList {}

Adding styling rules to the .linkList class in the css file, does not make any difference.

I hope this is more helpful than my initial bug report. If this example does not help, I will try to provide a minimal one.

Actions #3

Updated by Riccardo De Contardi about 8 years ago

I can confirm it with the latest master (8.0-dev) and Fluid Styled Content; steps to reproduce:

1) Set a very basic RTE configuration:

RTE.default.showButtons = *
RTE.default.contentCSS.file2 = fileadmin/rte.css
RTE.classes{
 linkList{
     name= linkList
     value=color: #FF6600;     
 }
}
RTE.default.proc.allowedClasses := addToList(linkList)

2) write the file /fileadmin/rte.css with the following content:

ul.linkList{
 color:#FF6600;
}

3) Create a Text CE, write an unordered list as content; select it; select "linkList" from the Block style dropdown

RESULT:

- on Chrome and Safari, the list is saved as <ul class="linklist">,,, (all lowercase)
- on Firefox, it is saved with the correct capital letter

Actions #4

Updated by Riccardo De Contardi about 8 years ago

  • Status changed from Needs Feedback to New
Actions #5

Updated by Paul A. Auwehla about 8 years ago

Its is a mess.
Why?
When setting this changed lowercase classes within RTE from Chrome
they will be unknown(!) in other Browser.
So using Chrome is creating text-elements messed up after using this new and unknown class "linklist".
Editing again the same text will result in "Unknown style" in Firefox!

The "bug" or mess is: Chrome tries to be strictly conform to W3-rules - am I right?
And CSS-classes have to be lowercase in our days.

Chrome is accepting and respecting CamelCase classnames in existing html-code -
but RTE in Chrome reads an existing linkList as linklist and saves this new "linklist" into the html-code.
This makes the css useless in the typo3-text-element.
These "linklist" and "linkList" or "LinkList" are completely different classnames
and to not have anything to do with each other - in all browsers!!

So the following procedure resolve this strict-html Chrome RTE-problem:
Change your typo3-settings, typo3 has a already a solution.
Use:

RTE.default.contentCSS = fileadmin/rte.css
  1. this includes the css-classes into the RTE.
  2. The following lines are not needed at all for using this classes from rte.css
  1. But the following lines are usefull to make the class as "linkList" readable for human editors AND Chrome.
  2. Rewrite in rte.css the classname "linkList", to what Chrome and W3 want:
  3. The lowercase css-classname "linklist".
  4. write "p.linklist" as css-definition in your rte.css
  5. RTE now knows its a classname and presents it in the block-style list in typo3-backend.
  1. Than redefine this classname "linklist" for a better use in RTE and make it readable for your editors,
  2. set an additional .name for the css-class
  3. This is only needed for Chrome if you want a CamelCase name in the RTE block-style list
  4. instead of the lowercase css-classnames from the rte.css
RTE.classes{
linklist.name = Links as a List
  1. otherexample.name = Other Textformat
    }
  1. RTE.default.proc.allowedClasses:=addToList ...
  2. useless for classnames from the rte.css file.
  3. They are already defined there ;-)

This solves the problem and is available within existing definition and configuration options
in RTE. Now editors with Chrome and Firefox can work together.

PS.
To use old and new linklist and linkList without conflicts in existing installations,
you should use both like p.linklist, p.linkList { your css formats } as a class-definition in rte.css
Remember linklist and linkList are different classes for css!!
REPLACING one with the other will make existing webpages look strange: The old class is unknown now.
Only both writings together will satisfy Chrome and Forefox and your editors ;-))

Actions #6

Updated by Paul A. Auwehla about 8 years ago

Another mess:
In my tip above all comment chars starting a line "#"
we use in typoscript are converted to numbers of a list.
Nevertheless I hope the tip is usefull to you.

Actions #7

Updated by Mathias Schreiber over 6 years ago

  • Status changed from New to Closed

HTMLArea is no longer supported by TYPO3.
You can open up new issues here https://github.com/FriendsOfTYPO3/rtehtmlarea.

Cheers
Mathias

Actions

Also available in: Atom PDF