naive-ui-components

Appearance

naive-ui-editor文档 ​

介绍 ​

naive-ui-editor是基于wangEditor 5封装的一个富文本组件，另有用到naive-ui的n-spin

wangEditor 5开源 Web 富文本编辑器，开箱即用，配置简单。支持 JS Vue React 。

安装 ​

bash
pnpm add naive-ui-editor

也可以使用npm、yarn等安装。

使用 ​

局部导入 ​

vue
<template>
  <NaiveUiEditor
    v-model:value="content"
    :requestFunc="handleUpload"
  ></NaiveUiUpload>
</template>

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

const content = ref<string | null>(null)
function handleUpload() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('https://picsum.photos/200/300')
    }, 1000)
  })
}
</script>

<style scoped></style>

全局导入 ​

ts
import { createApp } from 'vue'
import 'naive-ui-editor/dist/style.css'
import NaiveUiEditor from 'naive-ui-editor'

const app = createApp(App)
app.use(NaiveUiEditor, {
  requestFunc() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve('https://picsum.photos/200/300')
      }, 1000)
    })
  }
})

props ​

字段类型描述必传默认值
modestring富文本模式否default
heightnumber富文本高度否500
disabledboolean富文本是否禁用逻辑：先判断该字段，再判断injectForm?.props?.disabled否-
requestFuncFunction，见下方说明上传文件的函数否-
v-model:valuestring富文本内容，需要双向绑定是
toolbarConfigObject，见下方说明菜单栏配置否
editorConfigObject，同上富文本配置否见下方

requestFunc字段定义类型如下：

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

toolbarConfig和editorConfig字段定义类型如下：
具体见wangEditor

editorConfig字段默认值如下：

ts
editorConfig: {
  placeholder: '请输入内容...',
  MENU_CONF: {},
}

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

也可以通过provide注入：

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

提示

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