Test CKEditor
Aus BogenWiki
(Unterschied zwischen Versionen)
Nugman (Diskussion | Beiträge) |
Nugman (Diskussion | Beiträge) |
||
| (Der Versionsvergleich bezieht 10 dazwischenliegende Versionen mit ein.) | |||
| Zeile 1: | Zeile 1: | ||
| + | '''Sample-Implementation: Classic-Version'''<br> | ||
<html> | <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="editor"></div> | ||
<script src="https://cdn.ckeditor.com/ckeditor5/40.0.0/classic/ckeditor.js"></script> | <script src="https://cdn.ckeditor.com/ckeditor5/40.0.0/classic/ckeditor.js"></script> | ||
<script> | <script> | ||
ClassicEditor | ClassicEditor | ||
.create( document.querySelector( '#editor' ) ) | .create( document.querySelector( '#editor' ) ) | ||
| - | .catch( error => { | + | .then( newEditor => { editor = newEditor; } ) |
| - | + | .catch( error => { console.error( error ); } ); | |
| - | + | function BtnGetDataOnClick(e) { | |
| + | const editorData = editor.getData(); | ||
| + | document.getElementById('CKData').innerHTML = editorData; | ||
| + | } | ||
</script> | </script> | ||
| + | <button id="CKGetData" type="button" onclick="BtnGetDataOnClick(this)">GetData</button><br> | ||
| + | <div id="CKData">...</div> | ||
</html> | </html> | ||
Aktuelle Version vom 16:40, 28. Okt. 2023
Sample-Implementation: Classic-Version
...
