wikijs-fork/client/js/components/editor.js

192 lines
4.0 KiB
JavaScript
Raw Normal View History

2016-09-11 02:53:21 +00:00
// ====================================
// Markdown Editor
// ====================================
if($('#mk-editor').length === 1) {
2016-09-11 16:03:06 +00:00
let mdeModalOpenState = false;
let mdeCurrentEditor = null;
2016-09-11 02:53:21 +00:00
2016-09-25 21:32:39 +00:00
Vue.filter('filesize', (v) => {
return _.toUpper(filesize(v));
2016-10-17 23:52:04 +00:00
});
2016-09-25 21:32:39 +00:00
2016-09-17 04:26:02 +00:00
//=include editor-image.js
2016-09-11 16:03:06 +00:00
//=include editor-codeblock.js
2016-09-11 02:53:21 +00:00
var mde = new SimpleMDE({
autofocus: true,
autoDownloadFontAwesome: false,
element: $("#mk-editor").get(0),
placeholder: 'Enter Markdown formatted content here...',
spellChecker: false,
status: false,
toolbar: [{
name: "bold",
action: SimpleMDE.toggleBold,
className: "fa fa-bold",
title: "Bold",
},
{
name: "italic",
action: SimpleMDE.toggleItalic,
className: "fa fa-italic",
title: "Italic",
},
{
name: "strikethrough",
action: SimpleMDE.toggleStrikethrough,
className: "fa fa-strikethrough",
title: "Strikethrough",
},
'|',
{
name: "heading-1",
action: SimpleMDE.toggleHeading1,
className: "fa fa-header fa-header-x fa-header-1",
title: "Big Heading",
},
{
name: "heading-2",
action: SimpleMDE.toggleHeading2,
className: "fa fa-header fa-header-x fa-header-2",
title: "Medium Heading",
},
{
name: "heading-3",
action: SimpleMDE.toggleHeading3,
className: "fa fa-header fa-header-x fa-header-3",
title: "Small Heading",
},
{
name: "quote",
action: SimpleMDE.toggleBlockquote,
className: "fa fa-quote-left",
title: "Quote",
},
'|',
{
name: "unordered-list",
action: SimpleMDE.toggleUnorderedList,
className: "fa fa-list-ul",
title: "Bullet List",
},
{
name: "ordered-list",
action: SimpleMDE.toggleOrderedList,
className: "fa fa-list-ol",
title: "Numbered List",
},
'|',
{
name: "link",
action: (editor) => {
2016-11-29 03:03:18 +00:00
/*if(!mdeModalOpenState) {
2016-09-11 16:03:06 +00:00
mdeModalOpenState = true;
$('#modal-editor-link').slideToggle();
2016-11-29 03:03:18 +00:00
}*/
2016-09-11 02:53:21 +00:00
},
className: "fa fa-link",
title: "Insert Link",
},
{
name: "image",
action: (editor) => {
2016-09-17 04:26:02 +00:00
if(!mdeModalOpenState) {
vueImage.open();
2016-09-17 04:26:02 +00:00
}
2016-09-11 02:53:21 +00:00
},
className: "fa fa-image",
title: "Insert Image",
},
{
name: "file",
action: (editor) => {
//todo
},
className: "fa fa-file-text-o",
title: "Insert File",
},
2016-09-11 02:53:21 +00:00
'|',
{
name: "inline-code",
action: (editor) => {
2016-09-11 16:03:06 +00:00
2016-09-11 02:53:21 +00:00
if(!editor.codemirror.doc.somethingSelected()) {
return alerts.pushError('Invalid selection','You must select at least 1 character first.');
}
let curSel = editor.codemirror.doc.getSelections();
curSel = _.map(curSel, (s) => {
return '`' + s + '`';
});
editor.codemirror.doc.replaceSelections(curSel);
2016-09-11 02:53:21 +00:00
},
className: "fa fa-terminal",
title: "Inline Code",
},
{
name: "code-block",
action: (editor) => {
2016-09-11 16:03:06 +00:00
if(!mdeModalOpenState) {
mdeModalOpenState = true;
if(mde.codemirror.doc.somethingSelected()) {
codeEditor.setValue(mde.codemirror.doc.getSelection());
} else {
codeEditor.setValue('');
}
2016-12-04 01:20:06 +00:00
vueCodeBlock.open();
2016-09-11 16:03:06 +00:00
}
2016-09-11 02:53:21 +00:00
},
className: "fa fa-code",
title: "Code Block",
},
'|',
{
name: "table",
action: (editor) => {
//todo
},
className: "fa fa-table",
title: "Insert Table",
},
{
name: "horizontal-rule",
action: SimpleMDE.drawHorizontalRule,
className: "fa fa-minus",
title: "Horizontal Rule",
}
],
shortcuts: {
"toggleBlockquote": null,
"toggleFullScreen": null
}
});
2016-10-17 23:52:04 +00:00
//-> Save
2016-09-11 02:53:21 +00:00
2016-10-17 23:52:04 +00:00
$('.btn-edit-save, .btn-create-save').on('click', (ev) => {
2016-09-11 02:53:21 +00:00
2016-10-17 23:52:04 +00:00
$.ajax(window.location.href, {
data: {
markdown: mde.value()
},
dataType: 'json',
method: 'PUT'
}).then((rData, rStatus, rXHR) => {
if(rData.ok) {
window.location.assign('/' + pageEntryPath);
} else {
alerts.pushError('Something went wrong', rData.error);
}
}, (rXHR, rStatus, err) => {
alerts.pushError('Something went wrong', 'Save operation failed.');
});
2016-09-11 02:53:21 +00:00
});
2016-10-17 23:52:04 +00:00
}