Commit b8e22e80 authored by Carsten  Rose's avatar Carsten Rose
Browse files

integrated: tinyMCE

 Mockup: richtexteditor.html
parents 4a26f6b8 caa6e309
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/';
......@@ -233,6 +235,72 @@ module.exports = function (grunt) {
}
]
},
tinymce: {
files: [
{
cwd: 'bower_components/tinymce/',
src: [
'tinymce.min.js'
],
expand: true,
dest: typo3_js,
flatten: true
},
{
cwd: 'bower_components/tinymce/',
src: [
'themes/*/theme.min.js'
],
dest: typo3_js,
expand: true,
// Tiny MCE expects the theme js files in ./themes.
flatten: false
},
{
cwd: 'bower_components/tinymce/',
src: [
'skins/**'
],
dest: typo3_js,
expand: true,
// Tiny MCE expects the theme js files in ./themes.
flatten: false
}
]
},
tinymce_devel: {
files: [
{
cwd: 'bower_components/tinymce/',
src: [
'tinymce.min.js'
],
expand: true,
dest: 'js/',
flatten: true
},
{
cwd: 'bower_components/tinymce/',
src: [
'themes/*/theme.min.js'
],
dest: 'js/',
expand: true,
// Tiny MCE expects the theme js files in ./themes.
flatten: false
},
{
cwd: 'bower_components/tinymce/',
src: [
'skins/**'
],
dest: 'js/',
expand: true,
// Tiny MCE expects the theme js files in ./themes.
flatten: false
}
]
},
eventEmitter: {
files: [
{
......@@ -266,9 +334,7 @@ module.exports = function (grunt) {
}
},
jshint: {
all: [
'javascript/src/*.js'
]
all: js_sources
},
concat_in_order: {
debug_standalone: {
......@@ -356,12 +422,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
......
......@@ -21,6 +21,8 @@
"jqwidgets": "4.2.1",
"tablesorter": "jquery.tablesorter#^2.25.6",
"eventEmitter": "^4.3.0",
"Chart.js": "^2.1.2"
"bootstrap-validator": "^0.10.2",
"Chart.js": "^2.1.2",
"tinymce": "tinymce-dist#^4.4.3"
}
}
......@@ -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));
......
/**
* @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
......@@ -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;
}
};
......
<!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/qfq-bs.css">
<title>Rich Text Editor Mock</title>
</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>
</div>
</div>
<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">
<label for="text" class="control-label">Rich Text Editor</label>
</div>
<div class="col-md-6">
<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/qfq.debug.js"></script>
<script src="../js/tinymce.min.js"></script>
<script type="text/javascript">
$(function () {
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>
</html>
\ No newline at end of file
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