Difference between revisions of "Widget:CodeEditor"
From Coder Merlin
(3 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) | ||
Line 7: | Line 9: | ||
;mode: string: language for highlighting (which must be loaded via js) | ;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", | keyMap: "emacs", | ||
Line 25: | 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!") } }}