You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by lo...@apache.org on 2021/02/19 08:55:28 UTC
[myfaces-tobago] branch master updated: doc: CKEditor example
This is an automated email from the ASF dual-hosted git repository.
lofwyr pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
The following commit(s) were added to refs/heads/master by this push:
new fc26063 doc: CKEditor example
fc26063 is described below
commit fc26063150315f6d5d76de5a80647e803f2404df
Author: Udo Schnurpfeil <ud...@irian.eu>
AuthorDate: Fri Feb 19 09:30:21 2021 +0100
doc: CKEditor example
---
.../tobago/example/demo/CkeditorController.java | 6 +--
.../src/main/webapp/WEB-INF/tobago-config.xml | 5 ++
.../110-wysiwyg/00-tinymce/TinyMCE.xhtml | 9 +++-
.../110-wysiwyg/01-ckeditor/CKEditor.xhtml | 58 +++++++++++++---------
.../110-wysiwyg/01-ckeditor/demo-ckeditor.js | 55 --------------------
.../110-wysiwyg/01-ckeditor/init-ckeditor.js | 27 ++++++++++
.../20-component/110-wysiwyg/WYSIWYG_Editor.xhtml | 37 +++++---------
7 files changed, 88 insertions(+), 109 deletions(-)
diff --git a/tobago-example/tobago-example-demo/src/main/java/org/apache/myfaces/tobago/example/demo/CkeditorController.java b/tobago-example/tobago-example-demo/src/main/java/org/apache/myfaces/tobago/example/demo/CkeditorController.java
index 62cb131..5358f8d 100644
--- a/tobago-example/tobago-example-demo/src/main/java/org/apache/myfaces/tobago/example/demo/CkeditorController.java
+++ b/tobago-example/tobago-example-demo/src/main/java/org/apache/myfaces/tobago/example/demo/CkeditorController.java
@@ -54,10 +54,6 @@ public class CkeditorController extends SourceFileReader implements Serializable
}
public String getSource() {
- return getSource("demo-ckeditor.js");
- }
-
- public boolean isEditorAvailable() {
- return getSource("ckeditor/ckeditor.js") != null;
+ return getSource("init-ckeditor.js");
}
}
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/WEB-INF/tobago-config.xml b/tobago-example/tobago-example-demo/src/main/webapp/WEB-INF/tobago-config.xml
index a5c43e4..5208695 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/WEB-INF/tobago-config.xml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/WEB-INF/tobago-config.xml
@@ -64,6 +64,11 @@
<!-- needed for the tinymce editor demo -->
<directive name="script-src">https://cdn.tiny.cloud/</directive>
<directive name="style-src">https://cdn.tiny.cloud/</directive>
+
+ <!-- needed for the ckeditor demo -->
+ <!-- XXX this is not enough, CSP may be turned off completely -->
+ <directive name="script-src">https://cdn.ckeditor.com/</directive>
+ <directive name="style-src">https://cdn.ckeditor.com/</directive>
</content-security-policy>
<!-- "disable" is the default -->
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/00-tinymce/TinyMCE.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/00-tinymce/TinyMCE.xhtml
index 7f5b3b8..0cfef63 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/00-tinymce/TinyMCE.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/00-tinymce/TinyMCE.xhtml
@@ -30,7 +30,14 @@
<p>
This demo uses the CDN of TinyMCE as a showcase.
There are other integration possibilities.
- For more information to setup see <tc:link image="fa-edit" link="https://www.tiny.cloud/" label="TinyMCE"/>.
+ For more information to setup see
+ <tc:link image="fa-external-link" link="https://www.tiny.cloud/" label="TinyMCE"/>.
+ </p>
+
+ <p>
+ <tc:badge
+ value="Only working with internet access of the browser, because of the use of a CDN."
+ markup="info"/>
</p>
<p>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/01-ckeditor/CKEditor.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/01-ckeditor/CKEditor.xhtml
index ec2e6ef..c3befab 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/01-ckeditor/CKEditor.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/01-ckeditor/CKEditor.xhtml
@@ -23,27 +23,44 @@
xmlns:tc="http://myfaces.apache.org/tobago/component"
xmlns:ui="http://java.sun.com/jsf/facelets">
- <tc:script
- file="#{request.contextPath}/content/20-component/110-wysiwyg/01-ckeditor/ckeditor/ckeditor.js"/>
- <tc:script file="#{request.contextPath}/content/20-component/110-wysiwyg/01-ckeditor/demo-ckeditor.js"/>
+ <tc:script file="https://cdn.ckeditor.com/ckeditor5/25.0.0/classic/ckeditor.js"/>
+ <tc:script file="#{request.contextPath}/content/20-component/110-wysiwyg/01-ckeditor/init-ckeditor.js"/>
- <!-- todo-->
- <tc:badge value="Todo: This page needs to be refactored, still using jQuery..." markup="warning"/>
+ <tc:section label="Setup">
+ <p>
+ This demo uses the CDN of CKEditor as a showcase.
+ There are other integration possibilities.
+ For more information to setup see
+ <tc:link image="fa-external-link" link="https://ckeditor.com//" label="CKEditor"/>.
+ </p>
- <tc:section label="Installation">
- <p>Download <tc:link link="http://ckeditor.com/" target="_blank" label="CKEditor"/>
- and unpack the ZIP file directly beside this XHTML-file.
- Then restart this application (this is needed, because the resource manager needs to scan the content).</p>
- </tc:section>
+ <p>
+ <tc:badge
+ value="Only working with internet access of the browser, because of the use of a CDN."
+ markup="info"/>
+ </p>
+
+ <p>
+ The setup needs entries in <code>tobago-config.xml</code> for CSP.
+ More infomation about these entries you find also on their webside.
+ </p>
+
+ <p>
+ <tc:badge
+ value="Not working with CSP mode='on'! Can be turned off in tobago-config.xml, or configured correctly."
+ markup="warning"/>
+ </p>
- <tc:section label="Editor">
- <p>This facelet contains two <code class="language-markup"><tc:script/></code> tags,
- one for the CKEditor and the other for the integration in this application.
+ <p>
+ This page contains two <code class="language-markup"><tc:script/></code> tags,
+ one for the CKEditor itself and the other for the initialization in this demo.
The <code class="language-markup"><tc:textarea/></code> contain
- <code class="language-markup"><tc:dataAttribute name="html-editor" value=""/></code>,
- to mark this textarea to be used as rich text editor. The rest does the script: demo-ckeditor.js</p>
+ <code class="language-markup"><tc:dataAttribute name="html-editor" value="ckeditor"/></code>,
+ to mark this textarea to be used as rich text editor. The initialization is done by the
+ <code>init-ckeditor.js</code> script.
+ </p>
- <tc:box id="sourceCodeBox" label="demo-ckeditor.js" collapsed="true" collapsedMode="hidden">
+ <tc:box id="sourceCodeBox" label="init-ckeditor.js" collapsed="true" collapsedMode="hidden">
<f:facet name="bar">
<tc:buttons>
<tc:button label="show" omit="true">
@@ -57,15 +74,8 @@
<demo-highlight language="javascript"><tc:out value="#{ckeditorController.source}"/></demo-highlight>
</tc:box>
- <tc:out markup="strong" rendered="#{not ckeditorController.editorAvailable}"
- value="The CKEditor is not installed! Using the fallback textarea."/>
-
- <tc:out markup="strong" rendered="#{ckeditorController.contentSecurityPolicyMode == 'ON'}"
- value="CSP is ON! CKEditor is not compatible with CSP!"/>
-
<tc:textarea value="#{ckeditorController.text}">
- <tc:style width="400px" height="300px"/>
- <tc:dataAttribute name="html-editor" value=""/>
+ <tc:dataAttribute name="html-editor" value="ckeditor"/>
</tc:textarea>
<tc:button label="Submit"/>
</tc:section>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/01-ckeditor/demo-ckeditor.js b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/01-ckeditor/demo-ckeditor.js
deleted file mode 100644
index 615fca9..0000000
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/01-ckeditor/demo-ckeditor.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/*
- * 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.
- */
-
-/* global initialzing script for CSS */
-CKEDITOR.on("instanceLoaded", function(event) {
- var textarea = jQuery("#" + event.editor.name.replace(/([:.])/g, "\\$1"));
- var editor = textarea.next();
- editor.css("height", textarea.css("height"));
- editor.css("width", textarea.css("width"));
- editor.css("left", textarea.css("left"));
- editor.css("top", textarea.css("top"));
- editor.css("position", textarea.css("position"));
- var child = editor.children(".cke_inner");
- child.css("height", "100%");
- var top = child.children(".cke_top");
- var bottom = child.children(".cke_bottom");
- var content = child.children(".cke_contents");
- content.css("height", child.innerHeight() - top.outerHeight() - bottom.outerHeight());
-});
-
-(function ($) {
-
- $.widget("demo.htmlEditor", {
-
- _create: function () {
-
- var id = this.element.attr("id");
- CKEDITOR.replace(id);
- },
-
- _destroy: function () {
- // tbd: instance.destory()
- }
-
- });
-
-}(jQuery));
-
-Listener.register(function() {
- jQuery("[data-html-editor]").htmlEditor();
-}, Phase.DOCUMENT_READY);
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/01-ckeditor/init-ckeditor.js b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/01-ckeditor/init-ckeditor.js
new file mode 100644
index 0000000..1543c62
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/01-ckeditor/init-ckeditor.js
@@ -0,0 +1,27 @@
+/*
+ * 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 );
+ } );
+});
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/WYSIWYG_Editor.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/WYSIWYG_Editor.xhtml
index bdf9c0a..1f22791 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/WYSIWYG_Editor.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/WYSIWYG_Editor.xhtml
@@ -22,39 +22,21 @@
xmlns:tc="http://myfaces.apache.org/tobago/component"
xmlns:ui="http://java.sun.com/jsf/facelets">
- <tc:section label="A WYSIWYG HTML Editor">
+ <tc:section label="So many alternatives">
<p>
You can embed HTML editor in Tobago easily,
but there is no HTML editor component in Tobago.
The reason is, there a many web-based editors in the web available, with different
- licences, different features (and different bugs).
+ licences, different features (and sometimes different bugs).
</p>
<p>
- So Tobago should not implement it's own HTML editor.
- But Tobago may embed an existing editor. Such an editor needs to comply with these requirements:
- </p>
- <ul>
- <li>License must be compatible with the Apache 2.0 license.</li>
- <li>Should be easy to integrate.</li>
- <li>Should have many features.</li>
- <li>Should have few bugs.</li>
- <li>Must be compatible to CSP (Content Security Policy).</li>
- </ul>
- <p>
- Unfortunately we didn't found the <em>perfect</em> editor.
- </p>
- <p>
- But that doesn't matter. You can choice you favorite editor and integrate it in your application.
+ So Tobago will not implement it's own HTML editor.
+ You can choice you favorite editor and integrate it in your application.
In this application there are two editors embedded as an example.
</p>
<ul>
- <li><tc:link label="TinyMCE" link="https://www.tinymce.com/" target="_blank"/></li>
- Is using LGPL license.
- <li><tc:link label="CKEditor" link="http://ckeditor.com/" target="_blank"/></li>
- Doesn't work with CSP activated.
- There is an issue #8584 in the
- <tc:link link="https://dev.ckeditor.com/ticket/8584" target="_blank" label="issue tracker"/>
- of the project.
+ <li>TinyMCE</li>
+ <li>CKEditor (doesn't work with CSP activated in this demo)</li>
</ul>
</tc:section>
<tc:section label="About Security">
@@ -64,5 +46,12 @@
and submit malicious code.
That must be checked on server side!
</p>
+ <p>
+ There is a
+ <tc:link
+ label="sanitiser"
+ outcome="/content/30-concept/80-security/10-sanitize/Sanitize.xhtml"/>
+ in Tobago to scan HTML.
+ </p>
</tc:section>
</ui:composition>