全新AI富文本编辑器 AiEditor

789 阅读3分钟

image-20240709142234210

AiEditor 是一个面向 AI 的下一代富文本编辑器,它基于 Web Component 开发,因此支持 Layui、Vue、React、Angular、Svelte 等几乎任何前端框架。她适配了 PC Web 端和手机端,并提供了 亮色 和 暗色 两个主题。除此之外,她还提供了灵活的配置,开发者可以方便的使用其开发任何文字编辑的应用。

与 CKEditor、TinyMCE 和 Tiptap 等现有编辑器相比,AiEditor 在开源协议、定制化和 AI 功能费用方面有显著优势,还支持通过私人 API Key 对接多种大模型。AiEditor 正在不断演进,已在 Gitee 和 GitHub 上开源。

官方地址 aieditor.dev/zh/

AiEditor 的定位

  1. 开发 AiEditor 的初衷,本身是为了解决 AI 编辑问题的。所以,在 AI 方面,AiEditor 支持使用私有的 ApiKey 对接任何的大模型,包括 ChatGPT、讯飞星火、文心一言以及任何的私有化大模型。
  2. 希望 AiEditor 拥有更多的使用场景,不受限于任何的 UI 渲染框架,比如 Vue、React、Angular、Svelte 等。 因此AiEditor是基于 Web Component 开发的,它可以很好的和任何框架集成。
  3. 提供了友好的 UI 页面,支持亮色和暗色两个主题,支持使用 Markdown 的书写习惯、支持灵活的功能配置以及自定义布局,以及使用了比 CKEditor 和 TinyMCE 更加友好的开源协议 LGPL。
  4. 除此之外,AiEditor会继续学习优秀的产品,比如 Notion 等,为大家提供一些列的好用的 AI 功能... 当然,目前 AiEditor 还在持续进化中,

开源

经过一段时间的开发,AiEditor 终于发布了第一个开源版本,而且它已经有了一个编辑器该有的基本功能,比如:

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

接下来,我们还会推出一系列功能,比如:

  • 团队协作
  • AI 插入图片
  • AI 图生图(AI 图片优化)
  • AI 一键排版
  • 进一步强化粘贴功能
  • 上传视频自动获取缩略图
  • WORD 导入、导出
  • PDF 导出、PDF 预览
  • 类 Notion 拖拽功能
  • 等等

让我们一起见证,一个更好的文本编辑器。

开源地址

使用

安装:

npm i aieditor

使用:

<template>
    <div>
        <h1>AiEditor,一个面向 AI 的富文本编辑器</h1>
    </div>
    <div ref="divRef" style="height: 600px"/>
</template><script lang="ts">
    import {AiEditor} from "aieditor";
    import "aieditor/dist/style.css"
    export default {
        mounted(){
            new AiEditor({
                element: this.$refs.divRef as Element,
                placeholder: "点击输入内容...",
                content: 'AiEditor 是一个面向 AI 的开源富文本编辑器。 ',
            })
        }
    }
</script>