📥 Installation Guide

Get Editora up and running in your project

Installation

📦 Using npm

Install Editora core package from npm registry:

npm install @editora/core

For React Projects

Install the React integration package:

npm install @editora/react, @editora/plugins react react-dom

Quick Start

import { Editor } from '@editora/core';

const editor = new Editor({
  element: document.getElementById('editor'),
  content: '<p>Hello, World!</p>'
});

With React


import { EditoraEditor } from '@editora/react';

import "@editora/themes/themes/default.css";
import {
  BoldPlugin,
  ItalicPlugin,
  HeadingPlugin,
  HistoryPlugin
} from '@editora/plugins';

function App() {
  const [content, setContent] = useState('<p>Hello from React!</p>');

  return (
    <EditoraEditor
      value={content}
      onChange={setContent}
      plugins={[
        BoldPlugin(),
        ItalicPlugin(),
        HeadingPlugin(),
        HistoryPlugin()
      ]}
    />
  );
}

🧶 Using Yarn

Install Editora using Yarn package manager:

yarn add @editora/core

For React Projects

yarn add @editora/react react react-dom

💡 Yarn usage is identical to npm. All other examples in this guide use npm but work the same with Yarn.

🌐 Using CDN

For HTML websites without build tools, use the browser-ready build via CDN:

unpkg CDN


<script src="https://unpkg.com/@editora/core/dist/webcomponent.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@editora/core/dist/webcomponent.min.css">

jsDelivr CDN


<script src="https://cdn.jsdelivr.net/npm/@editora/core/dist/webcomponent.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@editora/core/dist/webcomponent.min.css">

Basic HTML Setup

<!DOCTYPE html>
<html>
<head>
  <title>Editora Web Component</title>
  <script src="https://cdn.jsdelivr.net/npm/@editora/core/dist/webcomponent-core.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@editora/core/dist/webcomponent-core.min.css">
</head>
<body>
  <editora-editor
    plugins="bold italic underline history"
    toolbar-items="bold italic underline | undo redo"
    height="300"
  >
    <p>Start typing...</p>
  </editora-editor>
</body>
</html>
✅ Ready to use! No build process needed. Works in all modern browsers.

🔨 Building from Source

Clone the repository and build it locally:

1. Clone Repository

git clone https://github.com/ajaykr089/Editora.git
cd Editora

2. Install Dependencies

npm install

3. Build All Packages

npm run build

4. Link for Local Development

cd packages/core
npm link

# In your project
npm link @editora/core

5. Development Mode

cd packages/core
npm run dev  # Watch mode build

🖥️ System Requirements

Node.js: 16.x or higher
npm: 7.x or higher
Browser: Any modern browser (Chrome, Firefox, Safari, Edge)

📋 Version Requirements by Framework

Framework Min Version Package
React 16.8.0 @editora/react
Vue 3.0.0 @editora/core
Angular 13.0.0 @editora/core
Vanilla JS ES2015+ @editora/core

✅ Verify Installation

Test if the installation was successful:

import { Editor } from '@editora/core';
console.log(Editor); // Should print the Editor class

❓ Troubleshooting

Q: Module not found error?
A: Make sure you've run npm install and the package is listed in your node_modules folder.
Q: Version conflicts with React?
A: Editora supports React 16.8+. If you're using an older version, upgrade React first.
Q: CDN script not loading?
A: Check your internet connection and make sure the CDN URL is correct. Try using a different CDN provider.

📚 Next Steps

Now that you have Editora installed:

  1. Explore Features - Learn about all available features
  2. Read API Documentation - Understand the API
  3. Learn Keyboard Shortcuts - Boost productivity
  4. Check Examples - See working examples
  5. Install Plugins - Add more functionality

Have questions? Join our discussions or report an issue.