164 lines
4.9 KiB
Markdown
164 lines
4.9 KiB
Markdown
# 前端框架集成
|
||
|
||
作为一个独立的纯前端文档编辑器，UAI Editor 可以独立使用，也可以轻松无缝集成到 Vue、React、Layui、Angular 等几乎任何前端框架。
|
||
|
||
## 有爱文档安装
|
||
|
||
我们需要安装 UAI Editor 软件，软件已经打包发布到 [https://www.npmjs.com/](https://www.npmjs.com/) 平台，可以直接通过以下命令安装：
|
||
|
||
```bash
|
||
npm i @uai-team/uai-editor
|
||
```
|
||
|
||
## 软件集成
|
||
|
||
然后，我们可以将 UAI Editor 与自己的项目进行集成。
|
||
|
||
### 独立使用
|
||
|
||
* index.html
|
||
|
||
```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
|
||
|
||
```js
|
||
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 集成
|
||
|
||
```ts
|
||
<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 集成
|
||
|
||
```js
|
||
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 的时候配置相关的配置项：
|
||
|
||
```js
|
||
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'
|
||
},
|
||
}
|
||
}
|
||
}
|
||
}
|
||
})
|
||
```
|
||
|
||
## 软件运行
|
||
|
||
最后，我们需要运行项目，执行以下命令可以运行项目或自己的项目：
|
||
|
||
```bash
|
||
npm install
|
||
|
||
npm run dev
|
||
```
|