CKEDITOR Install & Config Tips

 

1. Install to /scripts/ckeditor/
2. /_samples/ has great examples and applications
3. /plugins/styles/styles/default.js for Style Dropdown List
4. /plugins/stylesheetparser/plugin.js for linking to a *.css file to simply life. I opted to link my index.php and page_editor.php to the same *.css file to ensure I could use everything available AND ensure I don't use anything that ISN'T supported.
5. /assets/parsample.css is the default css file used.

 

/config.js is where most settings will take place. Just add lines as needed to configure ckeditor

CKEDITOR.editorConfig = function( config )
{
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    config.stylesSet = [];
    config.extraPlugins = 'stylesheetparser';
    config.contentsCss = 'http://www.silosix.com/mockup02/administrator/stylesck1a.css';   
};

integrating with html page;

<script type="text/javascript" src="../scripts/ckeditor/ckeditor.js"></script>
<script src="../scripts/ckeditor/_samples/sample.js" type="text/javascript"></script>

<textarea> TAG Replacement

<td colspan="6" align="left" valign="top" bgcolor="#DAEAFA">
<textarea class="ckeditor" cols="100" id="pagebody" name="pagebody" rows="20"><?php echo $pagebody; ?></textarea>    </td>

Ensure the "id" attribute is set to the value you originally had in the form's <textarea> tag. This will be posted to php so is CRITICAL to be aware of this value.

Change the editor BODY color

/ckeditor/skins/kama/editor.css

.cke_skin_kama .cke_contents iframe {
/*    background-color:#fff; */
    background-color:#fff;
}

 

 

USAGE

MUST have an element attached to the style, such as:

p.paragraphAllBold

div.BlackBackgroundWhiteText

Sample CSS Code:

div.panelDigtalReadout1{
    display: block;
    width: 94%;
    border-radius: 14px 14px 14px 14px;
    background-color:#000;
    color: #17B4FF;
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: none;
    text-shadow: 1px 1px #000000;
    border-top-width: 4px;
    border-right-width: 7px;
    border-bottom-width: 3px;
    border-left-width: 3px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #004F75;
    border-bottom-color: #333333;
    border-left-color: #004F75;
    border-right-color:#444444;
    margin-top: 3px;
    margin-right: 3px;
    margin-bottom: 3px;
    margin-left: 3px;
    padding-top: 2px;
    padding-right: 2px;
    padding-bottom: 2px;
    padding-left: 2px;
    font-family: "Courier New", Courier, monospace;
}

div.stretchWithImage1{
    background-image: url(/mockup02/images/art/aposet1/20121113-Botanical-A-1004-x500.png);
    background-size: 100% 100%;
    background-repeat: repeat;">
    border-top:#FFF 2px solid;
}