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

介绍如何在 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.img.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>