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 2014/05/22 14:04:00 UTC
svn commit: r1596824 - in
/myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg:
./ 00-tinymce/ 01-ckeditor/
Author: lofwyr
Date: Thu May 22 12:04:00 2014
New Revision: 1596824
URL: http://svn.apache.org/r1596824
Log:
TOBAGO-1396: Integration of an HTML editor (WYSIWYG)
Added:
myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/
myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/00-tinymce/
myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/00-tinymce/tinymce.js
myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/00-tinymce/tinymce.xhtml
myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/01-ckeditor/
myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/01-ckeditor/ckeditor.xhtml
myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/01-ckeditor/demo-ckeditor.js
myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/wysiwyg-editor.xhtml
Added: myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/00-tinymce/tinymce.js
URL: http://svn.apache.org/viewvc/myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/00-tinymce/tinymce.js?rev=1596824&view=auto
==============================================================================
--- myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/00-tinymce/tinymce.js (added)
+++ myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/00-tinymce/tinymce.js Thu May 22 12:04:00 2014
@@ -0,0 +1,67 @@
+/*
+ * 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.
+ */
+
+(function ($) {
+
+ $.widget("demo.htmlEditor", {
+
+ _create: function () {
+
+ if (typeof tinymce == "undefined") {
+ console.error("No TinyMCE installation found!");
+ return;
+ }
+ tinymce.init({
+ selector: Tobago.Utils.escapeClientId(this.element.attr("id")),
+ init_instance_callback: function (editor) {
+ var textarea = jQuery(Tobago.Utils.escapeClientId(editor.id));
+ var editorContainer = jQuery(editor.editorContainer);
+
+ editorContainer.css("height", textarea.css("height"));
+ editorContainer.css("width", textarea.css("width"));
+ editorContainer.css("left", textarea.css("left"));
+ editorContainer.css("top", textarea.css("top"));
+ editorContainer.css("position", textarea.css("position"));
+
+ var text = jQuery(editor.contentAreaContainer);
+
+ // set estimated height
+ text.outerHeight(text.outerHeight - 107);
+
+ // compute the real height a bit later, (didn't found an event to listen, so using setTimeout)
+ setTimeout(function () {
+ var heightDelta = 2; // extra pixel...
+ editorContainer.find(".mce-toolbar, .mce-statusbar").each(function () {
+ heightDelta += jQuery(this).outerHeight();
+ });
+ text.outerHeight(text.outerHeight() - heightDelta);
+ }, 50);
+ }
+ });
+ },
+
+ _destroy: function () {
+ // tbd: instance.destroy()
+ }
+
+ });
+
+}(jQuery));
+
+Tobago.registerListener(function () {
+ jQuery("[data-html-editor]").htmlEditor();
+}, Tobago.Phase.DOCUMENT_READY);
Added: myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/00-tinymce/tinymce.xhtml
URL: http://svn.apache.org/viewvc/myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/00-tinymce/tinymce.xhtml?rev=1596824&view=auto
==============================================================================
--- myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/00-tinymce/tinymce.xhtml (added)
+++ myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/00-tinymce/tinymce.xhtml Thu May 22 12:04:00 2014
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ * 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.
+-->
+
+<ui:composition template="/layout/overview.xhtml"
+ xmlns:tc="http://myfaces.apache.org/tobago/component"
+ xmlns:tx="http://myfaces.apache.org/tobago/extension"
+ xmlns:ui="http://java.sun.com/jsf/facelets"
+ xmlns:f="http://java.sun.com/jsf/core">
+ <ui:param name="title" value="TinyMCE integration"/>
+
+ <tc:script file="content/35-wysiwyg/00-tinymce/tinymce/js/tinymce/tinymce.min.js"/>
+<!--
+ <tc:script file="content/35-wysiwyg/00-tinymce/tinymce/js/tinymce/jquery.tinymce.min.js"/>
+-->
+ <tc:script file="content/35-wysiwyg/00-tinymce/tinymce.js"/>
+
+ <tc:panel>
+ <f:facet name="layout">
+ <tc:gridLayout rows="20px;110px;*;auto"/>
+ </f:facet>
+
+ <tc:out markup="strong" rendered="#{not htmlEditor.tinymceAvailable}"
+ value="The TinyMCE is not installed! Using the fallback textarea."/>
+
+ <tc:panel>
+ <f:facet name="layout">
+ <tc:flowLayout/>
+ </f:facet>
+
+ <h3>
+ Installation:
+ </h3>
+ <p>
+ Download <tc:link link="http://www.tinymce.com/" target="_blank" label="TinyMCE"/> und 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>
+ <p>
+ This Facelet contains 2 tc:script tags, 1 for the TinyMCE and 1 for the integration in this application.
+ The tc:textarea has a tc:dataAttribute with name="html-editor" set, to mark this textarea to be used as
+ ritch text editor. The rest does the script: demo-tinymce.js
+ </p>
+ </tc:panel>
+
+ <tc:textarea value="#{htmlEditor.text}">
+ <tc:dataAttribute name="html-editor" value=""/>
+ </tc:textarea>
+
+ <tc:panel>
+ <f:facet name="layout">
+ <tc:gridLayout columns="*;auto"/>
+ </f:facet>
+ <tc:panel/>
+ <tc:button label="Submit"/>
+ </tc:panel>
+
+ </tc:panel>
+</ui:composition>
Added: myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/01-ckeditor/ckeditor.xhtml
URL: http://svn.apache.org/viewvc/myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/01-ckeditor/ckeditor.xhtml?rev=1596824&view=auto
==============================================================================
--- myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/01-ckeditor/ckeditor.xhtml (added)
+++ myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/01-ckeditor/ckeditor.xhtml Thu May 22 12:04:00 2014
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ * 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.
+-->
+
+<ui:composition template="/layout/overview.xhtml"
+ xmlns:tc="http://myfaces.apache.org/tobago/component"
+ xmlns:tx="http://myfaces.apache.org/tobago/extension"
+ xmlns:ui="http://java.sun.com/jsf/facelets"
+ xmlns:f="http://java.sun.com/jsf/core">
+ <ui:param name="title" value="CKEditor integration"/>
+
+ <tc:script file="content/35-wysiwyg/01-ckeditor/ckeditor/ckeditor.js"/>
+ <tc:script file="content/35-wysiwyg/01-ckeditor/demo-ckeditor.js"/>
+
+ <tc:panel>
+ <f:facet name="layout">
+ <tc:gridLayout rows="20px;20px;110px;*;auto"/>
+ </f:facet>
+
+ <tc:out markup="strong" rendered="#{not htmlEditor.ckeditorAvailable}"
+ value="The CKEditor is not installed! Using the fallback textarea."/>
+
+ <tc:out markup="strong" rendered="#{tobagoContext.tobagoConfig.contentSecurityPolicy.mode == 'ON'}"
+ value="CSP is ON! CKEditor is not compatible with CSP!"/>
+
+ <tc:panel>
+ <f:facet name="layout">
+ <tc:flowLayout/>
+ </f:facet>
+
+ <h3>
+ Installation:
+ </h3>
+ <p>
+ Download <tc:link link="http://ckeditor.com/" target="_blank" label="CKEditor"/> und 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>
+ <p>
+ This Facelet contains 2 tc:script tags, 1 for the CKEditor and 1 for the integration in this application.
+ The tc:textarea has a tc:dataAttribute with name="html-editor" set, to mark this textarea to be used as
+ ritch text editor. The rest does the script: demo-ckeditor.js
+ </p>
+ </tc:panel>
+
+ <tc:textarea value="#{htmlEditor.text}">
+ <tc:dataAttribute name="html-editor" value=""/>
+ </tc:textarea>
+
+ <tc:panel>
+ <f:facet name="layout">
+ <tc:gridLayout columns="*;auto"/>
+ </f:facet>
+ <tc:panel/>
+ <tc:button label="Submit"/>
+ </tc:panel>
+
+ </tc:panel>
+</ui:composition>
Added: myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/01-ckeditor/demo-ckeditor.js
URL: http://svn.apache.org/viewvc/myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/01-ckeditor/demo-ckeditor.js?rev=1596824&view=auto
==============================================================================
--- myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/01-ckeditor/demo-ckeditor.js (added)
+++ myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/01-ckeditor/demo-ckeditor.js Thu May 22 12:04:00 2014
@@ -0,0 +1,55 @@
+/*
+ * 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(Tobago.Utils.escapeClientId(event.editor.name));
+ 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));
+
+Tobago.registerListener(function() {
+ jQuery("[data-html-editor]").htmlEditor();
+}, Tobago.Phase.DOCUMENT_READY);
Added: myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/wysiwyg-editor.xhtml
URL: http://svn.apache.org/viewvc/myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/wysiwyg-editor.xhtml?rev=1596824&view=auto
==============================================================================
--- myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/wysiwyg-editor.xhtml (added)
+++ myfaces/tobago/branches/tobago-3.0.x/tobago-example/tobago-example-demo/src/main/webapp/content/35-wysiwyg/wysiwyg-editor.xhtml Thu May 22 12:04:00 2014
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ * 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.
+-->
+
+<ui:composition template="/layout/overview.xhtml"
+ xmlns:tc="http://myfaces.apache.org/tobago/component"
+ xmlns:tx="http://myfaces.apache.org/tobago/extension"
+ xmlns:ui="http://java.sun.com/jsf/facelets"
+ xmlns:f="http://java.sun.com/jsf/core">
+ <ui:param name="title" value="Editor"/>
+
+
+ <tc:panel>
+ <f:facet name="layout">
+ <tc:flowLayout/>
+ </f:facet>
+
+ <h3>A WYSIWYG HTML editor</h3>
+ <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).
+ </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:
+ <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>
+ 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.
+ In this application there are two editors embedded as an example.
+ <ul>
+ <li><tc:link link="http://www.tinymce.com/" target="_blank" label="TinyMCE"/></li>
+ Is using LGPL license.
+ <li><tc:link link="http://ckeditor.com/" target="_blank" label="CKEditor"/></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.
+ </ul>
+ </p>
+
+ <h3>About security</h3>
+ <p>
+ The application should be protected against invalid or malicious HTML content.
+ If the application uses an HTML editor in the browser, an attacker is able to modify the clean code
+ and submit malicious code.
+ That must be checked on server side!
+ </p>
+
+ <h3>Todos:</h3>
+
+ <p>
+ <ul>
+ <li>todo: view source fragments</li>
+ <li>todo: HTML Filter</li>
+ </ul>
+ </p>
+
+ </tc:panel>
+</ui:composition>