2010/11/26

CKEditor compact implement guid

implement way 1 : use css
<textarea id="editor" class="ckeditor"></textarea>
implement way 2 : use javascript
<textarea id="editor"></textarea>
<script type="text/javascript">
// default
CKEDITOR.replace("editor");
// with settings
CKEDITOR.replace("editor", {skin:"office2003", toolbar:"Basic"});
</script>
implement way 3 : use jQuery
<textarea id="editor"></textarea>
<script type="text/javascript">
// default
$("#editor").ckeditor();
// with settings
$("#editor").ckeditor(
    function(){
        // callback code
    },
    {
        uiColor: "pink",
        skin: "kama",
        toolbar: [
            ["Source", "Preview"],
            "/",  // line break
            ["Cut", "Copy", "Paste", "PasteText", "PasteFromWord", "Print", "SpellChecker", "Scayt"]
        ]
    }
);
</script>
toolbar properties
"Source"
"Save" "NewPage" "Preview" "Templates"
"Cut" "Copy" "Paste" "PasteText" "PasteFromWord" "Print" "SpellChecker" "Scayt"
"Undo" "Redo" "Find" "Replace" "SelectAll" "RemoveFormat"
"Form" "Checkbox" "Radio" "TextField" "Textarea" "Select" "Button" "ImageButton" "HiddenField"
"Bold" "Italic" "Underline" "Strike" "Subscript" "Superscript"
"NumberedList" "BulletedList" "Outdent" "Indent" "Blockquote"
"JustifyLeft" "JustifyCenter" "JustifyRight" "JustifyBlock"
"Link" "Unlink" "Anchor"
"Image" "Flash" "Table" "HorizontalRule" "Smiley" "SpecialChar" "PageBreak"
"Styles" "Format" "Font" "FontSize"
"TextColor" "BGColor"
"Maximize" "ShowBlocks" "About"

CKEditor 3 JavaScript API Documentation