Started working on bootstrap-wysiwyg.

Gruntfile.js

 var path = require('path');
 module.exports = function (grunt) {
+    'use strict';
+
     var typo3_css = 'extension/Resources/Public/Css/';
     var typo3_js = 'extension/Resources/Public/JavaScript/';
     var typo3_fonts = 'extension/Resources/Public/fonts/';
     var js_sources = [
         'javascript/src/Helper/*.js',
         'javascript/src/Element/*.js',
+        'javascript/src/Widgets/*.js',
         'javascript/src/*.js'
     ];
 
@@ -243,6 +246,33 @@ module.exports = function (grunt) {
                         expand: true,
                         dest: typo3_js,
                         flatten: true
+                    },
+                    {
+                        cwd: 'bower_components/bootstrap-wysiwyg/external/google-code-prettify',
+                        src: [
+                            'prettify.js'
+                        ],
+                        expand: true,
+                        dest: typo3_js,
+                        flatten: true
+                    },
+                    {
+                        cwd: 'bower_components/bootstrap-wysiwyg/external/',
+                        src: [
+                            'jquery.hotkeys.js'
+                        ],
+                        expand: true,
+                        dest: typo3_js,
+                        flatten: true
+                    },
+                    {
+                        cwd: 'bower_components/bootstrap-wysiwyg/external/google-code-prettify',
+                        src: [
+                            'prettify.css'
+                        ],
+                        expand: true,
+                        dest: typo3_css,
+                        flatten: true
                     }
                 ]
             },
@@ -256,6 +286,33 @@ module.exports = function (grunt) {
                         expand: true,
                         dest: 'js/',
                         flatten: true
+                    },
+                    {
+                        cwd: 'bower_components/bootstrap-wysiwyg/external/google-code-prettify',
+                        src: [
+                            'prettify.js'
+                        ],
+                        expand: true,
+                        dest: 'js/',
+                        flatten: true
+                    },
+                    {
+                        cwd: 'bower_components/bootstrap-wysiwyg/external/',
+                        src: [
+                            'jquery.hotkeys.js'
+                        ],
+                        expand: true,
+                        dest: 'js/',
+                        flatten: true
+                    },
+                    {
+                        cwd: 'bower_components/bootstrap-wysiwyg/external/google-code-prettify',
+                        src: [
+                            'prettify.css'
+                        ],
+                        expand: true,
+                        dest: 'css/',
+                        flatten: true
                     }
                 ]
             },
@@ -292,9 +349,7 @@ module.exports = function (grunt) {
             }
         },
         jshint: {
-            all: [
-                'javascript/src/*.js'
-            ]
+            all: js_sources
         },
         concat_in_order: {
             debug_standalone: {
@@ -382,12 +437,7 @@ module.exports = function (grunt) {
         },
         watch: {
             scripts: {
-                files: [
-                    'javascript/src/*.js',
-                    'javascript/src/Helper/*.js',
-                    'javascript/src/Element/*.js',
-                    'less/*.less'
-                ],
+                files: js_sources.concat(['less/*.less']),
                 tasks: ['default'],
                 options: {
                     spawn: true

javascript/src/Widgets/RichTextEditor.js

+/**
+ * @author Rafael Ostertag <rafael.ostertag@math.uzh.ch>
+ */
+
+/* global $ */
+
+/**
+ * Qfq Namespace
+ *
+ * @namespace QfqNS
+ */
+var QfqNS = QfqNS || {};
+/**
+ * Qfq Widgets Namespace
+ *
+ * @namespace QfqNS.Widgets
+ */
+QfqNS.Widgets = QfqNS.Widgets || {};
+
+(function (n) {
+    'use strict';
+
+    /**
+     * Initialize all rich text editor widgets on a page.
+     *
+     * @param richTextEditorClassName the class name used to denote rich text editor @code <div>s
+     * @constructor
+     */
+    var RichTextEditor = function (richTextEditorClassName) {
+        this.richtTextEditorJquerySelector =
+            RichTextEditor.makeJquerySelectorFromClassName(richTextEditorClassName || "qfq-richt-text-editor");
+        this.initialize();
+    };
+
+    /**
+     * Given a class name, it returns a JQuery selector for the class.
+     *
+     * @param className the class name
+     * @returns {*}
+     */
+    RichTextEditor.makeJquerySelectorFromClassName = function (className) {
+        if (!className) {
+            return null;
+        }
+
+        if (!className.startsWith(".")) {
+            return "." + className;
+        }
+
+        return className;
+    };
+
+    /**
+     * @private
+     */
+    RichTextEditor.prototype.initialize = function () {
+        this.initializeExternalRichTextEditorWidget();
+    };
+
+    /**
+     * @private
+     */
+    RichTextEditor.prototype.initializeExternalRichTextEditorWidget = function () {
+        $(this.richtTextEditorJquerySelector).wysiwyg();
+    };
+
+    RichTextEditor.prototype.hasEditorContainerId = function ($richTextContainer) {
+        if ($richTextContainer.attr("id")) {
+            return true;
+        } else {
+            return false;
+        }
+
+    };
+
+    //n.RichTextEditor = ;
+})(QfqNS.Widgets);
+

mockup/richtexteditor.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+    <link rel="stylesheet" href="../css/bootstrap.min.css">
+    <link rel="stylesheet" href="../css/bootstrap-theme.min.css">
+    <link rel="stylesheet" href="../css/prettify.css">
+    <link rel="stylesheet" href="../css/qfq-bs.css">
+    <title>Rich Text Editor Mock</title>
+
+
+</head>
+<body>
+<div class="container-fluid">
+    <div class="row hidden-xs">
+        <div class="col-md-12">
+            <h1>Title with a long text</h1>
+        </div>
+    </div>
+
+
+    <form id="myForm" class="form-horizontal">
+
+        <div class="form-group">
+            <div class="col-md-2">
+                <label for="text" class="control-label">Rich Text Editor</label>
+            </div>
+
+            <div class="col-md-6">
+                <div id="text" class="qfq-rich-text-editor"
+                     style="overflow: scroll; max-height:300px; width: 300px; height: 300px;">Input
+                </div>
+            </div>
+
+        </div>
+
+    </form>
+</div>
+
+<script src="../js/jquery.min.js"></script>
+<script src="../js/bootstrap.min.js"></script>
+<script src="../js/EventEmitter.min.js"></script>
+<script src="../js/prettify.js"></script>
+<!-- Required by wysiwyg editor -->
+<script src="../js/jquery.hotkeys.js"></script>
+<script src="../js/bootstrap-wysiwyg.js"></script>
+<script src="../js/qfq.debug.js"></script>
+<script type="text/javascript">
+    $(function () {
+        $(".qfq-rich-text-editor").wysiwyg();
+    });
+</script>
+</body>
+</html>
\ No newline at end of file