120 lines
3.2 KiB
JavaScript
120 lines
3.2 KiB
JavaScript
var editor = document.querySelector("#editor");
|
|
|
|
var toolBar = null;
|
|
var contents = null;
|
|
var pageContent = null;
|
|
var saveButton = null;
|
|
var editorUI = null;
|
|
|
|
|
|
isReadOnly = function() {
|
|
if (editor) {
|
|
return editor.className == 'read-only';
|
|
}
|
|
return undefined;
|
|
}
|
|
|
|
setReadOnly = function() {
|
|
pageContent.innerHTML = editorUI.getHTML();
|
|
editorUI.changeMode('wysiwig');
|
|
editorUI.blur();
|
|
editor.classList.add('read-only');
|
|
pageContent.contentEditable = false;
|
|
}
|
|
|
|
setEditable = function() {
|
|
editor.classList.remove('read-only');
|
|
pageContent.contentEditable = true;
|
|
editorUI.moveCursorToStart();
|
|
editorUI.focus();
|
|
}
|
|
|
|
makeMarkdownButton = function() {
|
|
|
|
button = document.createElement('button');
|
|
button.classList.add("toastui-editor-toolbar-icons");
|
|
button.classList.add("last");
|
|
button.ariaLabel = "Toggle Markdown";
|
|
button.style.backgroundImage = 'none';
|
|
button.innerHTML = 'MD';
|
|
button.style.margin = '0';
|
|
button.addEventListener('click', () => {
|
|
if (editorUI.isMarkdownMode()) {
|
|
editorUI.changeMode("wysiwig");
|
|
} else {
|
|
editorUI.changeMode("markdown");
|
|
}
|
|
});
|
|
return button;
|
|
};
|
|
|
|
makeSaveButton = function() {
|
|
const button = document.createElement('button');
|
|
button.className = 'actions';
|
|
button.innerHTML = 'save';
|
|
button.id = 'saveButton';
|
|
button.addEventListener('click', () => {
|
|
});
|
|
saveButton = button;
|
|
return button;
|
|
};
|
|
|
|
toggleButton = function() {
|
|
const button = document.createElement('button');
|
|
button.className = 'actions';
|
|
button.id = 'toggleButton';
|
|
button.innerHTML = 'edit';
|
|
button.addEventListener('click', () => {
|
|
if (isReadOnly()) {
|
|
setEditable();
|
|
} else {
|
|
setReadOnly();
|
|
}
|
|
});
|
|
return button;
|
|
}
|
|
|
|
handleContentChange = function() {
|
|
}
|
|
|
|
initialize = function() {
|
|
return new toastui.Editor({
|
|
el: editor,
|
|
initialEditType: 'wysiwyg',
|
|
initialValue: "",
|
|
hideModeSwitch : true,
|
|
previewStyle: 'vertical',
|
|
usageStatistics: false,
|
|
autofocus: false,
|
|
toolbarItems: [
|
|
['heading', 'bold', 'italic' ],
|
|
['ul', 'ol', 'indent', 'outdent'],
|
|
['table', 'image', 'link'],
|
|
[
|
|
{ el: makeMarkdownButton(), tooltip: 'Toggle MD' },
|
|
],
|
|
[
|
|
{ el: makeSaveButton(), command: 'save', tooltip: 'Save Changes' },
|
|
{ el: toggleButton(), tooltip: 'Toggle Edit Mode' }
|
|
],
|
|
],
|
|
events: {
|
|
'loadUI': function(e) {
|
|
editorUI = e;
|
|
pageContent = document.querySelector(".toastui-editor-ww-container > div > div");
|
|
toolBar = document.querySelector('.toastui-editor-toolbar');
|
|
|
|
e.setMarkdown(document.getElementById("data_form__body").value);
|
|
setReadOnly();
|
|
|
|
},
|
|
'changeMode': function() {
|
|
if (editor && Array(editor.classList).includes('read-only')) {
|
|
setReadOnly();
|
|
}
|
|
},
|
|
'change': handleContentChange,
|
|
}
|
|
});
|
|
};
|