CKEditor Tutorials (2) - Get Started

2023-05-21 09:42:04

Prepare the environment:

You need a website or be able to start a web service on one of your computers.

Download the latest version from the CKEditor website.

Extract the downloaded archive to a directory called ckeditor in the root of your website.

Install firefox and firebug if you haven't.

Fundamental knowledge about html, css, javascript and html5 are also needed to better grasp content below. Visitw3schools or w3school to learn more.

Sample 1: Hello World !

There are two common ways to use CKEditor. One is use it in a frame as example below.

<html>
<head>
    <title>CKEditor Sample1</title>
    <script src="/ckeditor/ckeditor.js"></script>
</head>
<body>
    <form method="post">
        <p>
            My Editor:<br>
            <textarea name="editor1"><p>Hello World!.</p></textarea>
            <script>
                CKEDITOR.replace( 'editor1' );
            </script>
        </p>
        <p>
            <input type="submit">
        </p>
    </form>
</body>
</html>

Or inline editing by leverage contenteditable attribute of HTML5. When clicking inside the <div> contents, the CKEditor toolbar will appear.

<html>
    <head>
        <title>CKEditor Sample2</title>
        <script src="/ckeditor/ckeditor.js"></script>
    </head>
    <body>
        <div id="editable" contenteditable="true">
            <h1>Hello World!</h1>
            <p>The div element that holds this text is now editable.
        </div>
    </body>
</html>

Sample 2: Add a button

Reference:

CKEditor Installation

CKEditor plugin development from Docin.