Apply css to CKEditor

Posted on 2011-04-25
Last Modified: 2012-08-13
Does anyone know how to apply css to the CKEditor WYSIWYG. I don't mean to provide the user with styling options, but rather to make the user experience look more like the front end styling.
Question by:s8web
    LVL 13

    Expert Comment

    This shouldn't be a problem.

    You simply need to know the classes of the form that is used. You may have to use a lot of !important values in order to override the given values.

    If you look at the source code of your WYSISYG editor you should have no problem applying CSS styling to it.

    If you need some more specific guidance, put up a link of the WYSIWYG editor so we can help.
    LVL 10

    Accepted Solution

    Have a look at the fckconfig.js File of the FCK Editor.

    FCKConfig.EditorAreaStyles = 'your.css';
    Can be a single File or an array
    FCKConfig.EditorAreaStyles = new Array('your.css', 'other.css');
    LVL 10

    Assisted Solution

    CKEDITOR.editorConfig = function( config )
          // Define changes to default configuration here. For example:
          // config.language = 'fr';
          // config.uiColor = '#AADC6E';
          config.contentsCss = ['/css/styles.css', '/css/def_42.css'];

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Problem to be resolved in this article Currently, development of website and web application can be done without writing thousands of lines of programming code by hand. Description This can be done through by using a open source framework such …
    I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
    Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
    Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

    733 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now