Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 15 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 (4 months ago)
- Default Branch: main
- Last Pushed: 2024-10-13T03:55:22.000Z (3 months ago)
- Last Synced: 2024-10-31T11:26:38.724Z (2 months ago)
- Topics: html-source, markdown, wysiwyg-editor, wysiwyg-html-editor
- Language: JavaScript
- Homepage:
- Size: 33.2 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 module 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 subdirectory of your webserver’s document root. 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 build
```The last command should create a file `multieditor.mjs`.
Load the `multieditor.mjs` script in your document through a module script tag, and create an editor using the `multieditor(..)` function.
```html
import multieditor from "./multiedit/multieditor.mjs";
const me = multieditor({
parent: document.body,
mode: 'wysiwyg',
content: '<p></p>'
});```
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 at the start, or of markdown if the `'md'` mode is used at the 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⟩"
}
```Note also that when the script is loaded it also assigns the `multieditor(..)` function to the global `window` object as well, so it can be called outside of a module so long as the module is already loaded.
## 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.