Skip to content

jl-/simo

Repository files navigation

licence npm version npm downloads

Next semantic rich text editor.

Features

  • small code base with a module system
  • framework agnostic
  • ...

Examples

General

<!-- Simo itself is framework agnostic. -->
<!-- mount it with any view renderer you want, or write your own. Demo here using Vue with built-in renderer -->
<template>
    <div data-gramm="false" />
</template>

<script>
    import Editor from 'simo';

    export default {
        mounted () {
            const initState = {};
            this.editor = new Editor({ readonly: false });
            this.editor.mount(this.$el, initState);
        }
    };
</script>

Customization

// editor core
import Editor from 'simo/core';

// your custom renderer
import Renderer from 'my-custom-renderer';

// modules that enhance your editor
// for example: use the builtin history module
import History from 'simo/modules/history';

const editor = new Editor({
    // schema: {},
    // modules: options for modules
});

// create a renderer instance the way(|options) you want,
// for example: it needs a dom, and holds editor for future call.
const renderer = new Renderer(
    document.querySelector('#editor'), editor
);

// add module instances to enhance your editor with more functionality
editor.module('history', History/*, options*/);

// finally, mount your editor with initial state
editor.mount(renderer, {/* init state object */});

untitled