Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
5.2 kB
4
Indexable
// Multi Root

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – multi-root editor build – development sample</title>
    <style>
        body {
            max-width: 800px;
            margin: 20px auto;
        }

        .editor {
            border: #ccced1 1px solid;
            margin-top: 10px;
        }

        .boxes {
            margin-top: 10px;
            display: flex;
        }

        .box {
            margin-top: 0px;
            width: 50%;
        }

        /*
            Make the editable "fill" the whole box.
            The box will grow if the other box grows too.
            This makes the whole box "clickable".
         */
        .box .ck-editor__editable {
            height: 100%;
        }

        .box-left {
            margin-right: 10px;
        }

        /*
            When toolbar receives this class, it becomes sticky.
            If the toolbar would be scrolled outside of the visible area,
            instead it is kept at the top edge of the window.
         */
        #toolbar.sticky {
            position: sticky;
            top: 0px;
            z-index: 10;
        }
    </style>
</head>
<body>
<div id="toolbar"></div>
<!--
    Wrapping the structure inside a pair of
    contenteditable="true" + contenteditable="false" elements
    is required to provide proper caret handling when
    using arrow keys at the start and end of an editable area.

    You can skip them if you don't want to move the
    caret between editable areas using arrow keys.
!-->
<div contenteditable="true">
    <div contenteditable="false">
        <div class="editor">
            <div id="header">
                <p>This is the initial editor content.</p>
            </div>
        </div>
        <div class="editor">
            <div id="content">
                <p>This is the initial editor content.</p>
            </div>
        </div>
        <div class="boxes">
            <div class="box box-left editor">
                <div id="left-side">
                    <p>This is the initial editor content.</p>
                </div>
            </div>
            <div class="box box-right editor">
                <div id="right-side">
                    <p>This is the initial editor content.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
	MathJax = {
		tex: {
			inlineMath: [['$', '$'], ['\\(', '\\)']]
		}
	};
</script>

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

<script src="https://cdn.ckeditor.com/ckeditor5/39.0.2/multi-root/ckeditor.js"></script>
	
<script>
    MultiRootEditor
        .create( {
            // Define roots / editable areas:
            header: document.getElementById( 'header' ),
            content: document.getElementById( 'content' ),
            leftSide: document.getElementById( 'left-side' ),
            rightSide: document.getElementById( 'right-side' ),
        } )
        .then( editor => {
            window.editor = editor;

            // Append toolbar to a proper container.
            const toolbarContainer = document.getElementById( 'toolbar' );
            toolbarContainer.appendChild( editor.ui.view.toolbar.element );

            // Make toolbar sticky when the editor is focused.
            // editor.ui.focusTracker.on( 'change:isFocused', () => {
            //     if ( editor.ui.focusTracker.isFocused ) {
            //         toolbarContainer.classList.add( 'sticky' );
            //     } else {
            //         toolbarContainer.classList.remove( 'sticky' );
            //     }
            // } );
        } )
        .catch( error => {
            console.error( 'There was a problem initializing the editor.', error );
        } );
</script>

<!-- <script type="text/javascript">
	function ckeditor_initialize() {
		const CKEDITOR_CONFIG = {
			extraPlugins: 'mathjax,notification',
			mathJaxLib: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML',
			height: 100,
			removeButtons: 'Source,Save,Templates,NewPage,ExportPdf,Preview,Print,Cut,Copy,Paste,PasteFromWord,PasteText,Find,SelectAll,Scayt,Replace,Form,Checkbox,Radio,Textarea,TextField,Select,Button,ImageButton,HiddenField,Strike,CopyFormatting,RemoveFormat,BulletedList,NumberedList,Outdent,Indent,Blockquote,CreateDiv,JustifyLeft,JustifyCenter,JustifyRight,Language,BidiLtr,Link,Unlink,BidiRtl,Anchor,Table,Image,HorizontalRule,SpecialChar,Smiley,PageBreak,Iframe,Styles,Format,Font,FontSize,BGColor,TextColor,Maximize,ShowBlocks,About,JustifyBlock'
		};

		const requiredFieldWarning = 'This field is required.';

		const editors = $(".editor").map(function() {
			var id = $(this).attr('id');

			const editor = CKEDITOR.replace(id, CKEDITOR_CONFIG);

			editor.on('required', evt => {
				editor.showNotification(requiredFieldWarning, 'warning');
				evt.cancel();
			});
			return editor;
		});
		if (CKEDITOR.env.ie && CKEDITOR.env.version == 8) {
			document.getElementById('ie8-warning').className = 'tip alert';
		}
	}
	ckeditor_initialize();
</script> -->

</body>
</html>