mirror of
https://github.com/TriliumNext/Notes.git
synced 2025-08-12 11:52:28 +08:00
120 lines
3.4 KiB
HTML
120 lines
3.4 KiB
HTML
<!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>
|