|
|
| (Der Versionsvergleich bezieht 4 dazwischenliegende Versionen mit ein.) |
| Zeile 1: |
Zeile 1: |
| - | '''Sample-Implementation'''<br> | + | '''Sample-Implementation: Classic-Version'''<br> |
| - | <br> | + | <html> |
| - | <html><!-- | + | |
| | <style> | | <style> |
| | #container { | | #container { |
| Zeile 22: |
Zeile 21: |
| | ClassicEditor | | ClassicEditor |
| | .create( document.querySelector( '#editor' ) ) | | .create( document.querySelector( '#editor' ) ) |
| - | .catch( error => { | + | .then( newEditor => { editor = newEditor; } ) |
| - | console.error( error );
| + | .catch( error => { console.error( error ); } ); |
| - | } ); | + | function BtnGetDataOnClick(e) { |
| | + | const editorData = editor.getData(); |
| | + | document.getElementById('CKData').innerHTML = editorData; |
| | + | } |
| | </script> | | </script> |
| - | --></html>
| + | <button id="CKGetData" type="button" onclick="BtnGetDataOnClick(this)">GetData</button><br> |
| - | <br>
| + | <div id="CKData">...</div> |
| - | '''Super-Build'''<br>
| + | |
| - | <br>
| + | |
| - | <html>
| + | |
| - | <style>
| + | |
| - | #container {
| + | |
| - | width: 1000px;
| + | |
| - | margin: 20px auto;
| + | |
| - | }
| + | |
| - | .ck-editor__editable[role="textbox"] {
| + | |
| - | /* editing area */
| + | |
| - | min-height: 200px;
| + | |
| - | }
| + | |
| - | .ck-content .image {
| + | |
| - | /* block images */
| + | |
| - | max-width: 80%;
| + | |
| - | margin: 20px auto;
| + | |
| - | }
| + | |
| - | </style>
| + | |
| - | <div id="container">
| + | |
| - | <div id="editor">
| + | |
| - | xyz
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | <!--
| + | |
| - | The "super-build" of CKEditor 5 served via CDN contains a large set of plugins and multiple editor types.
| + | |
| - | See https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-start.html#running-a-full-featured-editor-from-cdn
| + | |
| - | -->
| + | |
| - | <script src="https://cdn.ckeditor.com/ckeditor5/40.0.0/super-build/ckeditor.js"></script>
| + | |
| - | <!--
| + | |
| - | Uncomment to load the Spanish translation
| + | |
| - | <script src="https://cdn.ckeditor.com/ckeditor5/40.0.0/super-build/translations/es.js"></script>
| + | |
| - | -->
| + | |
| - | <script>
| + | |
| - | // This sample still does not showcase all CKEditor 5 features (!)
| + | |
| - | // Visit https://ckeditor.com/docs/ckeditor5/latest/features/index.html to browse all the features.
| + | |
| - | CKEDITOR.ClassicEditor.create(document.getElementById("editor"), {
| + | |
| - | // https://ckeditor.com/docs/ckeditor5/latest/features/toolbar/toolbar.html#extended-toolbar-configuration-format
| + | |
| - | toolbar: {
| + | |
| - | items: [
| + | |
| - | 'exportPDF','exportWord', '|',
| + | |
| - | 'findAndReplace', 'selectAll', '|',
| + | |
| - | 'heading', '|',
| + | |
| - | 'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript', 'removeFormat', '|',
| + | |
| - | 'bulletedList', 'numberedList', 'todoList', '|',
| + | |
| - | 'outdent', 'indent', '|',
| + | |
| - | 'undo', 'redo',
| + | |
| - | '-',
| + | |
| - | 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
| + | |
| - | 'alignment', '|',
| + | |
| - | 'link', 'insertImage', 'blockQuote', 'insertTable', 'mediaEmbed', 'codeBlock', 'htmlEmbed', '|',
| + | |
| - | 'specialCharacters', 'horizontalLine', 'pageBreak', '|',
| + | |
| - | 'textPartLanguage', '|',
| + | |
| - | 'sourceEditing'
| + | |
| - | ],
| + | |
| - | shouldNotGroupWhenFull: true
| + | |
| - | },
| + | |
| - | // Changing the language of the interface requires loading the language file using the <script> tag.
| + | |
| - | // language: 'es',
| + | |
| - | list: {
| + | |
| - | properties: {
| + | |
| - | styles: true,
| + | |
| - | startIndex: true,
| + | |
| - | reversed: true
| + | |
| - | }
| + | |
| - | },
| + | |
| - | // https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#configuration
| + | |
| - | heading: {
| + | |
| - | options: [
| + | |
| - | { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
| + | |
| - | { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
| + | |
| - | { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
| + | |
| - | { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
| + | |
| - | { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
| + | |
| - | { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
| + | |
| - | { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
| + | |
| - | ]
| + | |
| - | },
| + | |
| - | // https://ckeditor.com/docs/ckeditor5/latest/features/editor-placeholder.html#using-the-editor-configuration
| + | |
| - | placeholder: 'Welcome to CKEditor 5!',
| + | |
| - | // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-family-feature
| + | |
| - | fontFamily: {
| + | |
| - | options: [
| + | |
| - | 'default',
| + | |
| - | 'Arial, Helvetica, sans-serif',
| + | |
| - | 'Courier New, Courier, monospace',
| + | |
| - | 'Georgia, serif',
| + | |
| - | 'Lucida Sans Unicode, Lucida Grande, sans-serif',
| + | |
| - | 'Tahoma, Geneva, sans-serif',
| + | |
| - | 'Times New Roman, Times, serif',
| + | |
| - | 'Trebuchet MS, Helvetica, sans-serif',
| + | |
| - | 'Verdana, Geneva, sans-serif'
| + | |
| - | ],
| + | |
| - | supportAllValues: true
| + | |
| - | },
| + | |
| - | // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-size-feature
| + | |
| - | fontSize: {
| + | |
| - | options: [ 10, 12, 14, 'default', 18, 20, 22 ],
| + | |
| - | supportAllValues: true
| + | |
| - | },
| + | |
| - | // Be careful with the setting below. It instructs CKEditor to accept ALL HTML markup.
| + | |
| - | // https://ckeditor.com/docs/ckeditor5/latest/features/general-html-support.html#enabling-all-html-features
| + | |
| - | htmlSupport: {
| + | |
| - | allow: [
| + | |
| - | {
| + | |
| - | name: /.*/,
| + | |
| - | attributes: true,
| + | |
| - | classes: true,
| + | |
| - | styles: true
| + | |
| - | }
| + | |
| - | ]
| + | |
| - | },
| + | |
| - | // Be careful with enabling previews
| + | |
| - | // https://ckeditor.com/docs/ckeditor5/latest/features/html-embed.html#content-previews
| + | |
| - | htmlEmbed: {
| + | |
| - | showPreviews: true
| + | |
| - | },
| + | |
| - | // https://ckeditor.com/docs/ckeditor5/latest/features/link.html#custom-link-attributes-decorators
| + | |
| - | link: {
| + | |
| - | decorators: {
| + | |
| - | addTargetToExternalLinks: true,
| + | |
| - | defaultProtocol: 'https://',
| + | |
| - | toggleDownloadable: {
| + | |
| - | mode: 'manual',
| + | |
| - | label: 'Downloadable',
| + | |
| - | attributes: {
| + | |
| - | download: 'file'
| + | |
| - | }
| + | |
| - | }
| + | |
| - | }
| + | |
| - | },
| + | |
| - | // https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html#configuration
| + | |
| - | mention: {
| + | |
| - | feeds: [
| + | |
| - | {
| + | |
| - | marker: '@',
| + | |
| - | feed: [
| + | |
| - | '@apple', '@bears', '@brownie', '@cake', '@cake', '@candy', '@canes', '@chocolate', '@cookie', '@cotton', '@cream',
| + | |
| - | '@cupcake', '@danish', '@donut', '@dragée', '@fruitcake', '@gingerbread', '@gummi', '@ice', '@jelly-o',
| + | |
| - | '@liquorice', '@macaroon', '@marzipan', '@oat', '@pie', '@plum', '@pudding', '@sesame', '@snaps', '@soufflé',
| + | |
| - | '@sugar', '@sweet', '@topping', '@wafer'
| + | |
| - | ],
| + | |
| - | minimumCharacters: 1
| + | |
| - | }
| + | |
| - | ]
| + | |
| - | },
| + | |
| - | // The "super-build" contains more premium features that require additional configuration, disable them below.
| + | |
| - | // Do not turn them on unless you read the documentation and know how to configure them and setup the editor.
| + | |
| - | removePlugins: [
| + | |
| - | // These two are commercial, but you can try them out without registering to a trial.
| + | |
| - | // 'ExportPdf',
| + | |
| - | // 'ExportWord',
| + | |
| - | 'CKBox',
| + | |
| - | 'CKFinder',
| + | |
| - | 'EasyImage',
| + | |
| - | // This sample uses the Base64UploadAdapter to handle image uploads as it requires no configuration.
| + | |
| - | // https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/base64-upload-adapter.html
| + | |
| - | // Storing images as Base64 is usually a very bad idea.
| + | |
| - | // Replace it on production website with other solutions:
| + | |
| - | // https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/image-upload.html
| + | |
| - | // 'Base64UploadAdapter',
| + | |
| - | 'RealTimeCollaborativeComments',
| + | |
| - | 'RealTimeCollaborativeTrackChanges',
| + | |
| - | 'RealTimeCollaborativeRevisionHistory',
| + | |
| - | 'PresenceList',
| + | |
| - | 'Comments',
| + | |
| - | 'TrackChanges',
| + | |
| - | 'TrackChangesData',
| + | |
| - | 'RevisionHistory',
| + | |
| - | 'Pagination',
| + | |
| - | 'WProofreader',
| + | |
| - | // Careful, with the Mathtype plugin CKEditor will not load when loading this sample
| + | |
| - | // from a local file system (file://) - load this site via HTTP server if you enable MathType.
| + | |
| - | 'MathType',
| + | |
| - | // The following features are part of the Productivity Pack and require additional license.
| + | |
| - | 'SlashCommand',
| + | |
| - | 'Template',
| + | |
| - | 'DocumentOutline',
| + | |
| - | 'FormatPainter',
| + | |
| - | 'TableOfContents',
| + | |
| - | 'PasteFromOfficeEnhanced'
| + | |
| - | ]
| + | |
| - | });
| + | |
| - | </script>
| + | |
| | </html> | | </html> |
...
