AiEditor 是一个为 AI 时代设计的富文本编辑器，它提供灵活的配置、强大的 AI 功能和友好的开源协议，并且多端适配，旨在满足现代开发需求。无论是个人开发者还是企业用户，都可以利用 AiEditor 来创建功能丰富的文本编辑应用
包含功能
Vue中使用
<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>React中使用
import {useEffect, useRef} from 'react'
import {AiEditor} from "aieditor";
import "aieditor/dist/style.css"
function App() {
//定义 ref
const divRef = useRef(null);
//初始化 AiEditor
useEffect(() => {
if (divRef.current) {
const aiEditor = new AiEditor({
element: divRef.current,
placeholder: "点击输入内容...",
content: 'AiEditor 是一个面向 AI 的开源富文本编辑器。 ',
})
return ()=>{
aiEditor.destroy();
}
}
}, [])
return (
<>
<div>
<h1>AiEditor，一个面向 AI 的富文本编辑器</h1>
</div>
<div ref={divRef} style={{height: "600px"}} />
</>
)
}
export default App原生JS中使用
<!doctype html>
<html lang="en">
<head>
<title>AiEditor Demo</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link type="text/css" rel="stylesheet" href="aieditor/style.css">
<script type="module">
import {AiEditor} from 'aieditor/index.js'
new AiEditor({
element: "#aiEditor",
placeholder: "点击输入内容...",
content: 'AiEditor 是一个面向 AI 的下一代富文本编辑器。',
ai: {
models: {
spark: {
appId: "***",
apiKey: "***",
apiSecret: "***",
}
}
},
})
</script>
</head>
<body>
<div id="aiEditor" style="height: 550px; margin: 20px"></div>
</body>
</html>《前端资源推荐》收集各种前端组件 UI 框架、JS 插件工具、中后台系统模板、动画库、低代码、可视化资源、开源项目、学习资源、特效源码等，如有其他优秀资源，欢迎发消息投稿，感谢点赞、转发、关注！！！
GitHub：https://github.com/aieditor-team/aieditor
官方文档：https://aieditor.dev
本文暂时没有评论，来添加一个吧(●'◡'●)