一、wangEditor官网地址
二、安装插件依赖
npm i @wangeditor/editor @wangeditor/editor-for-vue
安装成功后在package-lock.json中可以看到:
三、页面中使用
3.1、template中:
<el-form-item label="文本内容:" prop="desc">
<!-- 富文本 -->
<div style="border: 1px solid #dcdfe6; width: 100%; border-radius: 4px; margin-bottom: 10px">
<toolbar
style="border-bottom: 1px solid #dcdfe6; width: 100%; border-radius: 4px"
:editor="editorRef"
:default-config="toolbarConfig"
mode="default"
/>
<editor
v-model="ruleForm.desc"
style="height: 300px; overflow-y: hidden"
:default-config="editorConfig"
mode="default"
@onCreated="onCreated"
/>
</div>
</el-form-item>
3.2、script标签中引入:
import '@wangeditor/editor/dist/css/style.css'; // css样式
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import {nextTick,shallowRef} from "vue"
3.3、创建编辑器实例同样写在script标签里边
// 富文本实例对象
const editorRef = shallowRef()
// 菜单配置
const toolbarConfig = ref({})
// 编辑器配置
const editorConfig = ref({
placeholder: '请输入文本内容...',
readOnly: false, // 只读
MENU_CONF: {
// 配置上传图片
uploadImage: {
server: '#', // 配置图片上传地址
maxFileSize: 2 * 1024 * 1024, // 10M 图片大小限制
fieldName: 'multipartFile', // 上传名字
allowedFileT