Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

cloudcmd/dword

Repository files navigation

Web editor based on CodeMirror. Fork of edward.

dword

Features

  • Syntax highlighting based on extension of file for over 90 languages.
  • Built-in emmet (for html files)
  • Drag n drop (drag file from desktop to editor).
  • Configurable options (json/edit.json could be overriden by ~/.dword.json)

Install

npm i dword -g

NPM_INFO

Command line parameters

Usage: dword [filename]

Parameter Operation
-h, --help display help and exit
-v, --version output version information and exit

Hot keys

Key Operation
Ctrl + s save
Ctrl + f find
Ctrl + h replace
Ctrl + g go to line
Ctrl + e evaluate (JavaScript only supported)

API

dword could be used as middleware for express. For this purpuse API could be used.

Server

dword(options)

Middleware of dword. Options could be omitted.

import {dword} from 'dword';
import express from 'express';
const app = express();
app.use(dword({
 root: '/', // default
 online: true, // default
 diff: true, // default
 zip: true, // default
 dropbox: false, // optional
 dropboxToken: 'token', // optional
}));
app.listen(31_337);

dword.listen(socket)

Could be used with socket.io to handle editor events with.

import {Server} from 'socket.io';
const socket = new Server(server);
dword.listen(socket, {
 // optional
 prefixSocket: '/dword',
 // optional
 auth: (accept, reject) => (username, password) => {
 accept();
 },
});

Client

Dword uses codemirror on client side, so API is similar. All you need is put minimal html, css, and js into your page.

Minimal html:

<div class="edit" data-name="js-edit"></div>
<script src="/dword/dword.js"></script>

Minimal css:

html, body, .edit {
 height: 100%;
 margin: 0;
}

Minimal js:

dword('[data-name="js-edit"]', (editor) => {
 editor.setValue('hello dword');
 console.log('dword is ready');
});

Client API

dword(selector, callback)
  • selector: string
  • callback: EditorCallback

Initialize new instance

editor.setValue(value)
  • value: string

Set value to editor.

editor.getValue()
  • returns: string

Get value from editor.

Types
interface Editor {
 setValue: (value: string) => void;
 getValue: () => string;
}
type EditorCallback = (editor: Editor) => void;
type Dword = (selector: string, callback: EditorCallback) => void;

For more information you could always look around client/dword.js directory.

Related

License

MIT

Packages

No packages published

Contributors 4

Languages

AltStyle によって変換されたページ (->オリジナル) /