龙空技术网

国产开源 AI 富文本编辑器

墨林码农 335

前言:

现在咱们对“富文本编辑器实现”大体比较注意,兄弟们都想要学习一些“富文本编辑器实现”的相关内容。那么小编在网摘上网罗了一些对于“富文本编辑器实现””的相关知识,希望各位老铁们能喜欢,看官们快快来学习一下吧!

墨林码农专注分享开源项目, 精选开源社区技术干货,分享Github、Gitee上有趣、有价值的项目,一起学习,一起成长。

简介

国产开源的 AI 编辑器:AiEditor,一个面向 AI 的富文本编辑器,基于 Web Component,支持 Layui、Vue、React、Angular 等几乎任何前端框架。适配 PC Web 端和移动端,提供 亮色 和 暗黑 主题。此外还提供了灵活的配置,开发者可以方便地使用其开发任何文字编辑的应用。

✨功能预览基础:标题、正文、字体、字号、下划线、删除线、链接、行内代码、加粗、斜体、上标、下标、分割线、引用、打印表格:左增右增、上减下减、合并单元格、左减右减、上增下增、解除合并附件:支持视频、图片、文件功能,支持选择粘贴上传、拖拽上传、支持拖动调整大小...代码:代码块、行内代码、代码语言选择增强:撤回、重做待办事项、字体颜色、背景颜色、Emoji 表情、、行高、有(无)序列表、对齐方式、、格式刷、橡皮擦段落缩进、强制换行支持亮色主题、暗色主题支持手机适配、全屏编辑、@某某某(提及)等AI:AI 续写、、AI 翻译、AI 校对、AI 优化自定义 AI 菜单及其 Prompts

效果预览:

本地安装

npm 安装,命令如下:

npm i aieditor

代码初始化:

new AiEditor({    element: "#aiEditor",    placeholder: "点击输入内容...",    content: 'AiEditor 是一个面向 AI 的开源富文本编辑器。',    ai: {        model: {            xinghuo: {                appId: "***",                apiKey: "***",                apiSecret: "***",            }        }    }})
本地构建运行

1、使用Git命令拉拉取最新的源码

git clone  aieditor

2、安装依赖

npm install

3、修改 src/main.ts 内容如下:

new AiEditor({    element: "#aiEditor",    placeholder: "点击输入内容...",    content: 'AiEditor 是一个面向 AI 的开源富文本编辑器。',    ai: {        model: {            xinghuo: {                appId: "***",                apiKey: "***",                apiSecret: "***",            }        }    }})

或者直接移除 AI 的配置,如下所示(移除后,则不能使用 AI 功能):

new AiEditor({    element: "#aiEditor",    placeholder: "点击输入内容...",    content: 'AiEditor 是一个面向 AI 的开源富文本编辑器。',})

4、执行命令如下命令运行

npm run dev
AI 功能配置

1、去科大讯飞注册账号

地址:

2、添加科大讯飞星火大模型的相关配置

在科大讯飞服务管理中获取 appId、apiKey、apiSecret。

地址:

new AiEditor({    element: "#aiEditor",    placeholder: "点击输入内容...",    content: 'AiEditor 是一个面向 AI 的开源富文本编辑器。',    ai: {        model: {            xinghuo: {                appId: "***",                apiKey: "***",                apiSecret: "***",            }        }    }})
结束语

几个简单的字符,就能创造出欢乐,

几个简单的号码,便能写出奇迹。

一个键盘,就能畅游世界,

一根网线,便能知晓天下。

创作不易,感谢大家的支持。后续也会分享更多的干货和技术资讯,您的阅读就是对小编的支持,再次感谢各位老铁!

标签: #富文本编辑器实现