mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-06-13 00:41:59 +03:00
Started tinymce code editor components
This commit is contained in:
@ -52,31 +52,91 @@ const modeMap = {
|
||||
|
||||
module.exports.highlight = function() {
|
||||
let codeBlocks = document.querySelectorAll('.page-content pre');
|
||||
|
||||
for (let i = 0; i < codeBlocks.length; i++) {
|
||||
let innerCodeElem = codeBlocks[i].querySelector('code[class^=language-]');
|
||||
let mode = '';
|
||||
if (innerCodeElem !== null) {
|
||||
let langName = innerCodeElem.className.replace('language-', '');
|
||||
if (typeof modeMap[langName] !== 'undefined') mode = modeMap[langName];
|
||||
}
|
||||
codeBlocks[i].innerHTML = codeBlocks[i].innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
|
||||
let content = codeBlocks[i].textContent;
|
||||
console.log('MODE', mode);
|
||||
|
||||
CodeMirror(function(elt) {
|
||||
codeBlocks[i].parentNode.replaceChild(elt, codeBlocks[i]);
|
||||
}, {
|
||||
value: content,
|
||||
mode: mode,
|
||||
lineNumbers: true,
|
||||
theme: 'base16-light',
|
||||
readOnly: true
|
||||
});
|
||||
highlightElem(codeBlocks[i]);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
function highlightElem(elem) {
|
||||
let innerCodeElem = elem.querySelector('code[class^=language-]');
|
||||
let mode = '';
|
||||
if (innerCodeElem !== null) {
|
||||
let langName = innerCodeElem.className.replace('language-', '');
|
||||
if (typeof modeMap[langName] !== 'undefined') mode = modeMap[langName];
|
||||
}
|
||||
elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
|
||||
let content = elem.textContent;
|
||||
|
||||
CodeMirror(function(elt) {
|
||||
elem.parentNode.replaceChild(elt, elem);
|
||||
}, {
|
||||
value: content,
|
||||
mode: mode,
|
||||
lineNumbers: true,
|
||||
theme: 'base16-light',
|
||||
readOnly: true
|
||||
});
|
||||
}
|
||||
|
||||
module.exports.highlightElem = highlightElem;
|
||||
|
||||
module.exports.wysiwygView = function(elem) {
|
||||
let doc = elem.ownerDocument;
|
||||
elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
|
||||
let content = elem.textContent;
|
||||
let newWrap = doc.createElement('div');
|
||||
let newTextArea = doc.createElement('textarea');
|
||||
|
||||
newWrap.className = 'CodeMirrorContainer';
|
||||
newTextArea.style.display = 'none';
|
||||
elem.parentNode.replaceChild(newWrap, elem);
|
||||
|
||||
newWrap.appendChild(newTextArea);
|
||||
newWrap.contentEditable = false;
|
||||
newTextArea.textContent = content;
|
||||
|
||||
let cm = CodeMirror(function(elt) {
|
||||
newWrap.appendChild(elt);
|
||||
}, {
|
||||
value: content,
|
||||
mode: '',
|
||||
lineNumbers: true,
|
||||
theme: 'base16-light',
|
||||
readOnly: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
cm.refresh();
|
||||
}, 300);
|
||||
return newWrap;
|
||||
};
|
||||
|
||||
// module.exports.wysiwygEditor = function(elem) {
|
||||
// let doc = elem.ownerDocument;
|
||||
// let newWrap = doc.createElement('div');
|
||||
// newWrap.className = 'CodeMirrorContainer';
|
||||
// let newTextArea = doc.createElement('textarea');
|
||||
// newTextArea.style.display = 'none';
|
||||
// elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
|
||||
// let content = elem.textContent;
|
||||
// elem.parentNode.replaceChild(newWrap, elem);
|
||||
// newWrap.appendChild(newTextArea);
|
||||
// let cm = CodeMirror(function(elt) {
|
||||
// newWrap.appendChild(elt);
|
||||
// }, {
|
||||
// value: content,
|
||||
// mode: '',
|
||||
// lineNumbers: true,
|
||||
// theme: 'base16-light',
|
||||
// readOnly: true
|
||||
// });
|
||||
// cm.on('change', event => {
|
||||
// newTextArea.innerText = cm.getValue();
|
||||
// });
|
||||
// setTimeout(() => {
|
||||
// cm.refresh();
|
||||
// }, 300);
|
||||
// };
|
||||
|
||||
module.exports.markdownEditor = function(elem) {
|
||||
let content = elem.textContent;
|
||||
|
||||
|
Reference in New Issue
Block a user