AI时代下的富文本编辑器，前端小伙伴抓紧用起来！

最新推荐文章于 2025-04-22 23:10:31 发布

AI360labs_atyun

最新推荐文章于 2025-04-22 23:10:31 发布

阅读量1.1k

点赞数 15

文章标签：人工智能前端 java javascript word

本文链接：https://blog.csdn.net/AI360labs_atyun/article/details/144826425

版权

AiEditor

AiEditor 是一个面向 AI 的下一代富文本编辑器。

它基于 Web Component 开发，因此支持 Layui、Vue、React、Angular、Svelte 等几乎任何前端框架。

它适配了 PC Web 端和手机端，并提供了亮色和暗色两个主题。

它提供了灵活的配置，开发者可以方便的使用其开发任何文字编辑的应用。

敲重点！！！AiEditor支持使用私有ApiKey与各种大模型进行对接，包括ChatGPT、讯飞星火、文心一言以及任何私有化大模型。

官网：https://aieditor.dev/zh/

当别人的前端还停留在简单的文字编辑阶段的时候，你的前端已经用上了AI文本编辑，那简直泰酷辣！！！😎

各种功能应有尽有

快速上手

安装


npm i aieditor

使用


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

与 Vue3 整合

<template>
  <div>
    <h1>AiEditor，一个面向 AI 的富文本编辑器</h1>
  </div>
  <div ref="divRef" style="height: 600px"/>
</template>

<script setup lang="ts">
  import {AiEditor} from "aieditor";
  import "aieditor/dist/style.css"
  import {onMounted, onUnmounted, ref} from "vue";

  const divRef = ref();
  let aiEditor: AiEditor | null = null;

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

  onUnmounted(() => {
    aiEditor && aiEditor.destroy();
  })
</script>

功能演示

自定义布局

默认情况下，AiEditor 在初始化的时候，会创建编辑器的头部菜单、编辑区域以及底部的字数显示区域