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.js.

1.2.4
latest
Source
npm

Version published: 7 years ago

Maintainers: 1

Created: 7 years ago

Source

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.

<script src="https://cdn.jsdelivr.net/npm/nano-editor@1.2.3/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.

.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

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

Keywords

FAQs

What is nano-editor?

Is nano-editor well maintained?

Package last updated on 20 May 2018

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