Skip to content
GitLab
Commit caa6e309 authored by Rafael Ostertag's avatar Rafael Ostertag
Browse files

Integrated tinyMCE.

parent de03fff7
Hide whitespace changes
Inline Side-by-side
Gruntfile.js
View file @ caa6e309
......@@ -8,7 +8,6 @@ module.exports = function (grunt) {
var js_sources = [
'javascript/src/Helper/*.js',
'javascript/src/Element/*.js',
'javascript/src/Widgets/*.js',
'javascript/src/*.js'
];
......@@ -236,83 +235,69 @@ module.exports = function (grunt) {
}
]
},
bootstrap_wysiwyg: {
tinymce: {
files: [
{
cwd: 'bower_components/bootstrap-wysiwyg/',
cwd: 'bower_components/tinymce/',
src: [
'bootstrap-wysiwyg.js'
'tinymce.min.js'
],
expand: true,
dest: typo3_js,
flatten: true
},
{
cwd: 'bower_components/bootstrap-wysiwyg/external/google-code-prettify',
cwd: 'bower_components/tinymce/',
src: [
'prettify.js'
'themes/*/theme.min.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
// Tiny MCE expects the theme js files in ./themes.
flatten: false
},
{
cwd: 'bower_components/bootstrap-wysiwyg/external/google-code-prettify',
cwd: 'bower_components/tinymce/',
src: [
'prettify.css'
'skins/**'
],
dest: typo3_js,
expand: true,
dest: typo3_css,
flatten: true
// Tiny MCE expects the theme js files in ./themes.
flatten: false
}
]
},
bootstrap_wysiwyg_devel: {
tinymce_devel: {
files: [
{
cwd: 'bower_components/bootstrap-wysiwyg/',
cwd: 'bower_components/tinymce/',
src: [
'bootstrap-wysiwyg.js'
'tinymce.min.js'
],
expand: true,
dest: 'js/',
flatten: true
},
{
cwd: 'bower_components/bootstrap-wysiwyg/external/google-code-prettify',
cwd: 'bower_components/tinymce/',
src: [
'prettify.js'
'themes/*/theme.min.js'
],
expand: true,
dest: 'js/',
flatten: true
},
{
cwd: 'bower_components/bootstrap-wysiwyg/external/',
src: [
'jquery.hotkeys.js'
],
expand: true,
dest: 'js/',
flatten: true
// Tiny MCE expects the theme js files in ./themes.
flatten: false
},
{
cwd: 'bower_components/bootstrap-wysiwyg/external/google-code-prettify',
cwd: 'bower_components/tinymce/',
src: [
'prettify.css'
'skins/**'
],
dest: 'js/',
expand: true,
dest: 'css/',
flatten: true
// Tiny MCE expects the theme js files in ./themes.
flatten: false
}
]
},
......
bower.json
View file @ caa6e309
......@@ -23,6 +23,6 @@
"eventEmitter": "^4.3.0",
"bootstrap-validator": "^0.10.2",
"Chart.js": "^2.1.2",
"bootstrap-wysiwyg": "*"
"tinymce": "tinymce-dist#^4.4.3"
}
}
javascript/src/Form.js
View file @ caa6e309
......@@ -71,6 +71,7 @@ var QfqNS = QfqNS || {};
};
n.Form.prototype.submitTo = function (to) {
this.eventEmitter.emitEvent('form.submit.before', n.EventEmitter.makePayload(this, null));
$.post(to, this.$form.serialize())
.done(this.ajaxSuccessHandler.bind(this))
.fail(this.submitFailureHandler.bind(this));
......
javascript/src/Helper/tinyMCE.js 0 → 100644
View file @ caa6e309
/**
* @author Rafael Ostertag <rafael.ostertag@math.uzh.ch>
*/
/* global console */
/* global tinymce */
/* global $ */
/**
* Qfq Namespace
*
* @namespace QfqNS
*/
var QfqNS = QfqNS || {};
/**
* Qfq Helper Namespace
*
* @namespace QfqNS.Helper
*/
QfqNS.Helper = QfqNS.Helper || {};
(function (n) {
'use strict';
/**
* @function
* @name QfqNS.Helper.jqxEditor
*/
var tinyMce = function () {
if (!tinymce) {
return;
}
tinymce.init({
selector: ".qfq-tinymce",
setup: function (editor) {
editor.on('Change', function (e) {
console.log('Editor was changed');
var eventTarget = e.target;
var $parentForm = $(eventTarget.formElement);
$parentForm.trigger("change");
});
}
});
};
tinyMce.prepareSave = function () {
if (!tinymce) {
return;
}
tinymce.triggerSave();
};
n.tinyMce = tinyMce;
})(QfqNS.Helper);
\ No newline at end of file
javascript/src/QfqForm.js
View file @ caa6e309
......@@ -86,7 +86,10 @@ var QfqNS = QfqNS || {};
n.Helper.jqxDateTimeInput();
// Initialize jqxComboBox elements.
n.Helper.jqxComboBox();
n.Helper.jqxEditor();
// Deprecated
//n.Helper.jqxEditor();
n.Helper.tinyMce();
this.form.on('form.submit.before', n.Helper.tinyMce.prepareSave);
};
n.QfqForm.prototype.on = n.EventEmitter.onMixin;
......@@ -464,7 +467,7 @@ var QfqNS = QfqNS || {};
if (data.redirect === "url" || data['redirect-url']) {
window.location = data['redirect-url'];
return;
}
};
......
javascript/src/Widgets/RichTextEditor.js deleted 100644 → 0
View file @ de03fff7
/**
* @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
View file @ caa6e309
......@@ -7,7 +7,6 @@
<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>
......@@ -15,6 +14,27 @@
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 ">
<div class="btn-toolbar pull-right" role="toolbar">
<div class="btn-group" role="group">
<button id="save-button" type="button" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-ok"></span></button>
<button id="close-button" type="button" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-remove"></span></button>
</div>
<div class="btn-group" role="group">
<button id="delete-button" type="button" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-trash"></span></button>
</div>
<div class="btn-group" role="group">
<a id="form-new-button" href="personmock.html?s=badcaffe1" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-plus"></span></a>
</div>
</div>
</div>
</div>
<div class="row hidden-xs">
<div class="col-md-12">
<h1>Title with a long text</h1>
......@@ -22,7 +42,18 @@
</div>
<form id="myForm" class="form-horizontal">
<form id="myForm" class="form-horizontal" action="richtexteditor.html" method="post">
<div class="form-group">
<div class="col-md-2">
<label for="name" class="control-label">Name</label>
</div>
<div class="col-md-6">
<input id="name" name="name" type="text" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-2">
......@@ -30,27 +61,32 @@
</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>
<textarea id="text" class="qfq-tinymce" name="rte">Input
</textarea>
</div>
</div>
<button type="submit">Do</button>
</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 src="../js/tinymce.min.js"></script>
<script type="text/javascript">
$(function () {
$(".qfq-rich-text-editor").wysiwyg();
var qfqPage = new QfqNS.QfqPage({
tabsId: 'myTabs',
formId: 'myForm',
submitTo: 'richtexteditor.html',
deleteUrl: 'api/' + $("#deleteUrl").val(),
fileUploadTo: 'api/' + $("#uploadTo").val(),
fileDeleteUrl: 'api/' + $("#fileDeleteUrl").val(),
});
});
</script>
</body>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment