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 的文件頁面。