Y A C E
yet another code editor
Features
- ~1KB gzipped with zero dependencies.
- binding hotkey and enhance with plugins.
- adding any highlighter.
Installation
yace
is published to npm, and accessible via the unpkg.com CDN:
via npm:
npm i yace
hotlinking from unpkg: (no build tool needed!)
;
Usage
yace
is working in browser and need DOM node e.g.:
Initializing editor passing css selector and options:
; const editor = "#editor" value: "your awesome code" lineNumbers: true;
Examples
Live demo with codesandbox:
- Using
highlight.js
as highlighter - Using
prismjs
as highlighter - Building tiny ~2KB markdown editor
- Building markdown editor with highlighting code in code blocks
- Using plugins
- Using with react
API
const editor = selector options;
Options
value
— initial value.lineNumber
— show or hide line numbers, defaultfalse
.highlighter
— function that takes current value and return highlighted html.styles
— styles for root component, e.g.{ fontSize: "20px }
.plugins
— array of plugins.
Plugin
Plugin is a function that called with textarea params {value, selectionStart, selectionEnd}
as first argument and keydown DOM event as second argument and returns new textarea params {value, selectionStart, selectionEnd}
.
onUpdate(callback)
It takes a callback that will be invoked when editor value is changed.
editor;
update(params)
Update editor value and selections.
// update valueeditor; // update selectioneditor;
destroy()
Remove all listeners.
editor;
value
Get the current editor's value.
editorvalue; // => "your awesome code";
textarea
Get the textarea DOM element.
editortextarea;editortextareaspellcheck = false;