mirror of
https://github.com/TriliumNext/Notes.git
synced 2025-07-27 10:02:59 +08:00
78544e5c99
git-subtree-dir: _regroup/ckeditor5-math git-subtree-mainline: 034cd58833a2c9c7ba49f6217dc5aeff274e0174 git-subtree-split: 6231df7f0e9df7f4d6982b103c02400d4f0b8937
155 lines
6.1 KiB
HTML
155 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<link rel="icon" type="image/png" href="https://ckeditor.com/docs/ckeditor5/latest/assets/img/favicons/32x32.png" sizes="32x32">
|
||
<meta charset="utf-8">
|
||
<title>CKEditor 5 with ckeditor5-math – DLL Sample</title>
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://cdn.jsdelivr.net/npm/katex@0.13.5/dist/katex.min.css"
|
||
integrity="sha384-L+Gq2Cso/Y2x8fX4wausgiZT8z0QPZz7OqPuz4YqAycQJyrJT9NRLpjFBD6zlOia"
|
||
crossorigin="anonymous"
|
||
/>
|
||
<script
|
||
src="https://cdn.jsdelivr.net/npm/katex@0.13.5/dist/katex.min.js"
|
||
integrity="sha384-z64WtjpyrKFsxox9eI4SI8eM9toXdoYeWb5Qh+8PO+eG54Bv9BZqf9xNhlcLf/sA"
|
||
crossorigin="anonymous"
|
||
></script>
|
||
<script
|
||
src="https://cdn.jsdelivr.net/npm/katex@0.13.5/dist/contrib/auto-render.min.js"
|
||
integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl"
|
||
crossorigin="anonymous"
|
||
onload="renderMathInElement(document.body, {'macros': {'\\test': '\\mathrel{\\char`≠}'}});"
|
||
></script>
|
||
<style>body { max-width: 800px; margin: 20px auto; }</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>CKEditor 5 with ckeditor5-math – DLL Sample</h1>
|
||
|
||
<div id="editor">
|
||
<h2>Production sample</h2>
|
||
<p>
|
||
This is a demo of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor">classic editor build</a> that loads the <code>Math</code> and <code>AutoformatMath</code> plugin.
|
||
</p>
|
||
<p>
|
||
<code>Math</code> inserts mathematical formulas into the editor. You can click the CKEditor 5 Math icon in the toolbar and see the results.
|
||
</p>
|
||
<p><script type="math/tex">e=mc^2</script></p>
|
||
<p><script type="math/tex; mode=display">e=mc^2</script></p>
|
||
<p>
|
||
This should show "\test" as ≠ via katexRenderOptions.macros:
|
||
<script type="math/tex">\test</script>
|
||
</p>
|
||
<!-- Quill Style Tag -->
|
||
<p><span class="ql-formula" data-value="e=mc^2"></span></p>
|
||
</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 "ckeditor5-math" package DLL build is served from the `build/` directory -->
|
||
<script src="../build/math.js"></script>
|
||
|
||
<script>
|
||
console.log( 'Objects exported by the DLL build:', CKEditor5.math );
|
||
|
||
CKEditor5.editorClassic.ClassicEditor
|
||
.create( document.querySelector( '#editor' ), {
|
||
math: {
|
||
engine: 'katex',
|
||
katexRenderOptions: {
|
||
macros: {
|
||
'\\test': '\\mathrel{\\char`≠}'
|
||
}
|
||
}
|
||
},
|
||
plugins: [
|
||
CKEditor5.math.Math,
|
||
CKEditor5.math.AutoformatMath,
|
||
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: [
|
||
'math',
|
||
'|',
|
||
'heading',
|
||
'|',
|
||
'bold',
|
||
'italic',
|
||
'link',
|
||
'code',
|
||
'bulletedList',
|
||
'numberedList',
|
||
'|',
|
||
'outdent',
|
||
'indent',
|
||
'|',
|
||
'uploadImage',
|
||
'blockQuote',
|
||
'insertTable',
|
||
'mediaEmbed',
|
||
'codeBlock',
|
||
'|',
|
||
'undo',
|
||
'redo'
|
||
],
|
||
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>
|