|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<title>CKEditor 5 Mermaid widget – Development Sample</title>
|
|
|
<style>
|
|
|
body {
|
|
|
max-width: 800px;
|
|
|
margin: 20px auto;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
<h1>CKEditor 5 Mermaid widget – Development Sample</h1>
|
|
|
|
|
|
<div id="editor">
|
|
|
</div>
|
|
|
|
|
|
<!-- DLL builds are served from the `node_modules/` directory -->
|
|
|
<script src="../node_modules/ckeditor5/build/ckeditor5-dll.js"></script>
|
|
|
<script src="../node_modules/@ckeditor/ckeditor5-editor-classic/build/editor-classic.js"></script>
|
|
|
<script src="../node_modules/@ckeditor/ckeditor5-code-block/build/code-block.js"></script>
|
|
|
<script src="../node_modules/@ckeditor/ckeditor5-essentials/build/essentials.js"></script>
|
|
|
<script src="../node_modules/@ckeditor/ckeditor5-basic-styles/build/basic-styles.js"></script>
|
|
|
<script src="../node_modules/@ckeditor/ckeditor5-heading/build/heading.js"></script>
|
|
|
<script src="../node_modules/@ckeditor/ckeditor5-autoformat/build/autoformat.js"></script>
|
|
|
<script src="../node_modules/@ckeditor/ckeditor5-block-quote/build/block-quote.js"></script>
|
|
|
<script src="../node_modules/@ckeditor/ckeditor5-image/build/image.js"></script>
|
|
|
<script src="../node_modules/@ckeditor/ckeditor5-link/build/link.js"></script>
|
|
|
<script src="../node_modules/@ckeditor/ckeditor5-indent/build/indent.js"></script>
|
|
|
<script src="../node_modules/@ckeditor/ckeditor5-media-embed/build/media-embed.js"></script>
|
|
|
<script src="../node_modules/@ckeditor/ckeditor5-list/build/list.js"></script>
|
|
|
<script src="../node_modules/@ckeditor/ckeditor5-table/build/table.js"></script>
|
|
|
|
|
|
<!-- The "@ckeditor/ckeditor5-mermaid" package DLL build is served from the `build/` directory -->
|
|
|
<script src="../build/mermaid.js"></script>
|
|
|
|
|
|
<script>
|
|
|
console.log( 'Objects exported by the DLL build:', CKEditor5[ 'mermaid' ] );
|
|
|
|
|
|
CKEditor5.editorClassic.ClassicEditor
|
|
|
.create( document.querySelector( '#editor' ), {
|
|
|
plugins: [
|
|
|
CKEditor5[ 'mermaid' ].Mermaid,
|
|
|
CKEditor5.essentials.Essentials,
|
|
|
CKEditor5.autoformat.Autoformat,
|
|
|
CKEditor5.blockQuote.BlockQuote,
|
|
|
CKEditor5.basicStyles.Bold,
|
|
|
CKEditor5.heading.Heading,
|
|
|
CKEditor5.image.Image,
|
|
|
CKEditor5.image.ImageCaption,
|
|
|
CKEditor5.image.ImageStyle,
|
|
|
CKEditor5.image.ImageToolbar,
|
|
|
CKEditor5.image.ImageUpload,
|
|
|
CKEditor5.indent.Indent,
|
|
|
CKEditor5.basicStyles.Italic,
|
|
|
CKEditor5.link.Link,
|
|
|
CKEditor5.list.List,
|
|
|
CKEditor5.mediaEmbed.MediaEmbed,
|
|
|
CKEditor5.paragraph.Paragraph,
|
|
|
CKEditor5.table.Table,
|
|
|
CKEditor5.table.TableToolbar,
|
|
|
CKEditor5.codeBlock.CodeBlock,
|
|
|
CKEditor5.basicStyles.Code,
|
|
|
CKEditor5.upload.Base64UploadAdapter
|
|
|
],
|
|
|
toolbar: [
|
|
|
'mermaid',
|
|
|
'|',
|
|
|
'undo',
|
|
|
'redo',
|
|
|
'|',
|
|
|
'heading',
|
|
|
'|',
|
|
|
'bold',
|
|
|
'italic',
|
|
|
'link',
|
|
|
'code',
|
|
|
'bulletedList',
|
|
|
'numberedList',
|
|
|
'|',
|
|
|
'outdent',
|
|
|
'indent',
|
|
|
'|',
|
|
|
'uploadImage',
|
|
|
'blockQuote',
|
|
|
'insertTable',
|
|
|
'mediaEmbed',
|
|
|
'codeBlock'
|
|
|
],
|
|
|
image: {
|
|
|
toolbar: [
|
|
|
'imageStyle:inline',
|
|
|
'imageStyle:block',
|
|
|
'imageStyle:side',
|
|
|
'|',
|
|
|
'imageTextAlternative'
|
|
|
]
|
|
|
},
|
|
|
table: {
|
|
|
contentToolbar: [
|
|
|
'tableColumn',
|
|
|
'tableRow',
|
|
|
'mergeTableCells'
|
|
|
]
|
|
|
}
|
|
|
} )
|
|
|
.then( editor => {
|
|
|
window.editor = editor;
|
|
|
} )
|
|
|
.catch( error => {
|
|
|
console.error( 'There was a problem initializing the editor.', error );
|
|
|
} );
|
|
|
</script>
|
|
|
|
|
|
|
|
|
</body>
|
|
|
</html>
|