The aim of this article is to get you up and running with CKEditor in two minutes.
Download
Visit the official CKEditor Download site. For a production site we recommend you choose the default Standard Package and click theDownload CKEditor button to get the .zip installation file. If you want to try out more editor features, you can download the Full Package instead.
Unpacking
Unpack (extract) the downloaded .zip archive to the ckeditor directory in the root of your website.
Trying Out
CKEditor comes with a collection of samples that you can try out to verify if the installation was successful as well as see some CKEditor usage scenarios, both basic and more advanced.
Open the following page in the browser: http://<your site>/ckeditor/samples/index.html
Browse the samples to see how CKEditor can be used and customized.
Adding CKEditor to Your Page
If the samples work correctly, you are ready to build your own site with CKEditor included.
To start, create a simple HTML page with a <textarea> element in it. You will then need to do two things:
- Add a call to the CKEditor script in the
<script>element of your page. - Use the
CKEDITOR.replace()method to replace the existing<textarea>element with CKEditor.
See the following example:
<!DOCTYPE html>
<html>
<head>
<title>A Simple Page with CKEditor</title>
<!-- Make sure the path to CKEditor is correct. -->
<script src="../ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
</form>
</body>
</html>When you are done, open your sample page in the browser.
Congratulations! You have just installed and used CKEditor on your own page in virtually no time!
Next Steps
Go ahead and play a bit more with the samples; try to add the same functionality to your own pages (you can always see the sample source for some hints). And when you are ready to dive a bit deeper into CKEditor, you can try the following:
- Check the Configuration section to see how to adjust the editor to your needs.
- Get familiar with Advanced Content Filter. This is a useful tool that adjusts the content inserted into CKEditor to the features that are enabled and filters out disallowed content.
- Modify your toolbar to only include the features that you need. You can find the complete list of all toolbar buttons available in your build in the “Toolbar Configurations” sample.
- Browse the Add-ons Repository for some additional plugins or skins.
- Use CKBuilder to create your custom CKEditor build.
- Browse the Developer’s Guide for some further ideas on what to do with CKEditor and join the community to discuss all things CKEditor with fellow developers!