完善文档
This commit is contained in:
wux_labs
221
README.md
221
README.md
@@ -9,6 +9,16 @@
|
|||||||
- **【全模态】** 人工智能：文字、语音、图片、视频，全模态功能创作体验。
|
- **【全模态】** 人工智能：文字、语音、图片、视频，全模态功能创作体验。
|
||||||
|
|
||||||
<table>
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2">
|
||||||
|
<img src="./docs/images/image-00.png" alt="image-00" width="100%" />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2">
|
||||||
|
<br />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<img src="./docs/images/image-01.png" alt="image-01"/>
|
<img src="./docs/images/image-01.png" alt="image-01"/>
|
||||||
@@ -51,178 +61,6 @@ UAI Editor 提供了完善的文档编辑能力和 AI 创作能力，支持 Mark
|
|||||||
* UAI Editor 支持全模态大模型，包括文本生成、语音识别、语音生成、文生图、图生图、局部重绘、图片理解、文生视频、图生视频、视频理解等。
|
* UAI Editor 支持全模态大模型，包括文本生成、语音识别、语音生成、文生图、图生图、局部重绘、图片理解、文生视频、图生视频、视频理解等。
|
||||||
* UAI Editor 私有模型适配多种环境，包括英伟达显卡、天数智芯显卡、Pytorch、IPEX等。
|
* UAI Editor 私有模型适配多种环境，包括英伟达显卡、天数智芯显卡、Pytorch、IPEX等。
|
||||||
|
|
||||||
## 软件安装
|
|
||||||
|
|
||||||
### 基础软件安装
|
|
||||||
|
|
||||||
首先，我们需要安装 `nodejs`、`npm`等用于开发的基础软件。
|
|
||||||
|
|
||||||
Node.js 可以通过不同的方式安装，所有主要平台的官方软件包均可在 [https://nodejs.cn/download/](https://nodejs.cn/download/) 获得。
|
|
||||||
|
|
||||||
一种非常方便的安装 Node.js 的方法是通过包管理器，[https://nodejs.cn/download/package-manager/](https://nodejs.cn/download/package-manager/) 中列出了适用于 macOS、Linux 和 Windows 的其他软件包管理器。
|
|
||||||
|
|
||||||
### 有爱文档安装
|
|
||||||
|
|
||||||
其次，我们需要安装 UAI Editor 软件，软件已经打包发布到 [https://www.npmjs.com/](https://www.npmjs.com/) 平台，可以直接通过以下命令安装：
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm i @uai-team/uai-editor
|
|
||||||
```
|
|
||||||
|
|
||||||
## 软件集成
|
|
||||||
|
|
||||||
然后，我们可以将 UAI Editor 与自己的项目进行集成。
|
|
||||||
|
|
||||||
作为一个独立的纯前端文档编辑器，UAI Editor 可以独立使用，也可以轻松无缝集成到 Vue、React、Layui、Angular 等几乎任何前端框架。
|
|
||||||
|
|
||||||
### 独立使用
|
|
||||||
|
|
||||||
* 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 i
|
|
||||||
|
|
||||||
npm run dev
|
|
||||||
```
|
|
||||||
|
|
||||||
## 帮助文档
|
## 帮助文档
|
||||||
|
|
||||||
UAI Editor 提供了一份使用文档，您可以通过以下方式访问：
|
UAI Editor 提供了一份使用文档，您可以通过以下方式访问：
|
||||||
@@ -233,6 +71,29 @@ UAI Editor 提供了一份使用文档，您可以通过以下方式访问：
|
|||||||
npm i docsify -g
|
npm i docsify -g
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### 开发者文档
|
||||||
|
|
||||||
|
启动文档服务：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docsify serve docs/developer --port 3000
|
||||||
|
```
|
||||||
|
|
||||||
|
访问文档：
|
||||||
|
|
||||||
|
[http://localhost:3000](http://localhost:3000)。
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<img src="./docs/images/image-81.png" alt="image-81"/>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<img src="./docs/images/image-82.png" alt="image-82"/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
### 用户文档
|
### 用户文档
|
||||||
|
|
||||||
启动文档服务：
|
启动文档服务：
|
||||||
@@ -248,28 +109,16 @@ docsify serve docs/user --port 3010
|
|||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<img src="./docs/images/image-91.png" alt="image-01"/>
|
<img src="./docs/images/image-91.png" alt="image-91"/>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<img src="./docs/images/image-92.png" alt="image-02"/>
|
<img src="./docs/images/image-92.png" alt="image-92"/>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
或者，您也可以直接访问：[文档编辑](docs/user/base.md)、[附件插入](docs/user/insert.md)、[文档导出](docs/user/export.md)、[AI 功能](docs/user/chat.md)等文档。
|
或者，您也可以直接访问：[文档编辑](docs/user/base.md)、[附件插入](docs/user/insert.md)、[文档导出](docs/user/export.md)、[AI 功能](docs/user/chat.md)等文档。
|
||||||
|
|
||||||
### 开发者文档
|
|
||||||
|
|
||||||
启动文档服务：
|
|
||||||
|
|
||||||
```bash
|
|
||||||
docsify serve docs/developer --port 3020
|
|
||||||
```
|
|
||||||
|
|
||||||
访问文档：
|
|
||||||
|
|
||||||
[http://localhost:3020](http://localhost:3020)。
|
|
||||||
|
|
||||||
## 开源优势
|
## 开源优势
|
||||||
|
|
||||||
* **免费使用：** 作为开源项目，UAI Editor 采用 [MIT 许可证](LICENSE) 对所有用户免费开放，无需担心版权问题。
|
* **免费使用：** 作为开源项目，UAI Editor 采用 [MIT 许可证](LICENSE) 对所有用户免费开放，无需担心版权问题。
|
||||||
|
|||||||
0
docs/developer/.nojekyll
Normal file
0
docs/developer/.nojekyll
Normal file
7
docs/developer/README.md
Normal file
7
docs/developer/README.md
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
# UAI Editor：有爱文档，有爱、有AI、有UI。
|
||||||
|
|
||||||
|
> UAI Editor 是一个面向 AI 的、现代 UI 风格的下一代富文本编辑器。开箱即用、支持所有前端框架。
|
||||||
|
|
||||||
|
UAI Editor 是一个基于 Typescript 的适合于国人使用的纯前端文档编辑器。UAI Editor 提供完善的文档编辑能力和 AI 创作能力，支持 Markdown 语法，支持基础的富文本编辑功能，支持插入多种格式的节点类型、提供了多种类型的实用工具。
|
||||||
|
|
||||||
|
作为一个独立的纯前端文档编辑器，UAI Editor 可以轻松无缝集成到 Vue、React、Layui、Angular 等几乎任何前端框架。
|
||||||
15
docs/developer/_coverpage.md
Normal file
15
docs/developer/_coverpage.md
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<!-- _coverpage.md -->
|
||||||
|
|
||||||
|
# **有爱文档（UAI-Editor）开发文档**
|
||||||
|
|
||||||
|
> 💪打造现代 UI 风格、面向 AI 的最强、最轻量级的个人&团队文档。
|
||||||
|
|
||||||
|
## 有爱文档，有爱、有AI、有UI。开箱即用、支持所有前端框架。
|
||||||
|
|
||||||
|
- **【全行业】** 无论您是：金融、教育、医疗、零售、互联网还是传统行业。
|
||||||
|
- **【全场景】** 无论您是：文章创作、会议记录、学术论文还是知识库管理。
|
||||||
|
- **【全功能】** 功能丰富：文本编辑、格式排版、多媒体插入、表格制作等。
|
||||||
|
- **【全模态】** 人工智能：文字、语音、图片、视频，全模态功能创作体验。
|
||||||
|
|
||||||
|
|
||||||
|
[开始](/README.md)
|
||||||
7
docs/developer/_navbar.md
Normal file
7
docs/developer/_navbar.md
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
- [首页](/)
|
||||||
|
|
||||||
|
- 开源地址
|
||||||
|
- [Gitee](https://gitee.com/uai-team/uai-editor)
|
||||||
|
- [Github](https://github.com/uai-team/uai-editor)
|
||||||
|
|
||||||
|
- 技术支持
|
||||||
3
docs/developer/_sidebar.md
Normal file
3
docs/developer/_sidebar.md
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
- 环境搭建
|
||||||
|
- [开发环境搭建](development.md)
|
||||||
|
- [前端框架集成](integration.md)
|
||||||
102
docs/developer/development.md
Normal file
102
docs/developer/development.md
Normal file
@@ -0,0 +1,102 @@
|
|||||||
|
# 开发环境搭建
|
||||||
|
|
||||||
|
## 基础软件安装
|
||||||
|
|
||||||
|
首先，我们需要安装 `nodejs`、`npm`等用于开发的基础软件。
|
||||||
|
|
||||||
|
Node.js 可以通过不同的方式安装，所有主要平台的官方软件包均可在 [https://nodejs.cn/download/](https://nodejs.cn/download/) 获得。
|
||||||
|
|
||||||
|
一种非常方便的安装 Node.js 的方法是通过包管理器，[https://nodejs.cn/download/package-manager/](https://nodejs.cn/download/package-manager/) 中列出了适用于 macOS、Linux 和 Windows 的其他软件包管理器。
|
||||||
|
|
||||||
|
## 获取项目源码
|
||||||
|
|
||||||
|
通过以下命令获取项目源代码：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git clone https://gitee.com/uai-team/uai-editor
|
||||||
|
cd uai-editor
|
||||||
|
```
|
||||||
|
|
||||||
|
## 依赖软件安装
|
||||||
|
|
||||||
|
有爱文档是一个`Nodejs`项目，正常情况下只需要执行`npm install`即可完成依赖的安装，但是因为项目中依赖了`@tiptap-pro`下的一些扩展，因此在执行`npm install`命令前需要做一些额外的操作。
|
||||||
|
|
||||||
|
### 注册Tiptap Cloud账号
|
||||||
|
|
||||||
|
通过[https://cloud.tiptap.dev/register](https://cloud.tiptap.dev/register)链接注册一个Tiptap Cloud账号。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
验证注册的邮箱。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
填写团队信息。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
填写个人信息。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 登录Tiptap Cloud账号
|
||||||
|
|
||||||
|
通过[https://cloud.tiptap.dev/login](https://cloud.tiptap.dev/login)链接登录已有账号。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 获取NPM token
|
||||||
|
|
||||||
|
通过[https://cloud.tiptap.dev/v2/features/pro-extensions](https://cloud.tiptap.dev/v2/features/pro-extensions)链接，获取个人的NPM registry token。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
复制以上Token的内容，备用。
|
||||||
|
|
||||||
|
### 创建.npmrc配置文件
|
||||||
|
|
||||||
|
根据官方文档[https://tiptap.dev/docs/guides/pro-extensions](https://tiptap.dev/docs/guides/pro-extensions)或[https://cloud.tiptap.dev/v2/features/pro-extensions](https://cloud.tiptap.dev/v2/features/pro-extensions)，在克隆项目的根目录下创建`.npmrc`文件，并填入文件内容。
|
||||||
|
|
||||||
|
```bash
|
||||||
|
@tiptap-pro:registry=https://registry.tiptap.dev/
|
||||||
|
@tiptap-cloud:registry=https://registry.tiptap.dev/
|
||||||
|
//registry.tiptap.dev/:_authToken=${上图中复制的Token}
|
||||||
|
```
|
||||||
|
|
||||||
|
即，`.npmrc`文件的内容应该为：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
@tiptap-pro:registry=https://registry.tiptap.dev/
|
||||||
|
@tiptap-cloud:registry=https://registry.tiptap.dev/
|
||||||
|
//registry.tiptap.dev/:_authToken=SnF9fofcsYRXn***************WCtXj
|
||||||
|
```
|
||||||
|
|
||||||
|
此时，项目的目录结构应该为：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
uai-editor
|
||||||
|
├── src
|
||||||
|
├── .gitignore
|
||||||
|
├── .npmignore
|
||||||
|
├── .npmrc # 这个是通过前面的步骤新增加的配置文件
|
||||||
|
├── LICENSE
|
||||||
|
├── README.md
|
||||||
|
├── index.html
|
||||||
|
├── package.json
|
||||||
|
├── tsconfig.json
|
||||||
|
└── vite.config.ts
|
||||||
|
```
|
||||||
|
|
||||||
|
### 执行软件安装
|
||||||
|
|
||||||
|
完成以上操作后，就可以执行`npm install`来进行依赖的安装了。
|
||||||
|
|
||||||
|
## 软件运行
|
||||||
|
|
||||||
|
最后，我们需要运行项目，执行以下命令可以运行项目或自己的项目：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
BIN
docs/developer/images/development-01.png
Normal file
BIN
docs/developer/images/development-01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 210 KiB |
BIN
docs/developer/images/development-02.png
Normal file
BIN
docs/developer/images/development-02.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
BIN
docs/developer/images/development-03.png
Normal file
BIN
docs/developer/images/development-03.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
BIN
docs/developer/images/development-04.png
Normal file
BIN
docs/developer/images/development-04.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 307 KiB |
BIN
docs/developer/images/development-05.png
Normal file
BIN
docs/developer/images/development-05.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
BIN
docs/developer/images/development-06.png
Normal file
BIN
docs/developer/images/development-06.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
56
docs/developer/index.html
Normal file
56
docs/developer/index.html
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>有爱文档（UAI-Editor）</title>
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||||
|
<meta name="description" content="Description">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script>
|
||||||
|
window.$docsify = {
|
||||||
|
// 项目名称
|
||||||
|
name: '有爱文档（UAI-Editor）',
|
||||||
|
// 仓库地址，点击右上角的Github章鱼猫头像会跳转到此地址
|
||||||
|
repo: 'https://gitee.com/uai-team/uai-editor',
|
||||||
|
// 侧边栏支持，默认加载的是项目根目录下的_sidebar.md文件
|
||||||
|
loadSidebar: true,
|
||||||
|
// 导航栏支持，默认加载的是项目根目录下的_navbar.md文件
|
||||||
|
loadNavbar: true,
|
||||||
|
// 封面支持，默认加载的是项目根目录下的_coverpage.md文件
|
||||||
|
coverpage: true,
|
||||||
|
// 最大支持渲染的标题层级
|
||||||
|
maxLevel: 5,
|
||||||
|
// 自定义侧边栏后默认不会再生成目录，设置生成目录的最大层级（建议配置为2-4）
|
||||||
|
subMaxLevel: 3,
|
||||||
|
// 小屏设备下合并导航栏到侧边栏
|
||||||
|
mergeNavbar: true,
|
||||||
|
/*搜索相关设置*/
|
||||||
|
search: 'auto', // default
|
||||||
|
search: {
|
||||||
|
maxAge: 86400000,// 过期时间，单位毫秒，默认一天
|
||||||
|
paths: 'auto',// 注意：仅适用于 paths: 'auto' 模式
|
||||||
|
placeholder: '搜索',
|
||||||
|
// 支持本地化
|
||||||
|
// placeholder: {
|
||||||
|
// // '/zh-cn/': '搜索',
|
||||||
|
// '/': 'Type to search'
|
||||||
|
// },
|
||||||
|
noData: '找不到结果',
|
||||||
|
depth: 4,
|
||||||
|
hideOtherSidebarContent: false,
|
||||||
|
namespace: 'UAI-Editor',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<!-- Docsify v4 -->
|
||||||
|
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
|
||||||
|
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
163
docs/developer/integration.md
Normal file
163
docs/developer/integration.md
Normal file
@@ -0,0 +1,163 @@
|
|||||||
|
# 前端框架集成
|
||||||
|
|
||||||
|
作为一个独立的纯前端文档编辑器，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
|
||||||
|
```
|
||||||
BIN
docs/images/image-00.png
Normal file
BIN
docs/images/image-00.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 733 KiB |
BIN
docs/images/image-81.png
Normal file
BIN
docs/images/image-81.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 608 KiB |
BIN
docs/images/image-82.png
Normal file
BIN
docs/images/image-82.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 355 KiB |
BIN
docs/user/images/architecture-01.png
Normal file
BIN
docs/user/images/architecture-01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 733 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 755 KiB |
@@ -38,4 +38,6 @@ UAI Editor 是一个基于 Typescript 的适合于国人使用的纯前端文档
|
|||||||
|
|
||||||
软件架构如图：
|
软件架构如图：
|
||||||
|
|
||||||
|
* LMDeploy版
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
BIN
public/favicon.png
Normal file
BIN
public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Reference in New Issue
Block a user