avue 富文本avue-form ，avue-crud 及独立使用的详细介绍

小四是个处女座

已于 2022-10-24 16:49:53 修改

阅读量2.9k

点赞数

分类专栏： avue vue 文章标签： javascript 前端 vue.js 1024程序员节

于 2022-10-21 17:14:29 首次发布

本文链接：https://blog.csdn.net/xiaosi1413/article/details/127449493

版权

vue 同时被 2 个专栏收录

64 篇文章 1 订阅

订阅专栏

avue

10 篇文章 1 订阅

订阅专栏

本文介绍了如何在Avue框架的formavue-crud组件中集成富文本编辑器，并演示了如何配置以便支持图片上传。步骤包括安装UEditor插件、在option中设置组件和配置上传路径。独立使用Avue富文本时，也展示了如何在列表项中嵌入编辑器并配置上传选项。

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

介绍如何在 avue-form avue-crud 及独立使用 avue 里的富文本，且可上传图片

在 avue-form avue-crud 如何使用富文本

安装命令 avue

npm install avue-plugin-ueditor --save

main.js 文件
在这里插入图片描述
备注：main.js 文件已经将富文本注册到全局，无需再次引入

avue-form 与 avue-crud 使用富文本只要在option里配置上就可以,上传图片需要在富文本里配置上传路径案例如下

以avue-form 为例

<template>
  <basic-container>
    <avue-form :option="option" v-model="form" @submit="handleSubmit">
    </avue-form>
  </basic-container>
</template>
    
    <script>
import { getforFree,} from "@/api/activity/login";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      form: {},
      query: {},
      codeApiList: "",
      option: {
        labelWidth: 120,
        column: [
          {
            labelWidth: 20,
            type: "title",
            prop: "titleName",
            span: 24,
          }，
          {
            label: "说明文字",
            prop: "descriptiveText",
            component: "AvueUeditor",
            options: {
              action: "/api/blade-resource/oss/endpoint/put-file",
              props: {
                res: "data",
                url: "link",
              },
            },
            span: 24,
          },
        ],
      },
    };
  },
},

[富文本效果](https://img-blog.csdnimg.cn/07f784c9acc14598955e3a1d86f974e1.png
在这里插入图片描述

独立使用avue 富文本

<template>
  <basic-container>
      <div
        v-for="(item, index) in pay"
        :key="item.id"
        style="padding: 20px; margin-top: 10px; border-radius: 6px"
        @click="listFn(index)"
        :class="{ on: active == index }"
      >
        <AvueUeditor
          v-model="item.descriptiveText"
          :options="upload"
        ></AvueUeditor>
      </div>
  </basic-container>
</template>
    
    <script>
import { getpay} from "@/api/activity/login";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      upload: {
        //普通图片上传
        action: "/api/blade-resource/oss/endpoint/put-file",
        props: {
          res: "data",
          url: "link",
        },
      },
    
  },
 
  methods: {
  
 },  
</script>   
<style lang="scss" scoped>
</style>