Tobago Demo

Menu

CKEditor

Setup

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.

init-ckeditor.js

/*
 * 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 );
      } );
});
© 2005-2025 Apache Software Foundation, Licensed under the Apache License, Version 2.0.