elementui 富文本
时间: 2023-08-28 13:07:57 浏览: 64
ElementUI 提供了一个富文本编辑器组件 `ElEditor`,可以用于编辑和展示富文本内容。该组件基于 `Quill` 富文本编辑器封装而成,支持自定义配置和样式。
使用方法如下:
1. 安装 `Quill` 和 `ElementUI`:
```bash
npm install quill element-ui
```
2. 引入 `Quill` 样式文件和 `ElementUI` 组件:
```js
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import { ElEditor } from 'element-ui'
```
3. 在模板中使用 `ElEditor` 组件:
```html
<template>
<el-editor v-model="content" :options="editorOptions" />
</template>
```
其中,`v-model` 绑定的是编辑器的内容,`options` 属性可以传入自定义配置项。例如:
```js
export default {
data() {
return {
content: '',
editorOptions: {
placeholder: '请输入内容',
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
[{ list: 'ordered' }, { list: 'bullet' }],
[{ indent: '-1' }, { indent: '+1' }],
[{ align: [] }],
['link', 'image'],
],
},
},
}
},
}
```
以上代码配置了一个基本的编辑器,包括加粗、斜体、下划线、删除线、有序列表、无序列表、缩进、对齐、链接和图片等操作。
更多配置项和 API 可以参考 `Quill` 官方文档:https://quilljs.com/docs/quickstart/