CKEditor Tutorials (2) - Get Started

最新推荐文章于 2022-05-08 16:12:10 发布

待业中

最新推荐文章于 2022-05-08 16:12:10 发布

阅读量571

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/mayongl/article/details/8689940

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.