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.
More infomation about these entries you find also on their webside.
Not working with CSP mode='on'! Can be turned off in tobago-config.xml, or configured correctly.
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.
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
document.addEventListener("DOMContentLoaded", (event) => {
ClassicEditor.create( document.querySelector( "textarea[data-html-editor=ckeditor]" ) )
.then( editor => {
console.log( editor );
} )
.catch( error => {
console.error( error );
} );
});