Vusui-editor 富文本编辑器

属性参数

本节将介绍 vusui-editor 的属性参数使用方法。

Delta 使用说明

⚠️ 注意

delta 类型需要 quill-delta 支持。 vusui-editor 已集成 quill-delta

Content 内容

编辑器内容，支持类型：string | delta

HTML 类型

<!-- html 类型 -->
<template>
  <vusui-editor content-type="html" v-model:content="content" />
</template>

<script setup>
const content = '你好, <strong>Vusui</strong>';
</script>

TEXT 类型

<!-- text 类型 -->
<template>
  <vusui-editor content-type="text" v-model:content="content" />
</template>

<script setup>
const content = '你好, Vusui';
</script>

DELTA 类型

<!-- delta 类型 -->
<template>
  <vusui-editor content-type="delta" v-model:content="content" />
</template>

<script setup>
const content = {
  ops: [
    { insert: '你好, ' },
    { insert: 'Vusui', attributes: { bold: true } },
    { insert: '\n' }
  ];
};
</script>

ContentType 内容类型

编辑器内容类型，支持三种格式：delta | html | text

<template>
  <vusui-editor content-type="html" />
</template>

Theme 主题

支持两个主题：snow | bubble

<template>
  <vusui-editor theme="snow" />
</template>

💡 提示

vusui-editor 支持夜间模式，只要在 html 添加 dark 样式类名即可。例如：

<html class="dark"></html>

Disabled 禁用

是否禁用编辑器，Boolean: true | false

<template>
  <vusui-editor :disabled="true" />
</template>

ReadOnly 只读模式

是否只读模式，Boolean: true | false

<template>
  <vusui-editor :read-only="true" />
</template>

Placeholder 占位符

编辑器占位符

<template>
  <vusui-editor placeholder="请输入内容..." />
</template>

Toolbar 工具栏

编辑器工具栏，支持三种格式：string | array | object

String 类型，可用值: essential | minimal | full

<template>
  <vusui-editor toolbar="essential" />
</template>

Array 类型

<template>
  <vusui-editor :toolbar="['bold', 'italic', 'underline']" />
</template>

Modules 模块定制

自定义编辑器模块：

# yarn
yarn add quill-blot-formatter

# npm
npm install quill-blot-formatter --save

<template>
  <vusui-editor :modules="modules" />
</template>

<script setup>
import BlotFormatter from 'quill-blot-formatter';

const modules = {
  name: 'blotFormatter',
  module: BlotFormatter,
  options: {
    /* options */
  }
};
</script>

Options 参数

编辑器配置参数，详细的参数请参考 Quilljs 官方。

<template>
  <vusui-editor :options="options" />
</template>

<script setup>
const options = {
  debug: 'info',
  modules: {
    toolbar: ['bold', 'italic', 'underline']
  },
  placeholder: '请输入内容...',
  readOnly: true,
  theme: 'snow'
};
</script>

Height 高度

编辑器高度设置，默认值：400

<template>
  <vusui-editor :height="400" />
</template>

ShowDrag 拖拽高度

是否显示拖拽高度功能，Boolean: true | false

<template>
  <vusui-editor :show-drag="true" />
</template>

💡 提示

最小拖拽高度 100px，最大拖拽高度 800px