ckeditor 5 사용해 보기 > 웹개발

• 목록

https://ckeditor.com/ckeditor-5/ 

온라인 빌더

https://ckeditor.com/ckeditor-5/online-builder/

    <style>
        .ck-editor__editable {min-height: 350px;}
        .ck-content { font-size: 16px; }
    </style>

    <h1>Classic editor</h1>
    <div id="editor">
        <p>This is some sample content.</p>
    </div>
    <textArea id="txt1" name="txt1"></textArea>

    <input type="button" name="btn_test" value="  전송 테스트   "  onclick="func_test();"/>

    <script src="/resource/js/ckeditor5/ckeditor.js"></script>
    <script src="/resource/js/ckeditor5/translations/ko.js"></script>
    <script>
        let editor;
        ClassicEditor
            .create( document.querySelector('#editor'), {
                removePlugins: ['Heading'],       // 필요없는 기능 제거하기
                language: "ko",
                // 툴바지정시
                toolbar: [
                    'heading',
                    '|',
                    'bold',
                    'italic'
                ]
            }).then (newEditor => {
                editor = newEditor;
            }).catch( error => {
                console.error( error );
            } );

        function func_test() {
            tt = editor.getData();       // 값 가져오기
            console.log(tt);

            // 값 세팅
            editor.setData('<p>example</p>');
            tt = editor.getData();       // 값 가져오기
            console.log(tt);
        }
    </script>