alfiramdhani
/
hse-begems-editor


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Document editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/35.4.0/decoupled-document/ckeditor.js"></script>
    <!-- <script th:src="@{/ckeditor.js}"></script> -->
</head>
<body>
    <h1>Document editor</h1>

   <div class="document-editor">
    <div class="document-editor__toolbar"></div>
    <div class="document-editor__editable-container">
        <div class="document-editor__editable">
            Editor content is inserted here.
        </div>
    </div>
</div>

<style>

    .document-editor {

        border: 1px solid var(--ck-color-base-border);

        border-radius: var(--ck-border-radius);


        /* Set vertical boundaries for the document editor. */

        max-height: 700px;


        /* This element is a flex container for easier rendering. */

        display: flex;

        flex-flow: column nowrap;

    }


    .document-editor__toolbar {

        /* Make sure the toolbar container is always above the editable. */

        z-index: 1;


        /* Create the illusion of the toolbar floating over the editable. */

        box-shadow: 0 0 5px hsla( 0,0%,0%,.2 );


        /* Use the CKEditor CSS variables to keep the UI consistent. */

        border-bottom: 1px solid var(--ck-color-toolbar-border);

    }


    /* Adjust the look of the toolbar inside of the container. */

    .document-editor__toolbar .ck-toolbar {

        border: 0;

        border-radius: 0;

    }


    /* Make the editable container look like the inside of a native word processor app. */

    .document-editor__editable-container {

        padding: calc( 2 * var(--ck-spacing-large) );

        background: var(--ck-color-base-foreground);


        /* Make it possible to scroll the "page" of the edited content. */

        overflow-y: scroll;

    }


    .document-editor__editable-container .document-editor__editable.ck-editor__editable {

        /* Set the dimensions of the "page". */

        width: 15.8cm;

        min-height: 21cm;


        /* Keep the "page" off the boundaries of the container. */

        padding: 1cm 2cm 2cm;


        border: 1px hsl( 0,0%,82.7% ) solid;

        border-radius: var(--ck-border-radius);

        background: white;


        /* The "page" should cast a slight shadow (3D illusion). */

        box-shadow: 0 0 5px hsla( 0,0%,0%,.1 );


        /* Center the "page". */

        margin: 0 auto;

    }


    /* Override the page's width in the "Examples" section which is wider. */

    .main__content-wide .document-editor__editable-container .document-editor__editable.ck-editor__editable {

        width: 18cm;

    }


    /* Set the default font for the "page" of the content. */

    .document-editor .ck-content,

    .document-editor .ck-heading-dropdown .ck-list .ck-button__label {

        font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;

    }


    /* Adjust the headings dropdown to host some larger heading styles. */

    .document-editor .ck-heading-dropdown .ck-list .ck-button__label {

        line-height: calc( 1.7 * var(--ck-line-height-base) * var(--ck-font-size-base) );

        min-width: 6em;

    }


    /* Scale down all heading previews because they are way too big to be presented in the UI.

    Preserve the relative scale, though. */

    .document-editor .ck-heading-dropdown .ck-list .ck-heading_heading1 .ck-button__label,

    .document-editor .ck-heading-dropdown .ck-list .ck-heading_heading2 .ck-button__label {

        transform: scale(0.8);

        transform-origin: left;

    }


    /* Set the styles for "Heading 1". */

    .document-editor .ck-content h2,

    .document-editor .ck-heading-dropdown .ck-heading_heading1 .ck-button__label {

        font-size: 2.18em;

        font-weight: normal;

    }


    .document-editor .ck-content h2 {

        line-height: 1.37em;

        padding-top: .342em;

        margin-bottom: .142em;

    }


    /* Set the styles for "Heading 2". */

    .document-editor .ck-content h3,

    .document-editor .ck-heading-dropdown .ck-heading_heading2 .ck-button__label {

        font-size: 1.75em;

        font-weight: normal;

        color: hsl( 203, 100%, 50% );

    }


    .document-editor .ck-heading-dropdown .ck-heading_heading2.ck-on .ck-button__label {

        color: var(--ck-color-list-button-on-text);

    }


    /* Set the styles for "Heading 2". */

    .document-editor .ck-content h3 {

        line-height: 1.86em;

        padding-top: .171em;

        margin-bottom: .357em;

    }


    /* Set the styles for "Heading 3". */

    .document-editor .ck-content h4,

    .document-editor .ck-heading-dropdown .ck-heading_heading3 .ck-button__label {

        font-size: 1.31em;

        font-weight: bold;

    }


    .document-editor .ck-content h4 {

        line-height: 1.24em;

        padding-top: .286em;

        margin-bottom: .952em;

    }


    /* Make the block quoted text serif with some additional spacing. */

    .document-editor .ck-content blockquote {

        font-family: Georgia, serif;

        margin-left: calc( 2 * var(--ck-spacing-large) );

        margin-right: calc( 2 * var(--ck-spacing-large) );

    }


    @media only screen and (max-width: 960px) {

        /* Because on mobile 2cm paddings are to big. */

        .document-editor__editable-container .document-editor__editable.ck-editor__editable {

            padding: 1.5em;

        }

    }


    @media only screen and (max-width: 1200px) {

        .main__content-wide .document-editor__editable-container .document-editor__editable.ck-editor__editable {

            width: 100%;

        }

    }


    /* Style document editor a'ka Google Docs.*/

    @media only screen and (min-width: 1360px) {

        .main .main__content.main__content-wide {

            padding-right: 0;

        }

    }


    @media only screen and (min-width: 1600px) {

        .main .main__content.main__content-wide {

            width: 24cm;

        }


        .main .main__content.main__content-wide .main__content-inner {

            width: auto;

            margin: 0 50px;

        }


        /* Keep "page" look based on viewport width. */

        .main__content-wide .document-editor__editable-container .document-editor__editable.ck-editor__editable {

            width: 60%;

        }

    }

</style>


    <script>

    
    DecoupledEditor

    .create( document.querySelector( '.document-editor__editable' ), {

        cloudServices: {

            // All predefined builds include the Easy Image feature.

            // Provide correct configuration values to use it.

             tokenUrl: 'https://95591.cke-cs.com/token/dev/KXsmgFFR0bgdv4h3A2Fu4Mvf6aa4Vd1bSSql?limit=10',

             uploadUrl: 'https://95591.cke-cs.com/easyimage/upload/'

            // Read more about Easy Image - https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/easy-image.html.

            // For other image upload methods see the guide - https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/image-upload.html.

        }

    } )

    .then( editor => {

        const toolbarContainer = document.querySelector( '.document-editor__toolbar' );


        toolbarContainer.appendChild( editor.ui.view.toolbar.element );


        window.editor = editor;

    } )

    .catch( err => {

        console.error( err );

    } );

    
    </script>
</body>
</html>