diff --git a/README.md b/README.md index 3cde65f..c31ea87 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,17 @@ - **【全功能】** 功能丰富:文本编辑、格式排版、多媒体插入、表格制作等。 - **【全模态】** 人工智能:文字、语音、图片、视频,全模态功能创作体验。 + + + + + +
+ image-01 + + image-02 +
+ ## 与众不同 UAI Editor 提供了完善的文档编辑能力和 AI 创作能力,支持 Markdown 语法,支持基础的富文本编辑功能,支持插入多种节点类型,提供了多种类型的实用工具。作为一个独立的纯前端文档编辑器,UAI Editor 可以轻松无缝集成到 Vue、React、Layui、Angular 等几乎任何前端框架。 @@ -149,16 +160,6 @@ function App() { export default App ``` -## 软件运行 - -最后,我们需要运行项目,执行以下命令可以运行项目或自己的项目: - -```bash -npm i - -npm run dev -``` - ### 与人工智能集成 如果要在 UAI Editor 中使用 AI 功能,需要在初始化 UAIEditor 的时候配置相关的配置项: @@ -212,6 +213,16 @@ new UAIEditor({ }) ``` +## 软件运行 + +最后,我们需要运行项目,执行以下命令可以运行项目或自己的项目: + +```bash +npm i + +npm run dev +``` + ## 帮助文档 UAI Editor 提供了一份使用文档,您可以通过以下方式访问: @@ -234,6 +245,19 @@ docsify serve docs/user --port 3010 [http://localhost:3010](http://localhost:3010)。 + + + + + +
+ image-01 + + image-02 +
+ +或者,您也可以直接访问:[文档编辑](docs/user/base.md)、[附件插入](docs/user/insert.md)、[文档导出](docs/user/export.md)、[AI 功能](docs/user/chat.md)等文档。 + ### 开发者文档 启动文档服务: diff --git a/docs/images/image-01.png b/docs/images/image-01.png new file mode 100644 index 0000000..72f31fc Binary files /dev/null and b/docs/images/image-01.png differ diff --git a/docs/images/image-02.png b/docs/images/image-02.png new file mode 100644 index 0000000..56cfa5c Binary files /dev/null and b/docs/images/image-02.png differ diff --git a/docs/images/image-91.png b/docs/images/image-91.png new file mode 100644 index 0000000..5467a0a Binary files /dev/null and b/docs/images/image-91.png differ diff --git a/docs/images/image-92.png b/docs/images/image-92.png new file mode 100644 index 0000000..a15ecb2 Binary files /dev/null and b/docs/images/image-92.png differ diff --git a/docs/user/.nojekyll b/docs/user/.nojekyll new file mode 100644 index 0000000..e69de29 diff --git a/docs/user/README.md b/docs/user/README.md new file mode 100644 index 0000000..02ab8ee --- /dev/null +++ b/docs/user/README.md @@ -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 等几乎任何前端框架。 diff --git a/docs/user/_coverpage.md b/docs/user/_coverpage.md new file mode 100644 index 0000000..fdd1cdb --- /dev/null +++ b/docs/user/_coverpage.md @@ -0,0 +1,15 @@ + + +# **有爱文档(UAI-Editor)使用指南** + +> 💪打造现代 UI 风格、面向 AI 的最强、最轻量级的个人&团队文档。 + +## 有爱文档,有爱、有AI、有UI。开箱即用、支持所有前端框架。 + +- **【全行业】** 无论您是:金融、教育、医疗、零售、互联网还是传统行业。 +- **【全场景】** 无论您是:文章创作、会议记录、学术论文还是知识库管理。 +- **【全功能】** 功能丰富:文本编辑、格式排版、多媒体插入、表格制作等。 +- **【全模态】** 人工智能:文字、语音、图片、视频,全模态功能创作体验。 + + +[开始](/README.md) \ No newline at end of file diff --git a/docs/user/_navbar.md b/docs/user/_navbar.md new file mode 100644 index 0000000..a422bec --- /dev/null +++ b/docs/user/_navbar.md @@ -0,0 +1,7 @@ +- [首页](/) + +- 开源地址 + - [Gitee](https://gitee.com/uai-team/uai-editor) + - [Github](https://github.com/uai-team/uai-editor) + +- 技术支持 \ No newline at end of file diff --git a/docs/user/_sidebar.md b/docs/user/_sidebar.md new file mode 100644 index 0000000..1719b7f --- /dev/null +++ b/docs/user/_sidebar.md @@ -0,0 +1,20 @@ +- 项目介绍 + - [项目简介](introduce.md) + - [开始使用](installation.md) + +- 常规使用 + - [文档编辑](base.md) + - [附件插入](insert.md) + - [文档导出](export.md) + +- 人工智能 + - [文本生成](chat.md) + - [语音生成](tts.md) + - [语音识别](asr.md) + - [文生图片](text2image.md) + - [图片优化](image2image.md) + - [局部重绘](inpainting.md) + - [图片理解](imagevision.md) + - [图生视频](image2video.md) + - [文生视频](text2video.md) + - [视频理解](videovision.md) \ No newline at end of file diff --git a/docs/user/asr.md b/docs/user/asr.md new file mode 100644 index 0000000..3ec162c --- /dev/null +++ b/docs/user/asr.md @@ -0,0 +1,11 @@ +# 语音识别 + +UAI Editor 支持将用户插入的语音数据转换成文本,这是一个有用的功能,尤其是在做会议纪要的时候,可以先录音,再将录音数据转换成文字。 + +在文档中选择音频数据,在弹出的浮动菜单中点击语音识别按钮。 + +![](images/asr-01.png) + +等待结果,在音频数据后面会插入语音识别的内容。 + +![](images/asr-02.png) diff --git a/docs/user/base.md b/docs/user/base.md new file mode 100644 index 0000000..c556244 --- /dev/null +++ b/docs/user/base.md @@ -0,0 +1,127 @@ +# 文档编辑 + +UAI Editor 提供了强大且方便的文档编辑功能。这些功能都放置在“开始”选项卡下。 + +## 标题设置 + +选中需要设置的文本,点击工具栏中的标题设置选项,可以设置标题样式。 + +![](images/base-01.png) + +比如,可以将文本设置为一级标题。 + +![](images/base-02.png) + +## 字体设置 + +选中需要设置的文本,点击工具栏中的字体选项,可以设置字体样式。 + +![](images/base-03.png) + +比如,可以将文本设置为楷体。 + +![](images/base-04.png) + +## 字号设置 + +选中需要设置的文本,点击工具栏中的字号选项,可以设置字体大小。 + +![](images/base-05.png) + +比如,可以将文本设置为小一。 + +![](images/base-06.png) + +## 样式设置 + +UAI Editor 也可以设置字体的基础样式。 + +### 粗体 + +选中需要设置的文本,点击工具栏中的粗体按钮,可以设置文本为粗体。 + +![](images/base-07.png) + +### 斜体 + +选中需要设置的文本,点击工具栏中的斜体按钮,可以设置文本为斜体。 + +![](images/base-08.png) + +### 下划线 + +选中需要设置的文本,点击工具栏中的下划线按钮,可以设置文本加下划线。 + +![](images/base-09.png) + +### 删除线 + +选中需要设置的文本,点击工具栏中的删除线按钮,可以设置文本加删除线。 + +![](images/base-10.png) + +### 下标 + +选中需要设置的文本,点击工具栏中的下标按钮,可以设置文本为下标。 + +![](images/base-11.png) + +### 上标 + +选中需要设置的文本,点击工具栏中的上标按钮,可以设置文本为上标。 + +![](images/base-12.png) + +### 字体颜色 + +选中需要设置的文本,点击工具栏中的字体颜色设置选项,可以设置文本的颜色。 + +![](images/base-13.png) + +### 背景颜色 + +选中需要设置的文本,点击工具栏中的背景颜色设置选项,可以设置文本的背景颜色。 + +![](images/base-14.png) + +### 有序列表 + +选中需要设置的文本,点击工具栏中的有序列表设置选项,可以设置有序列表。 + +![](images/base-15.png) + +### 无序列表 + +选中需要设置的文本,点击工具栏中的无序列表设置选项,可以设置无序列表。 + +![](images/base-16.png) + +### 缩进 + +选中需要设置的文本,点击工具栏中的缩进按钮,可以设置文本缩进。 + +![](images/base-17.png) + +### 左对齐 + +选中需要设置的文本,点击工具栏中的左对齐按钮,可以设置文本左对齐。 + +![](images/base-18.png) + +### 居中对齐 + +选中需要设置的文本,点击工具栏中的居中对齐按钮,可以设置文本居中对齐。 + +![](images/base-19.png) + +### 右对齐 + +选中需要设置的文本,点击工具栏中的右对齐按钮,可以设置文本右对齐。 + +![](images/base-20.png) + +### 引用 + +选中需要设置的文本,点击工具栏中的引用按钮,可以设置引用。 + +![](images/base-21.png) diff --git a/docs/user/chat.md b/docs/user/chat.md new file mode 100644 index 0000000..83ea2e1 --- /dev/null +++ b/docs/user/chat.md @@ -0,0 +1,37 @@ +# 文本生成 + +UAI Editor 支持与大模型进行对话,生成文本,这些功能包含两部分:边写边聊 和 快捷命令。 + +## 边写边聊 + +在人工智能选项卡下,点击工具栏中的边写边聊按钮。 + +![](images/chat-01.png) + +在打开的对话面板界面,我们可以选择需要对话的后端模型服务,IPEX、OPEA、其他公有或私有化部署的模型都可以。 + +![](images/chat-02.png) + +对话结果将会展示在对话窗口中。 + +![](images/chat-03.png) + +鼠标移动到对话内容上,可以展示出操作菜单,通过操作菜单我们可以将对话内容插入到文档中或替换文档中选中的内容。 + +![](images/chat-04.png) + +将在文档中的光标之后插入对话内容。 + +![](images/chat-05.png) + +## 快捷命令 + +除了通过对话面板进行大模型对话,我们还提供了与大模型对话的快捷命令。将光标移动到文档中需要大模型生成内容的地方,输入空格+斜线:` /` 可以弹出快捷命令。 + +![](images/chat-06.png) + +比如,我们选择大模型翻译,则会在光标后插入翻译后的内容。 + +![](images/chat-07.png) + +其他快捷命令的功能类似。 diff --git a/docs/user/export.md b/docs/user/export.md new file mode 100644 index 0000000..fa98184 --- /dev/null +++ b/docs/user/export.md @@ -0,0 +1,67 @@ +# 文档导出 + +UAI Editor 提供了文档导出功能,包括导出成Word文档、ODT文档、Markdown文档等。这些功能都放置在“导出”选项卡下。 + +## 导出Word文档 + +在工具栏点击导出Word文档按钮。 + +![](images/export-01.png) + +等待文档导出、下载完成。 + +![](images/export-02.png) + +可以打开导出的Word文件查看内容。 + +![](images/export-03.png) + +## 导出ODT文档 + +在工具栏点击导出ODT文档按钮。 + +![](images/export-04.png) + +等待文档导出、下载完成。 + +![](images/export-05.png) + +可以打开导出的ODT文件查看内容。 + +![](images/export-06.png) + +## 导出PDF文档 + +在工具栏点击导出PDF文档按钮。 + +![](images/export-07.png) + +点击保存按钮。 + +![](images/export-08.png) + +选择合适的路径并保存。 + +![](images/export-09.png) + +等待文档导出、下载完成。 + +![](images/export-10.png) + +可以打开导出的PDF文件查看内容。 + +![](images/export-11.png) + +## 导出图片 + +在工具栏点击导出图片按钮。 + +![](images/export-12.png) + +等待文档导出、下载完成。 + +![](images/export-13.png) + +可以打开导出的图片查看内容。 + +![](images/export-14.png) diff --git a/docs/user/image2image.md b/docs/user/image2image.md new file mode 100644 index 0000000..d74b9a3 --- /dev/null +++ b/docs/user/image2image.md @@ -0,0 +1,27 @@ +# 图片优化 + +UAI-Editor 支持对插入、生成的图片进行优化,也就是图生图。 + +在文档中选择需要优化的图片,在弹出的浮动菜单中点击图片重绘按钮。 + +![](images/image2image-01.png) + +在模态对话框中,操作类型选择图片优化。 + +![](images/image2image-02.png) + +在提示词输入框中输入想要优化的内容。 + +![](images/image2image-03.png) + +等待模型对图片进行优化。 + +![](images/image2image-04.png) + +优化完成后,我们可以从优化的结果中选择一幅自己比较满意的图片,然后点击确定按钮进行确认。 + +![](images/image2image-05.png) + +最后,文档中的原始图片将会替换为经过优化的图片。 + +![](images/image2image-06.png) diff --git a/docs/user/images/architecture.png b/docs/user/images/architecture.png new file mode 100644 index 0000000..86a3f5a Binary files /dev/null and b/docs/user/images/architecture.png differ diff --git a/docs/user/images/base-01.png b/docs/user/images/base-01.png new file mode 100644 index 0000000..5a01acb Binary files /dev/null and b/docs/user/images/base-01.png differ diff --git a/docs/user/images/base-02.png b/docs/user/images/base-02.png new file mode 100644 index 0000000..98a18a7 Binary files /dev/null and b/docs/user/images/base-02.png differ diff --git a/docs/user/images/base-03.png b/docs/user/images/base-03.png new file mode 100644 index 0000000..25443fb Binary files /dev/null and b/docs/user/images/base-03.png differ diff --git a/docs/user/images/base-04.png b/docs/user/images/base-04.png new file mode 100644 index 0000000..13fb652 Binary files /dev/null and b/docs/user/images/base-04.png differ diff --git a/docs/user/images/base-05.png b/docs/user/images/base-05.png new file mode 100644 index 0000000..80836c3 Binary files /dev/null and b/docs/user/images/base-05.png differ diff --git a/docs/user/images/base-06.png b/docs/user/images/base-06.png new file mode 100644 index 0000000..84baf01 Binary files /dev/null and b/docs/user/images/base-06.png differ diff --git a/docs/user/images/base-07.png b/docs/user/images/base-07.png new file mode 100644 index 0000000..6d96ee0 Binary files /dev/null and b/docs/user/images/base-07.png differ diff --git a/docs/user/images/base-08.png b/docs/user/images/base-08.png new file mode 100644 index 0000000..894febd Binary files /dev/null and b/docs/user/images/base-08.png differ diff --git a/docs/user/images/base-09.png b/docs/user/images/base-09.png new file mode 100644 index 0000000..c40421e Binary files /dev/null and b/docs/user/images/base-09.png differ diff --git a/docs/user/images/base-10.png b/docs/user/images/base-10.png new file mode 100644 index 0000000..fb3e10b Binary files /dev/null and b/docs/user/images/base-10.png differ diff --git a/docs/user/images/base-11.png b/docs/user/images/base-11.png new file mode 100644 index 0000000..64535f4 Binary files /dev/null and b/docs/user/images/base-11.png differ diff --git a/docs/user/images/base-12.png b/docs/user/images/base-12.png new file mode 100644 index 0000000..6d62641 Binary files /dev/null and b/docs/user/images/base-12.png differ diff --git a/docs/user/images/base-13.png b/docs/user/images/base-13.png new file mode 100644 index 0000000..14b4591 Binary files /dev/null and b/docs/user/images/base-13.png differ diff --git a/docs/user/images/base-14.png b/docs/user/images/base-14.png new file mode 100644 index 0000000..30452d1 Binary files /dev/null and b/docs/user/images/base-14.png differ diff --git a/docs/user/images/base-15.png b/docs/user/images/base-15.png new file mode 100644 index 0000000..0b92956 Binary files /dev/null and b/docs/user/images/base-15.png differ diff --git a/docs/user/images/base-16.png b/docs/user/images/base-16.png new file mode 100644 index 0000000..7344d6d Binary files /dev/null and b/docs/user/images/base-16.png differ diff --git a/docs/user/images/base-17.png b/docs/user/images/base-17.png new file mode 100644 index 0000000..b0844fa Binary files /dev/null and b/docs/user/images/base-17.png differ diff --git a/docs/user/images/base-18.png b/docs/user/images/base-18.png new file mode 100644 index 0000000..636efb6 Binary files /dev/null and b/docs/user/images/base-18.png differ diff --git a/docs/user/images/base-19.png b/docs/user/images/base-19.png new file mode 100644 index 0000000..5eff525 Binary files /dev/null and b/docs/user/images/base-19.png differ diff --git a/docs/user/images/base-20.png b/docs/user/images/base-20.png new file mode 100644 index 0000000..fefe160 Binary files /dev/null and b/docs/user/images/base-20.png differ diff --git a/docs/user/images/base-21.png b/docs/user/images/base-21.png new file mode 100644 index 0000000..31af688 Binary files /dev/null and b/docs/user/images/base-21.png differ diff --git a/docs/user/images/export-01.png b/docs/user/images/export-01.png new file mode 100644 index 0000000..82a950e Binary files /dev/null and b/docs/user/images/export-01.png differ diff --git a/docs/user/images/export-02.png b/docs/user/images/export-02.png new file mode 100644 index 0000000..81f7c40 Binary files /dev/null and b/docs/user/images/export-02.png differ diff --git a/docs/user/images/export-03.png b/docs/user/images/export-03.png new file mode 100644 index 0000000..1112a04 Binary files /dev/null and b/docs/user/images/export-03.png differ diff --git a/docs/user/images/export-04.png b/docs/user/images/export-04.png new file mode 100644 index 0000000..e2c9a94 Binary files /dev/null and b/docs/user/images/export-04.png differ diff --git a/docs/user/images/export-05.png b/docs/user/images/export-05.png new file mode 100644 index 0000000..7a59635 Binary files /dev/null and b/docs/user/images/export-05.png differ diff --git a/docs/user/images/export-06.png b/docs/user/images/export-06.png new file mode 100644 index 0000000..112eaf9 Binary files /dev/null and b/docs/user/images/export-06.png differ diff --git a/docs/user/images/export-07.png b/docs/user/images/export-07.png new file mode 100644 index 0000000..f2ec21c Binary files /dev/null and b/docs/user/images/export-07.png differ diff --git a/docs/user/images/export-08.png b/docs/user/images/export-08.png new file mode 100644 index 0000000..2b1c241 Binary files /dev/null and b/docs/user/images/export-08.png differ diff --git a/docs/user/images/export-09.png b/docs/user/images/export-09.png new file mode 100644 index 0000000..c6ebbc5 Binary files /dev/null and b/docs/user/images/export-09.png differ diff --git a/docs/user/images/export-10.png b/docs/user/images/export-10.png new file mode 100644 index 0000000..dafa6e3 Binary files /dev/null and b/docs/user/images/export-10.png differ diff --git a/docs/user/images/export-11.png b/docs/user/images/export-11.png new file mode 100644 index 0000000..58b1801 Binary files /dev/null and b/docs/user/images/export-11.png differ diff --git a/docs/user/images/export-12.png b/docs/user/images/export-12.png new file mode 100644 index 0000000..80db1c0 Binary files /dev/null and b/docs/user/images/export-12.png differ diff --git a/docs/user/images/export-13.png b/docs/user/images/export-13.png new file mode 100644 index 0000000..d275424 Binary files /dev/null and b/docs/user/images/export-13.png differ diff --git a/docs/user/images/export-14.png b/docs/user/images/export-14.png new file mode 100644 index 0000000..c9b960a Binary files /dev/null and b/docs/user/images/export-14.png differ diff --git a/docs/user/images/insert-01.png b/docs/user/images/insert-01.png new file mode 100644 index 0000000..dbdd85e Binary files /dev/null and b/docs/user/images/insert-01.png differ diff --git a/docs/user/images/insert-02.png b/docs/user/images/insert-02.png new file mode 100644 index 0000000..5b2616c Binary files /dev/null and b/docs/user/images/insert-02.png differ diff --git a/docs/user/images/insert-03.png b/docs/user/images/insert-03.png new file mode 100644 index 0000000..06a9ef7 Binary files /dev/null and b/docs/user/images/insert-03.png differ diff --git a/docs/user/images/insert-04.png b/docs/user/images/insert-04.png new file mode 100644 index 0000000..bb4ea15 Binary files /dev/null and b/docs/user/images/insert-04.png differ diff --git a/docs/user/images/insert-05.png b/docs/user/images/insert-05.png new file mode 100644 index 0000000..5e55ede Binary files /dev/null and b/docs/user/images/insert-05.png differ diff --git a/docs/user/images/insert-06.png b/docs/user/images/insert-06.png new file mode 100644 index 0000000..09a8d9d Binary files /dev/null and b/docs/user/images/insert-06.png differ diff --git a/docs/user/images/insert-07.png b/docs/user/images/insert-07.png new file mode 100644 index 0000000..02e1c58 Binary files /dev/null and b/docs/user/images/insert-07.png differ diff --git a/docs/user/images/insert-08.png b/docs/user/images/insert-08.png new file mode 100644 index 0000000..d53874b Binary files /dev/null and b/docs/user/images/insert-08.png differ diff --git a/docs/user/images/insert-09.png b/docs/user/images/insert-09.png new file mode 100644 index 0000000..3084ede Binary files /dev/null and b/docs/user/images/insert-09.png differ diff --git a/docs/user/images/insert-10.png b/docs/user/images/insert-10.png new file mode 100644 index 0000000..59ad433 Binary files /dev/null and b/docs/user/images/insert-10.png differ diff --git a/docs/user/images/insert-11.png b/docs/user/images/insert-11.png new file mode 100644 index 0000000..f3092d5 Binary files /dev/null and b/docs/user/images/insert-11.png differ diff --git a/docs/user/images/insert-12.png b/docs/user/images/insert-12.png new file mode 100644 index 0000000..fab90b8 Binary files /dev/null and b/docs/user/images/insert-12.png differ diff --git a/docs/user/images/insert-13.png b/docs/user/images/insert-13.png new file mode 100644 index 0000000..79da4be Binary files /dev/null and b/docs/user/images/insert-13.png differ diff --git a/docs/user/imagevision.md b/docs/user/imagevision.md new file mode 100644 index 0000000..5cdcdd1 --- /dev/null +++ b/docs/user/imagevision.md @@ -0,0 +1,17 @@ +# 图片理解 + +UAI-Editor 支持对图片内容进行识别,我们可以根据图片内容去生成一段富有创意的文字内容。 + +在文档中选择需要识别的图片,在弹出的浮动菜单中选择视觉处理选项。 + +![](images/imagevision-01.png) + +比如,选择图片介绍,则会在图片下方生成图片的详细内容介绍。 + +![](images/imagevision-02.png) + +如果选择文案生成,则会生成一段富有创意的文案。 + +![](images/imagevision-03.png) + +菜单内容支持自定义。 diff --git a/docs/user/index.html b/docs/user/index.html new file mode 100644 index 0000000..7efb4c2 --- /dev/null +++ b/docs/user/index.html @@ -0,0 +1,56 @@ + + + + + + 有爱文档(UAI-Editor) + + + + + + + +
+ + + + + + + \ No newline at end of file diff --git a/docs/user/inpainting.md b/docs/user/inpainting.md new file mode 100644 index 0000000..c280e9b --- /dev/null +++ b/docs/user/inpainting.md @@ -0,0 +1,27 @@ +# 局部重绘 + +UAI-Editor 支持对插入、生成的图片进行优化,对指定的局部区域进行重新绘制。 + +在文档中选择需要优化的图片,在弹出的浮动菜单中点击图片重绘按钮。 + +![](images/inpainting-01.png) + +在模态对话框中,操作类型选择局部重绘。 + +![](images/inpainting-02.png) + +在图片上涂选需要重新绘制的部分区域。 + +![](images/inpainting-03.png) + +在提示词输入框中输入想要重新绘制的内容。 + +![](images/inpainting-04.png) + +重绘完成后,我们可以从结果中选择一幅自己比较满意的图片,然后点击确定按钮进行确认。 + +![](images/inpainting-05.png) + +最后,文档中的原始图片将会替换为经过局部重新绘制的图片。 + +![](images/inpainting-06.png) diff --git a/docs/user/insert.md b/docs/user/insert.md new file mode 100644 index 0000000..ce96352 --- /dev/null +++ b/docs/user/insert.md @@ -0,0 +1,63 @@ +# 附件插入 + +UAI Editor 提供了多媒体附件数据的插入,支持图片、语音、视频等。这些功能都放置在“插入”选项卡下。 + +## 插入链接 + +选中文本,或者不选择文本数据,点击工具栏中插入链接按钮。 + +![](images/insert-01.png) + +在模态窗口中输入链接地址及显示的文字,点击确定按钮。 + +![](images/insert-02.png) + +在文档中就会新增链接信息,点击链接即可访问。 + +![](images/insert-03.png) + +## 插入图片 + +将光标移动到需要插入图片的位置,点击工具栏中的插入图片按钮。 + +![](images/insert-04.png) + +在文件选择对话框中选择需要插入的图片,点击打开按钮。 + +![](images/insert-05.png) + +等待图片上传、加载。 + +![](images/insert-06.png) + +最后就会在文档中插入图片信息。 + +![](images/insert-07.png) + +## 插入视频 + +将光标移动到需要插入视频的位置,点击工具栏中的插入视频按钮。 + +![](images/insert-08.png) + +在文件选择对话框中选择需要插入的视频,点击打开按钮。 + +![](images/insert-09.png) + +最后就会在文档中插入视频信息。 + +![](images/insert-10.png) + +## 插入音频 + +将光标移动到需要插入音频的位置,点击工具栏中的插入音频按钮。 + +![](images/insert-11.png) + +在文件选择对话框中选择需要插入的音频,点击打开按钮。 + +![](images/insert-12.png) + +最后就会在文档中插入音频信息。 + +![](images/insert-13.png) diff --git a/docs/user/installation.md b/docs/user/installation.md new file mode 100644 index 0000000..d2d9724 --- /dev/null +++ b/docs/user/installation.md @@ -0,0 +1,316 @@ +# 开始使用 + +本节中,我们将介绍如何安装、集成和使用 UAI Editor。 + +我们推荐用户参照我们的最佳实践进行操作。 + +## 运行条件 + +UAI Editor 是基于 Typescript 开发、浏览器访问、AI 驱动的,因此其开发运行环境需要: + +* **开发环境:** 软件开发需要安装:`nodejs`、`npm`等。 +* **运行环境:** 软件运行需要浏览器:`Chrome`、`Edge`、`Firefox`等。 +* **模型部署:** 私有模型部署需要:GPU、Python、Pytorch、IPEX、OPEA、模型权重等。 + +## 软件安装 + +### 基础软件安装 + +首先,我们需要安装 `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 + + + + + + UAI Editor + + + +
+ + + +``` + +* main.ts + +```js +import { UAIEditor } from "uai-editor"; +import "uai-editor/dist/style.css"; + +new UAIEditor({ + element: "#uai-editor", + content: 'UAI Editor 是一个面向 AI 的、现代 UI 风格的下一代富文本编辑器。开箱即用、支持所有前端框架。', +}) +``` + +### 与 VUE 集成 + +```ts + + + +``` + +### 与 React 集成 + +```js +import {useEffect, useRef} from 'react'; +import { UAIEditor } from "uai-editor"; +import "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 ( + <> +
+ + ) +} + +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://internlm-chat.intern-ai.org.cn/puyu/api/v1', + apiKey: process.env.INTERNLM_TOKEN, // 此处填写您上海人工智能实验室的 API Key + model: 'internlm2.5-latest' + }, + "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 run dev +``` + +软件运行成功后,打开浏览器,访问对应的地址,如果是独立运行默认地址是 [http://localhost:5173/](http://localhost:5173/),我们可以看到运行结果。 + +![](images/installation-01.png) + +### 强大的工具栏 + +为了方便用户完成文档内容编辑,UAI Editor 提供了强大的工具栏,集成了常用的功能。 + +#### Ribbon风格 + +我们提供了类似 Microsoft Word 的 Ribbon 风格的工具栏。 + +* 开始 + +![](images/installation-02.png) + +* 插入 + +![](images/installation-03.png) + +* 表格 + +![](images/installation-04.png) + +* 工具 + +![](images/installation-05.png) + +* 页面 + +![](images/installation-06.png) + +* 导出 + +![](images/installation-07.png) + +* 人工智能 + +![](images/installation-08.png) + +#### Classic风格 + +同时我们还提供了传统风格的工具栏,可以无缝切换。 + +* 开始 + +![](images/installation-09.png) + +* 插入 + +![](images/installation-10.png) + +* 表格 + +![](images/installation-11.png) + +* 工具 + +![](images/installation-12.png) + +* 页面 + +![](images/installation-13.png) + +* 导出 + +![](images/installation-14.png) + +* 人工智能 + +![](images/installation-15.png) + + +### 丰富的快捷键 + +为了方便用户快速完成文档内容编辑,UAI Editor 提供了丰富的快捷键。 + +* **基本会话** + +| 命令 | Windows/Linux | macOS | +| ----- | ----- | ----- | +| 复制 | `Control` + `C` | `Cmd` + `C` | +| 剪切 | `Control` + `X` | `Cmd` + `X` | +| 粘贴 | `Control` + `V` | `Cmd` + `V` | +| 无格式粘贴 | `Control` + `Shift` + `V` | `Cmd` + `Shift` + `V` | +| 撤销 | `Control` + `Z` | `Cmd` + `Z` | +| 重做 | `Control` + `Shift` + `Z` | `Cmd` + `Shift` + `Z` | +| 添加换行 | `Shift` + `Enter` | `Shift` + `Enter` | + +* **文本格式化** + +| 命令 | Windows/Linux | macOS | +| ----- | ----- | ----- | +| 粗体 | `Control` + `B` | `Cmd` + `B` | +| 斜体 | `Control` + `I` | `Cmd` + `I` | +| 下划线 | `Control` + `U` | `Cmd` + `U` | +| 删除线 | `Control` + `Shift` + `S` | `Cmd` + `Shift` + `S` | +| 文本高亮 | `Control` + `Shift` + `H` | `Cmd` + `Shift` + `H` | +| 行内代码 | `Control` + `E` | `Cmd` + `E` | + +* **段落格式化** + +| 命令 | Windows/Linux | macOS | +| ----- | ----- | ----- | +| 应用普通文本样式 | `Control` + `Alt` + `0` | `Cmd` + `Alt` + `0` | +| 应用标题样式 1 | `Control` + `Alt` + `1` | `Cmd` + `Alt` + `1` | +| 应用标题样式 2 | `Control` + `Alt` + `2` | `Cmd` + `Alt` + `2` | +| 应用标题样式 3 | `Control` + `Alt` + `3` | `Cmd` + `Alt` + `3` | +| 应用标题样式 4 | `Control` + `Alt` + `4` | `Cmd` + `Alt` + `4` | +| 应用标题样式 5 | `Control` + `Alt` + `5` | `Cmd` + `Alt` + `5` | +| 应用标题样式 6 | `Control` + `Alt` + `6` | `Cmd` + `Alt` + `6` | +| 有序列表 | `Control` + `Shift` + `7` | `Cmd` + `Shift` + `7` | +| 无序列表 | `Control` + `Shift` + `8` | `Cmd` + `Shift` + `8` | +| 任务列表 | `Control` + `Shift` + `9` | `Cmd` + `Shift` + `9` | +| 块引用 | `Control` + `Shift` + `B` | `Cmd` + `Shift` + `B` | +| 左对齐 | `Control` + `Shift` + `L` | `Cmd` + `Shift` + `L` | +| 居中对齐 | `Control` + `Shift` + `E` | `Cmd` + `Shift` + `E` | +| 右对齐 | `Control` + `Shift` + `R` | `Cmd` + `Shift` + `R` | +| 分散对齐 | `Control` + `Shift` + `J` | `Cmd` + `Shift` + `J` | +| 代码块 | `Control` + `Alt` + `C` | `Cmd` + `Alt` + `C` | +| 下标 | `Control` + `,` | `Cmd` + `,` | +| 上标 | `Control` + `.` | `Cmd` + `.` | + +* **文本选择** + +| 命令 | Windows/Linux | macOS | +| ----- | ----- | ----- | +| 全选 | `Control` + `A` | `Cmd` + `A` | +| 将所选内容向左扩展一个字符 | `Shift` + `←` | `Shift` + `←` | +| 将所选内容向右扩展一个字符 | `Shift` + `→` | `Shift` + `→` | +| 将选区向上扩展一行 | `Shift` + `↑` | `Shift` + `↑` | +| 将选区向下扩展一行 | `Shift` + `↓` | `Shift` + `↓` | diff --git a/docs/user/introduce.md b/docs/user/introduce.md new file mode 100644 index 0000000..e92715a --- /dev/null +++ b/docs/user/introduce.md @@ -0,0 +1,41 @@ +# 项目简介 + +UAI Editor 是一个基于 Typescript 的适合于国人使用的纯前端文档编辑器。UAI Editor 提供完善的文档编辑能力和 AI 创作能力,支持 Markdown 语法,支持基础的富文本编辑功能,支持插入多种格式的节点类型、提供了多种类型的实用工具。 + +作为一个独立的纯前端文档编辑器,UAI Editor 可以轻松无缝集成到 Vue、React、Layui、Angular 等几乎任何前端框架。 + +## 与众不同 + +### 场景丰富 + +* 无论您是:金融、教育、医疗、零售、互联网还是传统行业。 +* 无论您是:文章创作、会议记录、学术论文还是知识库管理。 +* 即便是个人笔记整理,UAI Editor 都能成为您得力的助手。 + +### 功能全面 + +* **基础:** 标题、正文、字体、字号、加粗、斜体、下划线、删除线、链接、行内代码、上标、下标、分割线、引用... +* **增强:** 撤销、重做、格式刷、橡皮擦、字体颜色、背景颜色、对齐方式、行高、待办事项、有(无)序列表、段落缩进... +* **附件:** 支持图片、语音、视频、文件功能,支持选择上传、支持拖动调整大小... +* **Markdown:** 标题、引用、表格、图片、代码块、高亮块、各种列表、粗体、斜体、删除线... +* **AI:** AI 续写、AI 优化、AI 校对、AI 翻译、自定义 AI 菜单及其 Prompts... +* **更多:** 国际化、主题切换... + +### 简单易用 + +* UAI Editor 基于 Web Component 开发,支持与任意主流的前端框架集成。 +* UAI Editor 提供了友好的 UI 界面,强大的工具栏支持,助您轻松实现文档编辑。 +* UAI Editor 提供了便捷的快捷键支持,让您的文档编辑快人一步。 + +### AI 驱动 + +* UAI Editor 旨在解决 Web 应用中文档编辑的复杂性,提供类似 Microsoft Word 的强大编辑能力,同时保持 Web 应用的便捷性。 +* UAI Editor 打造了一个完全由 AI 驱动的富文本编辑器,同时支持对接任意大模型,包括私有的大模型。 +* UAI Editor 支持全模态大模型,包括文本生成、语音识别、语音生成、文生图、图生图、局部重绘、图片理解、文生视频、图生视频、视频理解等。 +* UAI Editor 私有模型适配多种环境,包括英伟达显卡、天数智芯显卡、Pytorch、IPEX等,同时支持OPEA服务编排。 + +## 项目架构 + +软件架构如图: + +![](images/architecture.png) diff --git a/docs/user/text2image.md b/docs/user/text2image.md new file mode 100644 index 0000000..63dd8c1 --- /dev/null +++ b/docs/user/text2image.md @@ -0,0 +1,35 @@ +# 文生图片 + +UAI Editor 支持与大模型进行对话,生成图片,这些功能包含两部分:边写边画 和 快捷命令。 + +## 边写边画 + +在人工智能选项卡下,点击工具栏中的边写边画按钮。 + +![](images/text2image-01.png) + +在打开的对话面板界面,我们可以选择用来生成图片的后端模型服务,IPEX、OPEA、其他公有或私有化部署的文生图模型都可以。 + +![](images/text2image-02.png) + +图片生成结果将会展示在对话窗口中。 + +![](images/text2image-03.png) + +鼠标移动到图片结果上,可以展示出操作菜单,通过操作菜单我们可以将生成的图片插入到文档中。 + +![](images/text2image-04.png) + +将在文档中的光标之后插入生成的图片。 + +![](images/text2image-05.png) + +## 快捷命令 + +除了通过对话面板进行图片生成,我们还提供了与图片生成的快捷命令。将光标移动到文档中需要插入图片的地方,输入空格+斜线:` /` 可以弹出快捷命令。 + +![](images/text2image-06.png) + +选择AI生图,会在光标后插入生成的图片。 + +![](images/text2image-07.png) diff --git a/docs/user/tts.md b/docs/user/tts.md new file mode 100644 index 0000000..f7f247d --- /dev/null +++ b/docs/user/tts.md @@ -0,0 +1,15 @@ +# 语音生成 + +UAI Editor 支持将单模态的文本内容转换成富有表现力的语音数据。 + +将光标移动到文档中需要将文本转换成语音的地方,输入空格+斜线:` /` 可以弹出快捷命令。 + +![](images/tts-01.png) + +然后,我们选择AI朗读,并等待结果。 + +![](images/tts-02.png) + +最后,生成的语音结果将会展示在光标位置之后。 + +![](images/tts-03.png) diff --git a/src/main.ts b/src/main.ts index b05cb39..d034655 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,9 +4,97 @@ import { UAIEditor } from "./core/UAIEditor.ts"; new UAIEditor({ element: "#uai-editor", - content: `> UAI Editor 是一个面向 AI 的、现代 UI 风格的下一代富文本编辑器。开箱即用、支持所有前端框架。\n\n + content: ` +> 💪打造现代 UI 风格、面向 AI 的最强、最轻量级的个人&团队文档。 +> UAI Editor 是一个面向 AI 的、现代 UI 风格的下一代富文本编辑器。开箱即用、支持所有前端框架。 + +# UAI Editor:有爱文档,有爱、有AI、有UI。 -# 冬日游记 +- **【全行业】** 无论您是:金融、教育、医疗、零售、互联网还是传统行业。 +- **【全场景】** 无论您是:文章创作、会议记录、学术论文还是知识库管理。 +- **【全功能】** 功能丰富:文本编辑、格式排版、多媒体插入、表格制作等。 +- **【全模态】** 人工智能:文字、语音、图片、视频,全模态功能创作体验。 + +## 与众不同 + +UAI Editor 提供了完善的文档编辑能力和 AI 创作能力,支持 Markdown 语法,支持基础的富文本编辑功能,支持插入多种节点类型,提供了多种类型的实用工具。作为一个独立的纯前端文档编辑器,UAI Editor 可以轻松无缝集成到 Vue、React、Layui、Angular 等几乎任何前端框架。 + +### 场景丰富 + +* 无论您是:金融、教育、医疗、零售、互联网还是传统行业。 +* 无论您是:文章创作、会议记录、学术论文还是知识库管理。 +* 即便是个人笔记整理,UAI Editor 都能成为您得力的助手。 + +### 功能全面 + +* **基础:** 标题、正文、字体、字号、加粗、斜体、下划线、删除线、链接、行内代码、上标、下标、分割线、引用... +* **增强:** 撤销、重做、格式刷、橡皮擦、字体颜色、背景颜色、对齐方式、行高、待办事项、有(无)序列表、段落缩进... +* **附件:** 支持图片、语音、视频、文件功能,支持选择上传、支持拖动调整大小... +* **Markdown:** 标题、引用、表格、图片、代码块、高亮块、各种列表、粗体、斜体、删除线... +* **AI:** AI 续写、AI 优化、AI 校对、AI 翻译、自定义 AI 菜单及其 Prompts... +* **更多:** 国际化、主题切换... + +### 简单易用 + +* UAI Editor 基于 Web Component 开发,支持与任意主流的前端框架集成。 +* UAI Editor 提供了友好的 UI 界面,强大的工具栏支持,助您轻松实现文档编辑。 +* UAI Editor 提供了便捷的快捷键支持,让您的文档编辑快人一步。 + +### AI 驱动 + +* UAI Editor 旨在解决 Web 应用中文档编辑的复杂性,提供类似 Microsoft Word 的强大编辑能力,同时保持 Web 应用的便捷性。 +* UAI Editor 打造了一个完全由 AI 驱动的富文本编辑器,同时支持对接任意大模型,包括私有的大模型。 +* UAI Editor 支持全模态大模型,包括文本生成、语音识别、语音生成、文生图、图生图、局部重绘、图片理解、文生视频、图生视频、视频理解等。 +* 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/) 平台,可以直接通过以下命令安装: + +\` +npm i @uai-team/uai-editor +\` + +## 软件集成 + +然后,我们可以将 UAI Editor 与自己的项目进行集成。 + +作为一个独立的纯前端文档编辑器,UAI Editor 可以独立使用,也可以轻松无缝集成到 Vue、React、Layui、Angular 等几乎任何前端框架。 + +## 软件运行 + +最后,我们需要运行项目,执行以下命令可以运行项目或自己的项目: + +\`npm i && npm run dev\` + +## 开源优势 + +* **免费使用:** 作为开源项目,UAI Editor 采用 [MIT 许可证](LICENSE) 对所有用户免费开放,无需担心版权问题。 + +* **持续更新:** UAI Editor 将持续迭代,不断优化功能,提升用户体验。 + +* **定制开发:** 开发者可根据项目需求进行定制化开发,打造专属的文档编辑器。 + +## 支持我们 + +如果您觉得 UAI Editor 有用,请考虑通过以下方式支持我们: + +* ⭐ 给 UAI Editor 仓库 点个 Star,表示对项目的支持。 +* 🔗 如果您在项目中使用了 UAI Editor,请添加一个链接到 [https://gitee.com/uai-team/uai-editor](https://gitee.com/uai-team/uai-editor) 或者 [https://github.com/uai-team/uai-editor](https://github.com/uai-team/uai-editor)。 +* ⛓️ UAI Editor 很多功能还存在不足,如果您感兴趣,欢迎优化 PR。 + + +# 功能演示 北风呼啸,白雪皑皑,冬日踏上了这片宁静的大地。我独自一人,踏着轻盈的步伐,走进了这个银装素裹的世界,去感受那冬日的诗意与宁静。 @@ -30,9 +118,21 @@ new UAIEditor({ models: { "default": { modelType: 'openai', - baseUrl: 'https://open.bigmodel.cn/api/paas/v4', - apiKey: process.env.CHATGLM_APIKEY, - model: 'glm-4-flash' + baseUrl: 'http://localhost:5050/proxy/internlm/v1', + apiKey: 'EMPTY', + model: 'internlm2.5-latest' + }, + "【ProxyInternLM】InternLM2.5": { + modelType: 'openai', + baseUrl: 'http://localhost:5050/proxy/internlm/v1', + apiKey: 'EMPTY', + model: 'internlm2.5-latest' + }, + "【ProxyModelScope】DeepSeek-V3": { + modelType: 'openai', + baseUrl: 'http://localhost:5050/proxy/modelscope/v1', + apiKey: 'EMPTY', + model: 'deepseek-ai/DeepSeek-V3' }, "GLM-4": { modelType: 'openai',