nanoEditor
Super small and simple code editor inspired by CodeFlask.js.
- Includes Typescript typings.
- Plays nice with babel/ES5 projects.
- Only Just 11kb gzipped (including PrismJS dependency and styles).
- Supports HTML, JSX, JSON, Typescript, CSS, LESS & SASS out of the box.
- Line number support is also included in the bundle.
Install (Browser)
- Include the editor CDN in your
<head>tag.
- Include a theme from cdnjs for PrismJS 1.9.0 in your
headtag.
Install (Webpack / Browserify / etc)
- Install this lib from npm.
npm i nano-editor --save- Import the lib and a prismjs theme into your project.
;;Usage / API
The new nanoEditor() method accepts three arguments:
- Element: Id or HTML element to attach the editor to.
- Type: The type of code being displayed, defalts to
markdown. - Line Numbers: Pass in
trueto see line numbers.
Once you've setup an instance, there are a few public methods you can use:
.onChange(changeFunction: (value: string) => void)
Accepts a single function as it's argument, the function will get called each time the editor is updated. The function will also have the editor's value passed into it.
.setLanguage(language: string)
Change the language of the editor.
.setValue(value: string)
Sets the contents of the editor.
.canEdit(yesOrNo: boolean)
Set the element as editable or not.
.container
The HTML element the editor is attached to.
Example
alert("Dont taze me bro.");