Tuesday, July 14, 2009

Custom Paragraph Classes in Typo3 RTE

Sometimes it is important to apply custom classes to paragraphs in RTE. Typo3 allows you to customize the "Block style" list easily. All it takes is a few lines of Typo Script in page TSconfig.

Let's add class lead for leading paragraph. We want this class to appear as "Leading paragraph" and be indicated with slightly bigger font on the "Block style" list. Here is how to do it in page TSconfig:
RTE {
classes.lead {
name = Leading paragraph
value = font-size:1.4em;
}

default {
contentCSS = fileadmin/templates/css/rte.css
proc.allowedClasses = lead
classesParagraph = lead
}
}
A few words of explanation:
  1. RTE.default.contentCSS defines css file used by RTE to render text in the editing window. It is required that the class we want to add is defined in this file
  2. RTE.classes.lead defines the entry for the "Block style" list; the value is inline style used to preview the class in the drop-down
  3. RTE.default.proc.allowedClasses tells RTE not to strip these classes when saving content to the database
  4. RTE.default.classesParagraph associates given class with paragraph, so you can see the selector on the "Block style" list when you choose "Paragraph" from the "Type of block" drop-down.
Further details (and much more) you can find in the page TSconfing documentation.

8 comments:

  1. hi friend, There is small change needed in your above code to get it work correctly. ie
    proc.allowedClasses = lead
    classesParagraph = lead

    must be changed to

    proc.allowedClasses := addToList(lead)
    classesParagraph := addToList(lead)

    ReplyDelete
  2. I tried both versions but I can't choose the class in the dropdown box in the editor. Actually it doesn't appear at all. Could you please, help me out?

    ReplyDelete
  3. Hi hostilites of miit, you are absolutely correct. In my example the list gets overwritten and you have presented the unobtrusive way of adding element to the list.

    Thanks a lot,
    Jacek

    ReplyDelete
  4. Hi Laura, have you added the class to the css file? It's a bit tricky because otherwise it doesn't show up in the dropdown.

    ReplyDelete
  5. Hey Laura,

    Thanks for sharing valuable information, Great stuff and excellent jobs.

    Typo3 Customization Services

    ReplyDelete
  6. Hello Laura,

    Great stuff, I love to read your article frequently its really nice stuff. keep it up to continue posting.

    Typo3 Customization India

    ReplyDelete
  7. hi
    thanks for sharing this information is great and good job.
    typo3 customization

    ReplyDelete
  8. I really appreciate information shared above. It’s of great help. If someone want to learn Online (Virtual) instructor lead live training in Typo3, kindly contact us http://www.maxmunus.com/contact
    MaxMunus Offer World Class Virtual Instructor led training on Typo3. We have industry expert trainer. We provide Training Material and Software Support. MaxMunus has successfully conducted 100000+ trainings in India, USA, UK, Australlia, Switzerland, Qatar, Saudi Arabia, Bangladesh, Bahrain and UAE etc.
    For Demo Contact us:
    Name : Arunkumar U
    Email : arun@maxmunus.com
    Skype id: training_maxmunus
    Contact No.-+91-9738507310
    Company Website –http://www.maxmunus.com


    ReplyDelete