naive-ui-ai-editor文档

介绍

naive-ui-ai-editor是基于naive-ui、aieditor封装的富文本组件。

安装

npm i naive-ui-ai-editor

使用

全局导入

import { createApp } from 'vue'
import App from './App.vue'
import NaiveUiAiEditor from 'naive-ui-ai-editor'
import 'naive-ui-ai-editor/dist/index.css'

const app = createApp(App)
app.use(NaiveUiAiEditor, {
  /* options */
})

局部导入

<template>
  <NaiveUiAiEditor v-model:value="value" style="height: 600px"></NaiveUiAiEditor>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { NaiveUiAiEditor } from 'naive-ui-ai-editor'
import 'naive-ui-ai-editor/dist/style.css'

const value = ref('')
</script>

<style scoped></style>

props

interface Props {
  value: string
  placeholder?: string
  hideToolbarKeys?: string[] // 隐藏工具栏的按键
  requestFunc?: RequestFun //上传的方法，需要返回Primise<string>
  link?: AiEditorOptions['link'] // https://aieditor.dev/zh/config/link.html
  fontFamily?: AiEditorOptions['fontFamily'] // https://aieditor.dev/zh/config/fontFamily.html
  fontSize?: AiEditorOptions['fontSize'] // https://aieditor.dev/zh/config/fontSize.html
  ai?: AiEditorOptions['ai'] // https://aieditor.dev/zh/ai/base.html
  onMentionQuery?: AiEditorOptions['onMentionQuery'] // https://aieditor.dev/zh/config/mention.html
}

requestFunc字段定义类型如下：

type RequestFun = (file: File) => Promise<string>

可以在全局注册传入requestFunc，也可在naive-ui-ai-editor的props传入。props优先级最高。

app.use(NaiveUiAiEditor, {
  requestFunc: xxx
})

也可以通过provide注入：

import { provideKey } from 'naive-ui-ai-editor'
app.provide(provideKey, function)

提示

如果没有找到requestFunc，naive-ui-ai-editor会报错