AIEditor: Creating an AI-driven rich text editor with support for multiple front-end frameworks

General Introduction

AIEditor is an AI-driven next-generation rich text editor , based on Web Component development , support for Vue, React, Angular and other almost all mainstream front-end frameworks. It is compatible with PC Web and mobile , and provides two themes of light and dark colors.AIEditor provides flexible configuration , developers can easily use it to develop any text editor application. In addition to the open source version, AIEditor also offers a more powerful commercial version with unlimited number of users and applications.

Function List

• AI translation: Multi-language translation support, customized translation languages and prompt words.
• AI Continued: Automatically continue text based on context to improve writing efficiency.
• AI Optimization: Optimize the content of the text and improve the quality of the language.
• AI Code Block: Automatically add code comments and explain the meaning of the code.
• Multiplayer Collaboration: Supports multiple users editing the same document at the same time, viewing each other's input and changes in real time.
• annotation function: Allows comments or suggestions to be added to specific sections of the document to facilitate subsequent revisions.
• Markdown Support: Recognize and correctly render Markdown syntax and preview edits in real time.
• Import Export: Supports import and export of Word, Markdown, HTML, and PDF formats.
• Customizing the AI MenuCustomize AI functions and prompts based on real-world scenarios.

Using Help

Installation process

1. Install the npm package: Run the following command in the project directory to install AIEditor:

   npm install aieditor

2. Introduction of AIEditor: Introduce the AIEditor component in your project, for example in a Vue project:

   import { createApp } from 'vue';
import App from './App.vue';
import AIEditor from 'aieditor';
const app = createApp(App);
app.use(AIEditor);
app.mount('#app');

Guidelines for use

1. Basic use: Add the AIEditor component to your project, for example in a Vue project:

   <template>
<AIEditor />
</template>

2. Configuration options: AIEditor offers a variety of configuration options that can be customized as needed. For example, set the theme and language:

   <AIEditor theme="dark" language="zh" />

3. AI function: AIEditor supports docking to any Big Model, and users can use their own private Big Model ApiKey and customize AI prompts and extended AI menus. For example, to set ApiKey:

   <AIEditor apiKey="your-private-api-key" />

4. Attachment upload: AIEditor supports multiple attachment uploading methods, including select upload, paste upload and drag and drop upload. For example, add image upload function:

   <AIEditor :uploadOptions="{ image: true }" />

Detailed function operation flow

1. text editor: Use AIEditor's basic functions for text editing, such as bolding, italicizing, underlining, and so on.
2. Formatting brushes and erasers: Use the Formatting Brush to copy text formatting and the Eraser to clear text formatting.
3. To-do list: Create and manage to-do lists for easy task tracking.
4. emoticon: Insert emoticons to enrich the text.
5. Attachment management: Upload and manage images, videos, files and other attachments with drag-and-drop resizing support.

With the above steps, users can easily install and use AIEditor to fully utilize its powerful AI-driven features and rich text editing capabilities.