前端插件扩展（一）

最新推荐文章于 2024-08-09 07:19:22 发布

Lamour99

最新推荐文章于 2024-08-09 07:19:22 发布

阅读量414

点赞数 3

分类专栏：前端插件扩展

本文链接：https://blog.csdn.net/Lamour99/article/details/119390929

版权

本文介绍了如何基于tui.editor开发Vue组件，扩展了后台图片上传和全屏显示功能。文章提供安装步骤、组件代码及使用方法，强调了组件化的便利性，并列举了组件可用的props属性及其说明。

摘要由CSDN通过智能技术生成

tui.editor

tui.editor 编辑器支持markdown与标准富文本内容的编辑器

下面基于tui-editor开发的VUE组件，扩展了以下几个功能

支持后台图片上传而不使用默认的base64
添加了全屏显示按钮
请自行处理上传的 axios 逻辑
请自行配置后台逻辑

首先安装扩展包

npm install --save tui-editor

组件代码

然后创建Lamour-editor.vue组件文件

<template>
    <div :id="id"></div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
import axios from 'plugins/axios'

//编辑器
import Editor from '@toast-ui/editor'
import '@toast-ui/editor/dist/toastui-editor.css'

const props = defineProps({
    modelValue: String,
    action: { type: String, default: `/upload` },
    id: { type: String, default: `houdunren-editor` },
    type: {