From 305573a68785ff329bc0f3c9b28ba738bcb58e46 Mon Sep 17 00:00:00 2001
From: ulrich <undisclosed>
Date: Mon, 27 Feb 2017 06:47:42 +0000
Subject: [PATCH] Einbau TinyMCE in Arbeit
---
web/ui/index.html | 11 ++-
web/ui/stile.css | 10 +++
web/ui/tpl-bcr3.txt | 4 +
web/ui/mce.css | 20 ++++++
web/ui/ui.js | 125 +++++++++++++++++++++++++++++++++++++++--
5 files changed, 159 insertions(+), 11 deletions(-)
diff --git a/web/ui/index.html b/web/ui/index.html
index d74367b..e8960be 100644
--- a/web/ui/index.html
+++ b/web/ui/index.html
@@ -25,7 +25,7 @@
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Datei</a>
<div class="dropdown-menu">
<a id="newTextFile" class="dropdown-item" href="#">Neuer Text..</a>
- <a class="dropdown-item disabled" href="#">Neues Dokument..</a>
+ <a id="newDoc" class="dropdown-item" href="#">Neues Dokument..</a>
<a id="newFolder" class="dropdown-item" href="#">Neuer Ordner..</a>
<div class="dropdown-divider"></div>
<a id="editTextFile" class="dropdown-item" href="#">Öffnen als Text</a>
@@ -93,8 +93,13 @@
</div>
</div>
<!-- Codemirror Ende -->
+ <!-- TinyMCE Start -->
+ <div id="mce-editor">
+ <textarea class="text-editor" id="text-editspace"></textarea>
+ </div>
+ <!-- TinyMCE Ende -->
<!-- Breadcrumb Start -->
- <div class="zentrum-bc pl-3 pr-3">
+ <div id="zentrum_bc" class="zentrum-bc pl-3 pr-3">
<nav class="breadcrumb" id="bcnav"></nav>
</div>
<!-- Breadcrumb Ende -->
@@ -163,7 +168,7 @@
<script src="/jslib/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script src="/jslib/codemirror/addon/display/fullscreen.js"></script>
-
+ <script src="/jslib/tinymce/tinymce.min.js"></script>
<script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
<script src="/jslib/mustache/mustache.min.js"></script>
<script src="ui.js"></script>
diff --git a/web/ui/mce.css b/web/ui/mce.css
new file mode 100644
index 0000000..f6bb673
--- /dev/null
+++ b/web/ui/mce.css
@@ -0,0 +1,20 @@
+/*
+ Dateiverwaltung - File management in your browser
+ Copyright (C) 2017 Ulrich Hilger, http://uhilger.de
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as
+ published by the Free Software Foundation, either version 3 of the
+ License, or (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with this program. If not, see <http://www.gnu.org/licenses/>.
+*/
+
+
+body {font-size: 12pt;}
\ No newline at end of file
diff --git a/web/ui/stile.css b/web/ui/stile.css
index dfae8bb..8f704e5 100644
--- a/web/ui/stile.css
+++ b/web/ui/stile.css
@@ -37,6 +37,16 @@
height: 100%;
}
+/* Stile MCE-Editor */
+
+.mce-editor {
+ width: 100%;
+ height: 100%;
+}
+.text-editor {
+ width: 100%;
+ height: 100%;
+}
/* Stile Listenansicht */
diff --git a/web/ui/tpl-bcr3.txt b/web/ui/tpl-bcr3.txt
new file mode 100644
index 0000000..edd8f44
--- /dev/null
+++ b/web/ui/tpl-bcr3.txt
@@ -0,0 +1,4 @@
+<div id="ansicht" class="pull-right align-middle">
+ <i class="fa fa-th-list"></i>
+</div>
+
diff --git a/web/ui/ui.js b/web/ui/ui.js
index e20c80b..db82e7a 100644
--- a/web/ui/ui.js
+++ b/web/ui/ui.js
@@ -20,12 +20,16 @@
var pfad = '';
var modus = 'kacheln';
var openFileName = '';
+var ed;
+var t;
function fm_init() {
+ $("#mce-editor").hide();
$('.codeeditor-space').hide();
$('.code-editor-container').hide();
//$('.ost').attr('flex-basis', 0);
$('#newTextFile').on('click', fm_menu_neue_textdatei);
+ $('#newDoc').on('click', fm_menu_neues_dokument);
$('#newFolder').on('click', fm_get_new_folder);
$('#editTextFile').on('click', fm_get_file_content);
$('#saveFile').on('click', fm_menu_datei_speichern);
@@ -40,6 +44,82 @@
fm_get_login();
fm_get_list('');
fm_init_uploader();
+
+ /*
+ * Konfiguration TinyMCE
+ */
+ tinymce.init({
+ content_css : "mce.css",
+ selector: "textarea",
+ statusbar: false,
+ menubar: false,
+ plugins: 'autoresize advlist charmap code image link lists media print preview save table textcolor',
+ toolbar: 'undo redo | styleselect | outdent indent',
+ /*
+ menu: {
+ file: {title: 'File', items: 'savevers | exit'},
+ edit: {title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall'},
+ view: {title: 'View', items: 'visualaid | code | link image media | template hr'},
+ },
+ */
+ resize: true,
+ width: "100%",
+ height: '100%',
+ autoresize_bottom_margin : 1,
+ setup: function (editor) {
+ ed = editor;
+ //self.ed = editor;
+ /*
+ editor.addMenuItem('fileinfo', {
+ text: 'Toggle file info',
+ onclick: function () {
+ editor.insertContent('Toggle file info');
+ toggleFileInfo();
+ }
+ });
+ editor.addMenuItem('savevers', {
+ text: 'Speichern',
+ onclick: function () {
+ self.notizSpeichern();
+ }
+ });
+ editor.addMenuItem('exit', {
+ text: 'Exit',
+ onclick: function () {
+ self.editorBeenden();
+ }
+ });
+ */
+ }
+ });
+}
+
+function resizeEditor(myHeight) {
+ window.console.log('resizeEditor');
+ var myEditor = ed;
+ if (myEditor) {
+ try {
+ /*
+ if (!myHeight) {
+ var targetHeight = window.innerHeight; // Change this to the height of your wrapper element
+ var mce_bars_height = 0;
+ $('.mce-toolbar, .mce-statusbar, .mce-menubar').each(function () {
+ mce_bars_height += $(this).height();
+ });
+ window.console.log('mce bars height total: ' + mce_bars_height);
+ myHeight = targetHeight - mce_bars_height - 8; // the extra 8 is for margin added between the toolbars
+ }
+ */
+ var myHeight = $('.zentrum').height() - $('.nord').height();
+ window.console.log('resizeEditor: ', myHeight);
+ myEditor.theme.resizeTo('100%', myHeight); // sets the dimensions of the editable area
+ } catch (err) {
+ }
+ }
+}
+
+window.onresize = function() {
+ resizeEditor();
}
/* ----- Uploader Anfang ----------*/
@@ -142,14 +222,29 @@
fm_text_edit('Neue Datei');
}
+function fm_menu_neues_dokument() {
+ fm_filectls_hide();
+ $("#mce-editor").show();
+ resizeEditor();
+ /*
+ var ht = $(window).innerHeight() - 20;
+ window.clearTimeout(t);
+ t = window.setTimeout(function () {
+ $('.mce-editor').height(ht - 100);
+ }, 200);
+ */
+}
+
function fm_menu_datei_schliessen() {
$('.codeeditor-space').hide();
$('.code-editor-container').hide();
- cm.toTextArea();
- $('#bcnav').show();
- $('#dateien').show();
+ $("#mce-editor").hide();
+ if(cm !== undefined) {
+ cm.toTextArea();
+ }
openFileName = '';
fm_get_list(pfad);
+ fm_filectls_show();
}
function fm_dateiwahl(ev) {
@@ -221,13 +316,21 @@
}
function fm_text_edit(content) {
- $('#bcnav').hide();
- $('#dateien').hide();
+ fm_filectls_hide();
$('.codeeditor-space').show();
$('.code-editor-container').show();
fm_code_edit(content);
}
+function fm_filectls_hide() {
+ $('#zentrum_bc').hide();
+ $('#dateien').hide();
+}
+
+function fm_filectls_show() {
+ $('#zentrum_bc').show();
+ $('#dateien').show();
+}
/* ----- API Calls ------------- */
function fm_get_login() {
@@ -371,7 +474,7 @@
dirList.push(new BcrFile(rp + '/' + dirs[dirs.length-1], dirs[dirs.length-1]));
$.get('tpl-bcr2.txt', function(template) {
$('#bcnav').append(Mustache.render(template, dirList[dirList.length-1]));
- $('#bcnav').append($('#tpl-bcr3').html());
+ fm_bcr_3();
fm_bcr_end();
});
//template = $('#tpl-bcr2').html();
@@ -380,7 +483,7 @@
} else {
$.get('tpl-bcr2.txt', function(template) {
$('#bcnav').append(Mustache.render(template, dirList[0]));
- $('#bcnav').append($('#tpl-bcr3').html());
+ fm_bcr_3();
fm_bcr_end();
});
//template = $('#tpl-bcr2').html();
@@ -418,7 +521,7 @@
pfad = '';
$.get('tpl-bcr2.txt', function(template) {
$('#bcnav').append(Mustache.render(template, dirList[0]));
- $('#bcnav').append($('#tpl-bcr3').html());
+ fm_bcr_3();
fm_bcr_end();
});
//template = $('#tpl-bcr2').html();
@@ -457,6 +560,12 @@
}
*/
+function fm_bcr_3() {
+ $.get('tpl-bcr3.txt', function(template) {
+ $('#bcnav').append(template);
+ });
+}
+
function fm_bcr_end() {
$('.breadcrumb-item').click(fm_bc_click);
$('#ansicht').click(fm_ansicht_umschalten);
--
Gitblit v1.9.3