arcox

Arcox is an extensible markdown editor with plugin support.

It uses API-driven design and separates the editor from the renderer.You can use it anywhere and customize styles easily.

Installation

$ npm install arcox --save

Getting started

html

<textarea id="editor"></textarea>
<div id="renderer"></div>

js

import { Editor, Renderer } from "arcox";
import "arcox/css/arcox.css";
import "arcox/css/highlight.css";

let editor = new Editor("#editor");
let renderer = new Renderer("#renderer");

editor.bind(renderer);

more configuration

let editor = new Editor({
    el: "#editor", // the textarea element id
    plugins:{
        undo: true, // disable the undo plugin by setting to false
        tab: true // disable the tab plugin by setting to false
    },
    formats:{
        heading1: {
            name: "heading1",
            prefix: "# "
        },
        ...
    }
})
let renderer = new Renderer({
    el: "#renderer", // the element id the renderer mounted
    lang: "js" // default language for highlight.js
})

Editor

props

prop	type	description
el	Object	the textarea element
config	Object	editor's config
renderer	Object	binding renderer instance

methods

let editor = new Editor("#editor");

/**
 * focus the editor
 */
editor.focus();

/**
 * set the value of editor.
 * 
 * value:String
 */
editor.setContent(value);

/**
 * get the value of editor.
 */
editor.getContent();

/**
 * set selection area.
 *
 * startIndex: nonnegative integer
 * endIndex:   nonnegative integer
 */
editor.setSelection(startIndex,endIndex);


/**
 * get selection area
 */
editor.getSelection();

/**
 * insert formatting string
 * 
 * key: "heading1" | "bold" | "italic" | "image" ...
 */
editor.format(key);

/**
 * use your custom plugin
 *
 * plugin: Function
 */
editor.use(plugin);

/**
 * emit an async event.
 *
 * event:String
 */
editor.emit(event);

/**
 * emit an sync event.
 *
 * event:String
 */
editor.emitSync(event);

/**
 * add an event listener.
 *
 * event: String
 * callback: Function
 */
editor.on(event, callback);

/**
 * bind a renderer.
 *
 * renderer: Renderer
 */
editor.bind(renderer);

/**
 * unbind with renderer.
 */
editor.unbind();

events

editor.on("change",function(val){
    console.log(val);
});

editor.on("keydown",function(e){
    // ctrl+z example
    if (e.code === 90 && (e.ctrl || e.meta) && !e.alt && !e.shift) {
        e.preventDefault();
        e.stopPropagation();
    }
});

plugin example

let editor = new Editor("#editor");

let plugin = function(editor){
    editor.setContent("custom plugin"); // do anything you want
}
editor.use(plugin);

prefab plugins

if you want to disable any of them,configure it to false.

name	description
undo	undo:ctrl+z; redo:ctrl+y
tab	press tab to insert one '\t'

formats

key	name	prefix	subfix
heading1	heading1	#
heading2	heading2	##
heading3	heading3	###
heading4	heading4	####
heading5	heading5	#####
heading6	heading6	######
bold	bold	**	**
italic	italic	*	*
blockquote	blockquote	>
strike	strike	~~	~~
link	link	[	](url)
image	image	
table	col	|	|col|col|\n|-|-|-|\n|col|col|col|
codeblock	js	```	\n```
inlinecode	code	`	`

custom formats

// custom your own formats.
// prefix and subfix cannot be lacked at the same time
let editor = new Editor({
    el: "#editor",
    formats:{
        custom: {
            name: "format name",
            prefix: "prefix",
            subfix: "subfix"
        },
    }
});

Renderer

props

prop	type	description
el	Object	dom element
config	Object	renderer's config
editor	Object	binding editor instance
md	Object	instance of markdown-it
html	String	render result

methods

let renderer = new Renderer("#renderer");

/**
 * source: markdown text
 */
renderer.render(source);

/**
 * return current render result
 */
let html = renderer.getHtml();

/**
 * same as Editor
 */
renderer.emit(event);
renderer.emitSync(event);
renderer.on(event, callback);
renderer.bind(editor);
renderer.unbind();