nano-editor
Advanced tools
Comparing version 0.0.1 to 1.0.0
@@ -5,7 +5,4 @@ "use strict"; | ||
require("prismjs/components/prism-typescript.js"); | ||
require("prismjs/components/prism-sass.js"); | ||
require("prismjs/components/prism-less.js"); | ||
require("prismjs/components/prism-css.js"); | ||
require("prismjs/components/prism-jsx.js"); | ||
require("prismjs/components/prism-json.js"); | ||
require("prismjs/components/prism-javascript.js"); | ||
@@ -12,0 +9,0 @@ require("prismjs/components/prism-markup.js"); |
{ | ||
"name": "nano-editor", | ||
"version": "0.0.1", | ||
"version": "1.0.0", | ||
"description": "", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
@@ -14,12 +14,53 @@ # nanoEditor | ||
## Install (Browser) | ||
1. Include the editor CDN in your `<head>` tag. | ||
```html | ||
<script src="https://cdn.jsdelivr.net/npm/nano-editor@0.0.1/dist/nanoEditor.min.js"></script> | ||
``` | ||
2. Include a theme from [cdnjs for PrismJS](https://cdnjs.com/libraries/prism) 1.9.0 in your `head` tag. | ||
```html | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/themes/prism.min.css" /> | ||
``` | ||
## Install (Webpack / Browserify / etc) | ||
1. Install this lib from npm. | ||
```sh | ||
npm i nano-editor --save | ||
``` | ||
npm i nanoEditor --save | ||
2. Import the lib and a prismjs theme into your project. | ||
```js | ||
import { nanoEditor } from "nano-editor"; | ||
import "prismjs/themes/prism.css"; | ||
``` | ||
## API | ||
## Usage / API | ||
The `new nanoEditor()` method accepts three arguments: | ||
1. **Element:** Id or HTML element to attach the editor to. | ||
2. **Type:** The type of code being displayed, defalts to `markdown`. | ||
3. **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 | ||
```html | ||
<div id="#code"> | ||
alert("Dont taze me bro."); | ||
</div> | ||
<script> | ||
const editor = new nanoEditor("#code", "javascript"); | ||
editor.setValue("alert(Don't move BRO!)"); | ||
</script> | ||
``` | ||
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
66937
16
0
66
592