Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

nano-editor

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

nano-editor

Super small and simple code editor inspired by CodeFlask.

1.2.1
Source
npm

Version published: 7 years ago

Weekly downloads: 18; increased by260%

Maintainers: 1

Weekly downloads

Created: 7 years ago

Source

nanoEditor

Super small and simple code editor inspired by CodeFlask.

Includes Typescript typings.
Plays nice with bablel/ES5 projects.
Only 10kb gzipped (including PrismJS dependency and styles).
Supports HTML, JSX, Typescript, CSS, LESS & SASS out of the box.
Line number support.

Install (Browser)

Include the editor CDN in your <head> tag.

<script src="https://cdn.jsdelivr.net/npm/nano-editor@1.0.0/dist/nanoEditor.min.js"></script>

Include a theme from cdnjs for PrismJS 1.9.0 in your head tag.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/themes/prism.min.css" />

Install (Webpack / Browserify / etc)

Install this lib from npm.

npm i nano-editor --save

Import the lib and a prismjs theme into your project.

import { nanoEditor } from "nano-editor";
import "prismjs/themes/prism.css";

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 true to 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 inline.

.setValue(value: string)

Sets the contents of the editor.

Example

<div id="#code">
    alert("Dont taze me bro.");
</div>
<script>
    const editor = new nanoEditor("#code", "javascript");
    editor.setValue("alert(Don't move BRO!)");
</script>

Keywords

FAQs

What is nano-editor?

Is nano-editor popular?

Is nano-editor well maintained?

Package last updated on 29 Dec 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install