basic CKEditor integration

This commit is contained in:
azivner 2017-12-02 10:37:12 -05:00
parent 0521deb304
commit a85bb649cb
5 changed files with 34 additions and 16 deletions

View File

@ -6,6 +6,7 @@ const noteEditor = (function() {
const protectButton = $("#protect-button"); const protectButton = $("#protect-button");
const unprotectButton = $("#unprotect-button"); const unprotectButton = $("#unprotect-button");
const noteDetailWrapperEl = $("#note-detail-wrapper"); const noteDetailWrapperEl = $("#note-detail-wrapper");
let editor = null;
let currentNote = null; let currentNote = null;
@ -22,6 +23,8 @@ const noteEditor = (function() {
} }
function noteChanged() { function noteChanged() {
console.log("CHANGED!!!");
if (noteChangeDisabled) { if (noteChangeDisabled) {
return; return;
} }
@ -60,7 +63,7 @@ const noteEditor = (function() {
} }
function updateNoteFromInputs(note) { function updateNoteFromInputs(note) {
note.detail.note_text = noteDetailEl.summernote('code'); note.detail.note_text = editor.getData();
const title = noteTitleEl.val(); const title = noteTitleEl.val();
@ -124,9 +127,9 @@ const noteEditor = (function() {
noteTitleEl.val(currentNote.detail.note_title); noteTitleEl.val(currentNote.detail.note_title);
// Clear contents and remove all stored history. This is to prevent undo from going across notes // Clear contents and remove all stored history. This is to prevent undo from going across notes
noteDetailEl.summernote('reset'); //noteDetailEl.summernote('reset');
noteDetailEl.summernote('code', currentNote.detail.note_text); editor.setData(currentNote.detail.note_text);
noteChangeDisabled = false; noteChangeDisabled = false;
@ -148,16 +151,20 @@ const noteEditor = (function() {
noteTree.setNoteTitle(getCurrentNoteId(), title); noteTree.setNoteTitle(getCurrentNoteId(), title);
}); });
noteDetailEl.summernote({ BalloonEditor
airMode: true, .create(document.querySelector('#note-detail'), {
height: 300, })
callbacks: { .then(edit => {
onChange: noteChanged editor = edit;
}
}); editor.document.on('change', () => noteChanged);
})
.catch(error => {
console.error(error);
});
// so that tab jumps from note title (which has tabindex 1) // so that tab jumps from note title (which has tabindex 1)
$(".note-editable").attr("tabindex", 2); noteDetailEl.attr("tabindex", 2);
}); });
setInterval(saveNoteIfChanged, 5000); setInterval(saveNoteIfChanged, 5000);

6
public/libraries/ckeditor/ckeditor.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -22,17 +22,19 @@
align-items: center; align-items: center;
} }
.note-editable { #note-detail {
border: 0 !important;
box-shadow: none !important;
/* This is because with empty content height of editor is 0 and it's impossible to click into it */ /* This is because with empty content height of editor is 0 and it's impossible to click into it */
min-height: 400px; min-height: 400px;
overflow: auto; overflow: auto;
} }
.note-editable.protected { #note-detail.protected {
background-color: #eee; background-color: #eee;
} }
.note-editable p { #note-detail p {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }

View File

@ -291,8 +291,10 @@
<link href="libraries/fancytree/skin-win8/ui.fancytree.css" rel="stylesheet"> <link href="libraries/fancytree/skin-win8/ui.fancytree.css" rel="stylesheet">
<script src="libraries/fancytree/jquery.fancytree-all.js"></script> <script src="libraries/fancytree/jquery.fancytree-all.js"></script>
<link href="libraries/summernote/summernote.css" rel="stylesheet"> <!--<link href="libraries/summernote/summernote.css" rel="stylesheet">-->
<script src="libraries/summernote/summernote.js"></script> <!--<script src="libraries/summernote/summernote.js"></script>-->
<script src="libraries/ckeditor/ckeditor.js"></script>
<script src="libraries/jquery.hotkeys.js"></script> <script src="libraries/jquery.hotkeys.js"></script>
<script src="libraries/jquery.fancytree.hotkeys.js"></script> <script src="libraries/jquery.fancytree.hotkeys.js"></script>