Exitus Editor is a customizable rich text editor with support for advanced features like math typesetting, image handling, and custom content manipulation. This README provides a guide on setting up and using the editor in your project. Exitus Editor is built using Tiptap, a headless rich-text editor framework based on ProseMirror. Tiptap provides the flexibility to build highly customizable and feature-rich text editors.
- Getting Started
- Installation
- Basic Usage
- Configuration Options
- API Methods
- Events
- Example
- Development
The Exitus Editor requires minimal setup. The base HTML structure and necessary JavaScript files are included in this repository.
Clone this repository and include the required files in your project.
exituseditor.jsfavicon.ico
Place these files in the root directory of your project.
Exitus Editor requires an HTML element reference to be rendered within. Below is an example of how to set up and initialize the editor:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Exitus Editor</title>
<script src="./exituseditor.js"></script>
</head>
<body>
<div class="element"></div>
</body>
</html>const defaultText = '(any html content)';
const exitusEditor = new ExitusEditor({
container: document.querySelector('.element'),
content: defaultText,
config: {
mathtype: {
mathTypeParameters: {
editorParameters: {
fontFamily: "Arial",
fontStyle: "normal",
fontSize: "14px",
fonts: [{ 'id': 'inherit', 'label': 'Arial' }],
language: "pt_br",
},
},
},
image: {
proxyUrl: "https://example.com/proxy",
inline: true,
allowBase64: true,
},
initialHeight: 400,
},
});- Mathtype: Math editor configuration.
- Image: Image proxy and handling options.
- Initial Height: Sets the editor's initial height.
Retrieves the editor content as html.
Retrieves the editor content as Json.
Update editable state of the editor.
Retrieves a plugin instance.
destroy the editor and remove from dom.
Triggered when the editor is initialized.
Triggered when the editor content is updated.
const exitusEditor = new ExitusEditor({
container: document.querySelector('.element'),
content: '(any html content)',
});
exitusEditor.on('create', ({ editor }) => {
const htmlContent = document.querySelector('#testeHtml');
htmlContent.innerHTML = editor.getHTML();
});
exitusEditor.on('update', ({ editor }) => {
const htmlContent = document.querySelector('#testeHtml');
htmlContent.innerHTML = editor.getHTML();
});Clone this repository and install the npm dependencies.
npm install
npm run dev