前端框架集成

作为一个独立的纯前端文档编辑器，UAI Editor 可以独立使用，也可以轻松无缝集成到 Vue、React、Layui、Angular 等几乎任何前端框架。

有爱文档安装

我们需要安装 UAI Editor 软件，软件已经打包发布到 https://www.npmjs.com/ 平台，可以直接通过以下命令安装：

npm i @uai-team/uai-editor

软件集成

然后，我们可以将 UAI Editor 与自己的项目进行集成。

独立使用

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>UAI Editor</title>
    <link rel="icon" href="/favicon.png" />
</head>
<body>
    <div id="uai-editor"></div>
    <script type="module" src="/src/main.ts"></script>
</body>
</html>

main.ts

import { UAIEditor } from '@uai-team/uai-editor';
import '@uai-team/uai-editor/dist/style.css';

new UAIEditor({
    element: "#uai-editor",
    content: 'UAI Editor 是一个面向 AI 的、现代 UI 风格的下一代富文本编辑器。开箱即用、支持所有前端框架。',
})

与 VUE 集成

<template>
  <div ref="editorDiv"/>
</template>

<script lang="ts">
import { UAIEditor } from '@uai-team/uai-editor';
import '@uai-team/uai-editor/dist/style.css';

export default {
  mounted(){
    new UAIEditor({
      element: this.$refs.editorDiv as Element,
      content: 'UAI Editor 是一个面向 AI 的、现代 UI 风格的下一代富文本编辑器。开箱即用、支持所有前端框架。',
    })
  }
}
</script>

与 React 集成

import {useEffect, useRef} from 'react';
import { UAIEditor } from '@uai-team/uai-editor';
import '@uai-team/uai-editor/dist/style.css';

function App() {
    const divRef = useRef(null);
    useEffect(() => {
        if (divRef.current) {
            const uaiEditor = new UAIEditor({
                element: divRef.current,
                content: 'UAI Editor 是一个面向 AI 的、现代 UI 风格的下一代富文本编辑器。开箱即用、支持所有前端框架。',
            })
            return ()=>{
                uaiEditor.destroy();
            }
        }
    }, [])

    return (
        <>
            <div ref={divRef} />
        </>
    )
}

export default App

与人工智能集成

如果要在 UAI Editor 中使用 AI 功能，需要在初始化 UAIEditor 的时候配置相关的配置项：

new UAIEditor({
    element: "#uai-editor",
    content: 'UAI Editor 是一个面向 AI 的、现代 UI 风格的下一代富文本编辑器。开箱即用、支持所有前端框架。',
    ai: { // AI 配置项
        chat: { // 聊天配置项
            models: { // 模型配置项
                "default": {
                    modelType: 'openai',
                    baseUrl: 'https://open.bigmodel.cn/api/paas/v4',
                    apiKey: process.env.CHATGLM_APIKEY,
                    model: 'glm-4-flash'
                },
                "GLM-4": { // 聊天功能选择使用的模型，配置智谱AI的GLM-4-Flash模型
                    modelType: 'openai',
                    baseUrl: 'https://open.bigmodel.cn/api/paas/v4',
                    apiKey: process.env.CHATGLM_APIKEY, // 此处填写您智谱AI的 API Key
                    model: 'glm-4-flash'
                },
                "InternLM2.5": { // 聊天功能选择使用的模型，配置上海人工智能实验室的InternLM2.5模型
                    modelType: 'openai',
                    baseUrl: 'https://internlm-chat.intern-ai.org.cn/puyu/api/v1',
                    apiKey: process.env.INTERNLM_TOKEN, // 此处填写您上海人工智能实验室的 API Key
                    model: 'internlm2.5-latest'
                },
            },
        },
        image: { // 图像配置项
            models: { // 模型配置项
                text2image: { // 文本生成图像模型配置项
                    "default": {
                        modelType: 'openai',
                        baseUrl: 'https://open.bigmodel.cn/api/paas/v4', // images/generations
                        apiKey: process.env.CHATGLM_APIKEY,
                        model: 'cogview-3-flash'
                    },
                    "CogView-3": { // 绘图功能选择使用的模型，配置智谱AI的CogView-3-Flash模型
                        modelType: 'openai',
                        baseUrl: 'https://open.bigmodel.cn/api/paas/v4', // images/generations
                        apiKey: process.env.CHATGLM_APIKEY, // 此处填写您智谱AI的 API Key
                        model: 'cogview-3-flash'
                    },
                }
            }
        }
    }
})

软件运行

最后，我们需要运行项目，执行以下命令可以运行项目或自己的项目：

npm install

npm run dev

4.9 KiB Raw Blame History Unescape Escape