CKEditor 5 Hello world

Posted on Edited on In Views: Disqus:

 

CKEditor 5 現有五種 builds

一、Classic editor

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://cdn.ckeditor.com/ckeditor5/12.2.0/classic/ckeditor.js"></script>
    <title>CKEditor 5</title>
</head>
<body>
    <textarea id="editor1"></textarea>
    <script>
        ClassicEditor
            .create(document.querySelector('#editor1'))
            .catch(error => {
                console.error(error);
            });
    </script>
</body>
</html>

結果畫面為

 

二、Inline editor

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://cdn.ckeditor.com/ckeditor5/12.2.0/inline/ckeditor.js"></script>
    <title>CKEditor 5</title>
</head>
<body>
    <div id="editor1">test</div>
    <script>
        InlineEditor
            .create(document.querySelector('#editor1'))
            .catch(error => {
                console.error(error);
            });
    </script>
</body>
</html>

結果畫面為

 

三、Balloon editor

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://cdn.ckeditor.com/ckeditor5/12.2.0/balloon/ckeditor.js"></script>
    <title>CKEditor 5</title>
</head>
<body>
    <div id="editor1">test</div>
    <script>
        BalloonEditor
            .create(document.querySelector('#editor1'))
            .catch(error => {
                console.error(error);
            });
    </script>
</body>
</html>

結果畫面為

 

四、Balloon block editor

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://cdn.ckeditor.com/ckeditor5/12.2.0/balloon-block/ckeditor.js"></script>
    <style>
        #editor1 {
            margin-left: 50px;
        }
    </style>
    <title>CKEditor 5</title>
</head>
<body>
    <div id="editor1">test</div>
    <script>
        BalloonEditor
            .create(document.querySelector('#editor1'))
            .catch(error => {
                console.error(error);
            });
    </script>
</body>
</html>

結果畫面為

 

五、Document editor

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://cdn.ckeditor.com/ckeditor5/12.2.0/decoupled-document/ckeditor.js"></script>
    <title>CKEditor 5</title>
</head>
<body>
    <div id="toolbar-container"></div>
    <div id="editor1">test</div>
    <script>
        DecoupledEditor
            .create(document.querySelector('#editor1'))
            .then(editor => {
                const toolbarContainer = document.querySelector('#toolbar-container');
                toolbarContainer.appendChild(editor.ui.view.toolbar.element);
            })
            .catch(error => {
                console.error(error);
            });
    </script>
</body>
</html>

結果畫面為