loki-editor

Loki React Editor - A Feature-Rich WYSIWYG Text Editor for React

Loki React Editor is a highly customizable, feature-rich WYSIWYG (What You See Is What You Get) text editor for React applications. With comprehensive support for text formatting, tables, hyperlinks, and more, it is ideal for developers who need to integrate a robust and flexible rich-text editor into their web applications.

🚀 Live Demo

Check out the live demo of Loki React Editor here.

💖 Support the Project

If you enjoy using Loki React Editor and would like to support its development, consider contributing through Buy Me A Coffee.

🐞 Report Bugs

If you encounter any issues or bugs while using Loki React Editor, please report them on our GitHub Issues page.

---

📦 Install Loki Editor

To install Loki Editor, use the following command:

npm install loki-editor

🛠️ Usage

Here’s an example of how you can use LOKI Editor in your React project:

1. Import the editor component and CSS file:

   import React from 'react';
   import TextEditor from 'loki-editor';
   import 'loki-editor/dist/TextEditor.css';

2. Use the editor in your React component:

   const App = () => {
     return (
       <div>
         <TextEditor />
       </div>
     );
   };
   
   export default App;

🔑 Features

Loki Editor - A Powerful WYSIWYG Editor for React Loki Editor provides a wide range of essential features to enhance your text editing experience. Whether you're working on a blog editor, a CMS, or a document editor, Loki Editor makes content formatting simple and intuitive.

📑 Text Formatting:

• 💪 Bold: Makes the selected text bold.
• 👈 Italic: Italicizes the selected text.
• ⎯ Underline: Underlines the selected text.
• ➕ Insert Table: Add a new table to your content.
• 🚫 Strikethrough: Strikes through the selected text.

📝 Lists:

🔢 Numbered List: Create a numbered list.
• Bulleted List: Create a bulleted list.

🖋️ Text Alignment:

• ↔️ Align Left: Aligns the text to the left.
• 🏙️ Align Center: Aligns the text to the center.
• ↗️ Align Right: Aligns the text to the right.

🔗 Links:

• 🔗 Insert Link: Add hyperlinks to your content.
  -📍 Insert Bookmark: Add bookmarks with custom names and links for easy navigation.

🎯 Additional Features:

• ✨ Highlight Text: Highlights the selected text in a chosen color.
• 🎨 Change Text Color: Change the color of selected text.
• ➡️ Text Indentation: Increase or decrease the indentation of text.
• 🧹 Clear Formatting: Removes all formatting from the selected content.
• 🔤 Font Style: Choose from multiple font styles.
• 🔠 Font Size: Change the size of the selected text.
• ⎯ Horizontal Rule: Insert a horizontal rule for separation.
• ↵ Line Break: Insert a line break.

🎨 Custom Styles You can easily customize the look and feel of the LOKI Editor by modifying the TextEditor.css file.

🧑‍💻 Development

If you'd like to contribute to the development of Loki React Editor, feel free to clone the repository and submit pull requests. Please ensure your contributions adhere to the project's coding standards and provide detailed documentation for any changes.

🎯 Why Choose Loki Editor?

Loki Editor is designed for developers who need a fully customizable, modern, and lightweight React-based text editor. Unlike other editors, Loki Editor offers:

• ✅ Full Control – Easily customize the toolbar, styles, and functionality.
• 🎨 Beautiful UI – Simple yet powerful WYSIWYG editor.
• ⚡ Optimized for Performance – Lightweight and fast.
• 🔗 Easy Integration – Works seamlessly with React projects.

🌐 Browser Compatibility Loki Editor is tested and compatible with: 🟢 Chrome (latest) 🦊 Firefox (latest) 🌐 Safari (latest) 🔵 Edge (latest)

📜 Loki Editor License

Loki Editor is open-source and available under the MIT License.
You are free to use, modify, and distribute Loki Editor in both personal and commercial projects.

❓ For any questions or assistance, feel free to reach out to me directly via email at 📧 [[e-mail]].