CustomCodeMirror is a JavaScript library that provides a simple way to introduce the CodeMirror editor used in normal page editing, along its useful toolbar, into any desired textarea.
This scripts uses a snapshotted and slightly modified version of the default editor's styling sheet, so most issues on the default editor will also exist in any generated by this.
The link and template autocompleting features have been rebuilt as close to the original functionality as possible.
Importing
importArticle({
type: 'script',
article: 'u:dev:MediaWiki:CustomCodeMirror.js'
});
mw.hook('dev.CCM.load').add(function(ccmLoader) {
// `ccmLoader` is a function that accepts a textarea element and loads CodeMirror on top of it (e.g., `ccmLoader($('textarea#myCoolInput'))`)
// When `ccmLoader` finishes loading, a hook with the name of `dev.CCM.ready` will fire, with the editor methods' object as return
// It will also load the deafult `ext.CodeMirror.ready` hook for any other scripts that modify or rely on the editor
let myTextarea = $('textarea#myCoolInput');
ccmLoader(myTextarea);
mw.hook('dev.CCM.ready', (cm)=>{
if (!myTextarea.is(cm.$textarea)) {return;} // As hooks can fire any number of times, you should make sure your code is specifically for the relevant textarea
cm.view.state.sliceDoc() // This method allows getting the updated editor content, and specific sections can be obtained by selecting a start and end point as first and second parameters, respectively
cm.view.dispatch({ // Perform changes to the editor content
changes: { // Example of replacing the selected text by custom input
from: cm.view.state.selection.main.from,
to: cm.view.state.selection.main.to,
insert: 'The text was replaced'
},
selection: {anchor: cm.view.state.selection.main.from} // Where to position the cursor after the change is performed
});
cm.view.focus(); // This method allows focusing the editor after performing special changes through external systems
});
});
Text above can be found here (edit)