Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
typo3
qfq
Commits
b8e22e80
Commit
b8e22e80
authored
Sep 28, 2016
by
Carsten Rose
Browse files
integrated: tinyMCE
Mockup: richtexteditor.html
parents
4a26f6b8
caa6e309
Changes
6
Hide whitespace changes
Inline
Side-by-side
Gruntfile.js
View file @
b8e22e80
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
...
...
bower.json
View file @
b8e22e80
...
...
@@ -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"
}
}
javascript/src/Form.js
View file @
b8e22e80
...
...
@@ -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 @
b8e22e80
/**
* @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 @
b8e22e80
...
...
@@ -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
;
}
};
...
...
mockup/richtexteditor.html
0 → 100644
View file @
b8e22e80
<!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
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment