This demo uses the CDN of CKEditor as a showcase.
There are other integration possibilities.
For more information to setup see
CKEditor.
Only working with internet access of the browser, because of the use of a CDN.
The setup needs entries in
tobago-config.xml for CSP.
The simple way would be, to turn it of with
<content-security-policy mode="on">,
but this is not recommended for security reasons.
More information about these entries you find also on their website.
Not working with CSP mode='on'! Can be turned off or configured in tobago-config.xml.
This page contains two
<tc:script/> tags,
one for the CKEditor itself and the other for the initialization in this demo.
The
<tc:textarea/> contain
<tc:dataAttribute name="html-editor" value="ckeditor"/>,
to mark this textarea to be used as rich text editor. The initialization is done by the
init-ckeditor.js script.
document.addEventListener("DOMContentLoaded", (event) => {
ClassicEditor.create( document.querySelector( "textarea[data-html-editor=ckeditor]" ) )
.then( editor => {
console.log( editor );
} )
.catch( error => {
console.error( error );
} );
});