ckeditor 入门

Created: November-22, 2018

Tihuan1 创建一个具有以下内容的文件：

<!DOCTYPE html>
<html>
<head>
    <title>CKEditor Demo!</title>
</head>
<body>
    <script src="//cdn.ckeditor.com/4.6.1/basic/ckeditor.js"></script>
    <div id="editor1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
    </div>
    
    <script>
    CKEDITOR.replace( 'editor1' );
    </script>
</body>
</html>

校园部上的 jsfiddle

说明代码

CKEditor 的 CKEditor 的加载从库加元 ;

    <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.6.1/ckeditor.js"></script>

与所有的内容，我们要在编辑器中创建一个新的元素 504
```
<div id="editor1">
ALL CONTENT HERE
 </div>
```
Tihuan2 告诉对象与一个所见即所得的编辑器（在 CKEditor 的）的 ID editor1 更换元件。
```
 <script>
 CKEDITOR.replace( 'editor1' );
 </script>
```

欲了解更多请参阅 CKEditor 的文档页面。