Difference between revisions of "Widget:CodeEditor"
From Coder Merlin
| (4 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
Parameters: | Parameters: | ||
;uniqueID: integer: id for editor, must be unique per page | ;uniqueID: integer: id for editor, must be unique per page | ||
;width: integer|string: percentage (as string, e.g. "100%" or integer size in pixels), null for no change (full width) | |||
;height: integer|string: percentage (as string, e.g. "100%" or integer size in pixels), null for no change (~10 lines) | |||
;lineNumbers: boolean: true to display line numbers | ;lineNumbers: boolean: true to display line numbers | ||
;theme: string: name of theme (which must be loaded via css) | ;theme: string: name of theme (which must be loaded via css) | ||
;readOnly: boolean: true if editing should be disabled | ;readOnly: boolean: true if editing should be disabled | ||
;mode: string: language for highlighting | ;mode: string: language for highlighting (which must be loaded via js) | ||
;initialCode: string: initial code to place in editor | ;initialCode: string: initial code to place in editor | ||
Example: | |||
<pre> | |||
{{#widget:CodeEditor | |||
|uniqueID=10 | |||
|width=null | |||
|height=null | |||
|lineNumbers=true | |||
|theme=vibrant-ink | |||
|readOnly=false | |||
|mode=swift | |||
|initialCode=func sayHello() { | |||
print("Hello, World!") | |||
} | |||
}} | |||
</pre> | |||
</noinclude> | </noinclude> | ||
| Line 16: | Line 34: | ||
<script> | <script> | ||
window.addEventListener('load', (event) => { | window.addEventListener('load', (event) => { | ||
CodeMirror.fromTextArea(document.getElementById('codeEditor<!--{$uniqueID|validate:int}-->'), | var cm = CodeMirror.fromTextArea(document.getElementById('codeEditor<!--{$uniqueID|validate:int}-->'), | ||
{ | { | ||
keyMap: "emacs", | |||
lineNumbers: "<!--{$lineNumbers|validate:boolean}-->", | lineNumbers: "<!--{$lineNumbers|validate:boolean}-->", | ||
theme: "<!--{$theme}-->", | theme: "<!--{$theme}-->", | ||
| Line 24: | Line 43: | ||
} | } | ||
); | ); | ||
cm.setSize("<!--{$width}-->", "<!--{$height}-->"); | |||
}); | }); | ||
</script> | </script> | ||
</div> | </div> | ||
</includeonly> | </includeonly> | ||
Latest revision as of 20:57, 8 June 2021
Parameters:
- uniqueID
- integer: id for editor, must be unique per page
- width
- integer|string: percentage (as string, e.g. "100%" or integer size in pixels), null for no change (full width)
- height
- integer|string: percentage (as string, e.g. "100%" or integer size in pixels), null for no change (~10 lines)
- lineNumbers
- boolean: true to display line numbers
- theme
- string: name of theme (which must be loaded via css)
- readOnly
- boolean: true if editing should be disabled
- mode
- string: language for highlighting (which must be loaded via js)
- initialCode
- string: initial code to place in editor
Example:
{{#widget:CodeEditor
|uniqueID=10
|width=null
|height=null
|lineNumbers=true
|theme=vibrant-ink
|readOnly=false
|mode=swift
|initialCode=func sayHello() {
print("Hello, World!")
}
}}
