Issue #10 Add markdown preview editor

These changes add a macro that creates the relevant HTML markup for a
markdown editor. In the main.js file, we bind the relevant elements with
the marked library, so users can see their contents in a HTML format.
This commit is contained in:
Nathan Yam
2017-05-14 15:29:55 +10:00
parent d3ad2503ae
commit fabe0f6fec
3 changed files with 38 additions and 8 deletions

View File

@@ -77,6 +77,26 @@ document.addEventListener("DOMContentLoaded", function(event) {
};
});
// Initialise markdown editors on page
document.addEventListener("DOMContentLoaded", function() {
var markdownEditors = Array.prototype.slice.call(document.querySelectorAll('.markdown-editor'));
markdownEditors.forEach(function (markdownEditor) {
var fieldName = markdownEditor.getAttribute('data-field-name');
var previewTabSelector = '#' + fieldName + '-preview-tab';
var targetSelector = '#' + fieldName + '-markdown-target';
var sourceSelector = markdownEditor.querySelector('.markdown-source');
var previewTabEl = markdownEditor.querySelector(previewTabSelector);
var targetEl = markdownEditor.querySelector(targetSelector);
previewTabEl.addEventListener('click', function () {
targetEl.innerHTML = marked(sourceSelector.value.trim());
});
});
});
//
// This is the unminified version of the theme changer script in the layout.html @ line: 21
// ===========================================================