https://github.com/frabjous/multiedit

Javascript for creating simple multi-modal web editors that allow switching between WYSIWYG, markdown and HTML source editing modes.
https://github.com/frabjous/multiedit

html-source markdown wysiwyg-editor wysiwyg-html-editor

Last synced: 2 days ago
JSON representation

Javascript for creating simple multi-modal web editors that allow switching between WYSIWYG, markdown and HTML source editing modes.

• Host: GitHub
• URL: https://github.com/frabjous/multiedit
• Owner: frabjous
• License: gpl-3.0
• Created: 2024-09-14T22:42:24.000Z (13 days ago)
• Default Branch: main
• Last Pushed: 2024-09-15T00:04:21.000Z (13 days ago)
• Last Synced: 2024-09-16T06:28:38.294Z (12 days ago)
• Topics: html-source, markdown, wysiwyg-editor, wysiwyg-html-editor
• Language: JavaScript
• Homepage:
• Size: 31.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

# multiedit

Javascript for creating simple multi-modal web editors that allow switching between WYSIWYG, markdown and HTML source editing modes.

Based on [ProseMirror](https://prosemirror.net/) and [CodeMirror](https://codemirror.net/).

## Installing

Clone this repository into a webserver-served directory as a subdirectory of where the pages that will call it are served. E.g.,

```sh

cd /var/www/

git clone --depth 1 https://github.com/frabjous/multiedit.git

```

Use npm to install the dependencies and create a browser-loadable bundle.

```sh

cd multiedit

npm install

npm run bundle

```

Load the `multiedit.js` script in your document:

```html

```

Create a multieditor using the `multieditor(..)` function (use `window.multieditor` in a module). Because the script loads other scripts, it is probably necessary to do so only after the window is fully loaded.

```javascript

window.addEventListener('load', () => {

    const me = multieditor({

        parent: document.body,

        mode: 'wysiwyg',

        content: '
'

    });

});

```

The `parent` argument can either be a DOM element, or, if a string is passed instead, an id of a DOM element. The editor will be placed inside this element.


The `mode` argument determines what mode the editor starts in, and should be one of `'wysiwyg'` for the ProseMirror WYSIWYG editing mode, `'md'` for the Markdown editing mode, or `'html'` for the HTML source editing mode.

The `content` argument determines the initial content of the editor, and should consist of HTML if either the `'wysiwyg'` or `'html'` editing modes are used to start, or of markdown if the `'md'` mode is used to start.

The modes can be switched between each other using the radio buttons at the bottom.

The current state and contents of the editor can be determined with the `gatherinfo()` method.

```javascript

const info = me.gatherinfo();

```

This returns an object with three properties:

```json

{

    "mode": "⟨current mode: 'wysiwyg'|'md'|'html'⟩",

    "content": "⟨editor content, either html or md depending on mode⟩",

    "html": "⟨the markdown converted to html in md mode⟩"

}

```

## License

LICENSE: GNU GPL v3 or later. You should have received a copy of the GNU General

Public License along with this program. If not, see

.

© 2024 Kevin C. Klement.