ruoyi实现富文本生成网页功能,vue实现wangEditro功能,网页静态化,二维码预览网页

先看效果

 

 

 

 

 废话不多直接上代码,也不墨迹了,代码自己拿去跑,前段代码没什么依赖,可以直接跑起来

注意点

1,:需要安装QRCode 组件,自己百度去

2:需要安装wangEditor富文本编辑器组件,版本5,请上官网自己找教程,找vue版本的,安装很复杂,貌似还有兼容问题,如果有问题在回复我,我用的是ruoyi3.7.0

<template>
  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="标题" prop="picNm">
        <el-input v-model="queryParams.picNm" size="small" clearable></el-input>
      </el-form-item>

      <el-form-item label="投放时间" prop="releaseTime">
        <el-date-picker clearable size="small"
                        v-model="queryParams.releaseTime"
                        type="date"
                        value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-form label-width="68px">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            size="mini"
            @click="handleAdd"
            v-hasPermi="['web:lunbo:list']"
          >新增
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            size="mini"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['web:lunbo:list']"
          >修改
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['web:lunbo:list']"
          >删除
          </el-button>
        </el-col>
        <!--      <el-col :span="1.5">-->
        <!--        <el-button-->
        <!--          type="warning"-->
        <!--          plain-->
        <!--          icon="el-icon-download"-->
        <!--          size="mini"-->
        <!--          :loading="exportLoading"-->
        <!--          @click="handleExport"-->
        <!--          v-hasPermi="['web:lunbo:export']"-->
        <!--        >导出</el-button>-->
        <!--      </el-col>-->
        <!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
      </el-row>
    </el-form>

    <el-table border v-loading="loading" :data="lunboList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <!--      <el-table-column label="id" align="center" prop="id" />-->
      <el-table-column label="标题" align="left" prop="picNm" :show-overflow-tooltip="true"/>
      <!--      <el-table-column label="图片地址" align="center" prop="picAddr" />-->


      <el-table-column label="封面图片" align="center" prop="picAddr" width="150">
        <template slot-scope="scope">
          <el-image
            style="height: 35px;padding: 0"
            fit="fill"
            :src="conf.imgUrlDeal(scope.row.picAddr)"
          >
          </el-image>
        </template>
      </el-table-column>

      <el-table-column label="描述" align="left" prop="picDesc" width="160" :show-overflow-tooltip="true"/>

      <el-table-column label="是否展示" align="center" prop="picShow" width="110">
        <template slot-scope="scope">

          <el-switch
            class="switch"
            v-model="scope.row.picShow"
            :validate-event="true"
            active-text="显示"
            inactive-text="隐藏"
            active-value="0"
            inactive-value="1"
            @change="isShowTypeChange(scope.row)"
          />

        </template>
      </el-table-column>

      <el-table-column label="广告链接" align="left" prop="picHyperlink" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span @click="conf.openIframe(scope.row.picHyperlink,show,urlItem)">
              <el-link type="primary" style="font-size: 11px" target="_blank">{{ scope.row.picHyperlink }}</el-link>
          </span>
        </template>
      </el-table-column>

      <!--      <el-table-column label="创建人" align="center" prop="creater" />-->
      <!--      <el-table-column label="创建时间" align="center" prop="createDt" width="180">-->
      <!--        <template slot-scope="scope">-->
      <!--          <span>{{ parseTime(scope.row.createDt, '{y}-{m}-{d}') }}</span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column label="更新人" align="center" prop="modifier" width="90"/>
      <el-table-column label="更新时间" align="center" prop="modifyDt" width="125">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.modifyDt, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>

      <el-table-column label="投放开始时间" align="center" prop="modifyDt" width="125">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.releaseTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="投放结束时间" align="center" prop="modifyDt" width="125">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.lockTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>

      <!--      <el-table-column label="备注" align="center" prop="remarks" width="200"/>-->
      <!--      <el-table-column label="图片超链接" align="center" prop="picHyperlink" />-->
      <!--      <el-table-column label="广告类型" align="center" prop="adType" />-->
      <!--      <el-table-column label="倒计时" align="center" prop="countdown" />-->
      <!--      <el-table-column label="倒计时" align="center" prop="savepic" />-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
        <template slot-scope="scope">

          <el-button slot="reference" size="mini" type="text"
                     @click="creatQrCode(scope.row.picHyperlink)"
          > 预览
          </el-button>

          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['web:lunbo:list']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['web:lunbo:list']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改广告轮播图对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-form :inline="true" ref="form" :model="form" :rules="rules" label-width="100px">

        <el-row>
          <el-col :span="12">
            <el-form-item label="标题" prop="picNm">
              <el-input style="width: 360px" @change="updateRichHtml" v-model="form.picNm"/>
            </el-form-item>

            <el-form-item label="描述" prop="picDesc">
              <el-input style="width: 360px" v-model="form.picDesc"/>
            </el-form-item>

            <el-form-item label="是否显示" prop="picShow">
              <el-checkbox-group v-model="form.picShow"
                                 @change="((val)=> {
                                   form.picShow = (val == 'null' || !val) ? nextItem.picShow : val;
                                   nextItem.picShow = form.picShow;

                                 })"
              >
                <el-checkbox false-label="null" true-label="0">显示</el-checkbox>
                <el-checkbox false-label="null" true-label="1">隐藏</el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <!--            <el-form-item label="创建时间" prop="createDt">-->
            <!--              <el-date-picker clearable size="small"-->
            <!--                              disabled="disabled"-->
            <!--                              v-model="form.createDt"-->
            <!--                              type="date"-->
            <!--                              style="width: 360px"-->
            <!--                              value-format="yyyy-MM-dd">-->
            <!--              </el-date-picker>-->
            <!--            </el-form-item>-->

            <!--            <el-form-item label="修改时间" prop="modifyDt">-->
            <!--              <el-date-picker clearable size="small"-->
            <!--                              v-model="form.modifyDt"-->
            <!--                              type="date"-->
            <!--                              style="width: 360px"-->
            <!--                              disabled="disabled"-->
            <!--                              value-format="yyyy-MM-dd">-->
            <!--              </el-date-picker>-->
            <!--            </el-form-item>-->

            <el-form-item label="网页类型" prop="pageType">
              <el-checkbox-group v-model="form.pageType"
                                 @change="((val)=> {
                                 form.pageType = (val == 'null' || !val) ? nextItem.pageType : val;
                                 nextItem.pageType = form.pageType;
                                 show.richText = form.pageType == '0'
                               })"
              >
                <el-checkbox false-label="null" true-label="1">第三方</el-checkbox>
                <el-checkbox false-label="null" true-label="0">本地页面</el-checkbox>
              </el-checkbox-group>
            </el-form-item>

          </el-col>

          <el-col :span="12">
            <el-form-item label="封面图片" prop="picAddr">
              <div class="avatar-uploader">
                <el-upload style="width: 360px" action="#" accept=".jpg,.png,.jpeg" :http-request="requestUpload"
                           :show-file-list="false"
                           :before-upload="beforeUpload"
                >

                  <!-- 如果有地址,会有两种情况,一种是新增时添加的图片,一种是点击编辑查询后存在 -->
                  <el-image v-if="form.picNmFile" fit="contain" style="max-width: 100%" :src="form.picAddr"
                            class="avatar"
                  />
                  <!-- 因此采用了代理,所以只需要吧圖片地址加上api路徑拼接上去就行了 -->
                  <el-image v-else-if="form.picAddr" fit="contain" style="max-width: 100%" :src="baseUrl + form.picAddr"
                            class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <span style="color: #999999;font-size: 11px">{{ routeQueryParms.picstr }}</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="跳转链接" prop="picHyperlink">
              <el-input type="textarea" style="width: 360px" v-model="form.picHyperlink"/>
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item label="备注" prop="remarks">
              <el-input v-model="form.remarks" style="width: 360px" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>

          <el-col :span="12">
            <el-form-item label="发布时间" prop="releaseTime">
              <el-date-picker
                style="width: 360px"
                size="small"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="form.releaseTime"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="发布时间"
                end-placeholder="截止时间"
                :picker-options="conf.pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <!--        <el-form-item label="广告类型" prop="adType">-->
        <!--          <el-select v-model="form.adType" placeholder="请选择广告类型">-->
        <!--            <el-option label="请选择字典生成" value="" />-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->


        <!--        <el-form-item label=""  label-width="100px">-->
        <div style="display: flex;justify-content: space-between" v-show="show.richText">
          <div style="width: 100px;text-align: right;padding-right: 15px">
            网页内容
          </div>
          <div style="border: 1px solid #ccc;width: 98%;z-index: 9999">
            <Toolbar
              class="toolbar_1"
              :editor="editorItem.editor"
              :defaultConfig="editorItem.toolbarConfig"
              :mode="editorItem.mode"
            />
            <!--            v-model="editorItem.html"-->

            <Editor
              ref="editor"
              style="height:410px; overflow-y: scroll;width: 100%;background-color:white;"
              v-model="form.richText"
              :defaultConfig="editorItem.editorConfig"
              :mode="editorItem.mode"
              @onCreated="onCreated"
            />
          </div>
        </div>
        <!--        </el-form-item>-->


        <!--        <el-form-item label="倒计时" prop="countdown">-->
        <!--          <el-input v-model="form.countdown" placeholder="请输入倒计时" />-->
        <!--        </el-form-item>-->


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="扫码预览"
      :visible.sync="show.qrCode"
      width="400px"
      top="50vh"
    >
      <div style="display: flex;justify-content: center;">
        <div class="qrcode" ref="qrcode"></div>
      </div>
      <!--      :before-close="handleClose">-->
    </el-dialog>

    <el-dialog
      title="预览网页"
      :visible.sync="show.html"
      width="500px"
      height="950px"
      @close="()=>{urlItem.htmlUrl = null}"
    >
      <div style="display: flex;justify-content: center;">

        <iframe :src="urlItem.htmlUrl" height="800" width="550" title="广告预览" frameborder="0"></iframe>

      </div>
      <!--      :before-close="handleClose">-->
    </el-dialog>

  </div>

</template>

<script>
import { listLunbo, getLunbo, delLunbo, addLunbo, updateLunbo, exportLunbo, picShowUpdate } from '@/api/gzApi/lunbo'
// import { getToken } from '@/utils/auth'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
import editorConfig from '@/utils/wangEditor'
import { pickerOptions, openIframe, imgUrlDeal, getNowDate } from '@/utils/elementuiConf'
import { DomEditor } from '@wangeditor/editor'
// 配置编辑器是否支持滚动,默认为 true
import QRCode from 'qrcodejs2'

export default {
  // dom中的editor
  components: { Editor, Toolbar },
  dicts: ['isok'],
  name: 'Lunbo',
  data() {
    return {
      urlItem: {
        htmlUrl: null
      },
      conf: {
        pickerOptions: pickerOptions,
        openIframe: openIframe,
        imgUrlDeal: imgUrlDeal
      },
      show: {
        richText: false,
        qrCode: false,
        html: false
      },
      nextItem: {
        picShow: null,
        pageType: '1',
        contentTitle: '{#标题#}'
      },
      editorItem: {
        editor: null,
        html: '',
        // 工具栏配置
        // toolbarConfig:,
        editorConfig: editorConfig,
        mode: 'default' // or 'simple'
      },
      // headerObj: {
      //   Authorization: 'Bearer ' + getToken()
      // },
      routeQueryParms: {},
      // 后台地址
      baseUrl: process.env.VUE_APP_BASE_API,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      picNms: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 广告轮播图表格数据
      lunboList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        picShow: null,
        adType: null,
        pageType: null,
        picNm: null,
        releaseTime: null
      },
      // 表单参数
      form: { pageType: '1' },
      // 表单校验
      rules: {
        picNm: [
          { required: true, message: '标题不能为空', trigger: 'blur' }
        ],
        releaseTime: [
          { required: true, message: '请选择发布时间', trigger: 'blur' }
        ],
        picAddr: [
          { required: true, message: '请添加图片', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (!this.form.picAddr) {
                return callback(new Error('请添加图片'))
              } else {
                callback()
              }
            },
            trigger: ['blur', 'change']
          }
        ],
        picDesc: [
          { required: true, message: '描述不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  beforeDestroy() {
    const editor = this.editorItem.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时,及时销毁编辑器
  },
  mounted() {
  },
  created() {
    const query = this.$route.query
    this.routeQueryParms = query
    this.getList()
  },
  methods: {
    isShowTypeChange(row) {
      this.$modal.confirm('是否' + (row.picShow == '0' ? '展示' : '隐藏') + '标题为"' + row.picNm + '"的数据项?').then(function() {
        return picShowUpdate({ id: row.id, picShow: row.picShow })
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('操作成功!')
      }).catch(function() {
        // 00 隐藏,01不隐藏
        row.picShow = (row.picShow === '0' ? '1' : '0')
      })
    },
    // 二维码方法
    creatQrCode(url) {
      this.$set(this.show, 'qrCode', true)
      this.$nextTick(() => {
        this.$refs.qrcode.innerHTML = ''
        const qrcode = new QRCode(this.$refs.qrcode, {
          text: url, // 需要转换为二维码的内容
          width: 180,
          height: 180,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        })
      })
    },

    onCreated(editor) {
      this.editorItem.editor = Object.seal(editor) // 一定要用 Object.seal() ,否则会报错
    },
    // 覆盖默认的上传行为
    requestUpload() {
    },
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('图片大小不能超过2MB!')
        return
      }
      if (file.type.indexOf('image/') == -1) {
        this.$modal.msgError('文件格式错误,请上传图片类型,如:JPG,PNG后缀的文件。')
      } else {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => {
          // 这个是要上传的真实图片文件
          this.form.picNmFile = file
          // 此时图片是base64编码文件
          this.form.picAddr = reader.result
          this.$refs.form.validateField('picAddr')
        }
      }
    },

    /** 查询广告轮播图列表 */
    getList() {
      this.loading = true
      listLunbo(this.queryParams).then(response => {
        this.lunboList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        picNm: null,
        picAddr: null,  // 新增的时候是base64编码字节数据,但是只有在file不为空的时候才会提交
        picDesc: null,
        picShow: '0',
        creater: null,
        createDt: null,
        modifier: null,
        modifyDt: null,
        remarks: null,
        deleteFlag: null,
        picHyperlink: null,
        adType: null,
        pageType: '1', // 默认外部网页链接
        countdown: null,
        savepic: null,
        picNmFile: null, // 图片文件
        richText: '', // 富文本
        releaseTime: null,
        lockTime: null
      }
      this.show = {
        richText: false
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.picNms = selection.map(item => item.picNm)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加广告轮播图'

      // 清除富文本内容
      // if (this.editorItem.editor) {
      //   this.editorItem.editor.clear();
      //   this.editorItem.editor.setHtml('<p></p>')
      // }

      this.nextItem.contentTitle = '{#标题#}'

      this.$set(this.form, 'richText',
        '<h1>' +
        '<span style="font-size: 22px;line-height: 44px;padding: 1px 0;text-align: left;font-weight: normal;">' + this.nextItem.contentTitle  + '</span>' +
        '</h1>'+
        '<p>' +
        '<span style="line-height: 24px;color: rgb(153, 153, 153); background-color: rgb(255, 255, 255); font-size: 12px;">运营  ' + getNowDate() + '</span>' +
        '</p>'
      )

    },

    // 更新富文本中的标题
    updateRichHtml(val) {
      // 富文本内容
      let richText = this.form.richText
      // 占位符
      let contentTitle = this.nextItem.contentTitle

      // 如果不为初始值,那么就截取,真实值,方便替换富文本内容
      if ('{#标题#}' !== contentTitle) {
        contentTitle = contentTitle.replace('{#', '').replace('#}', '')
      }

      // 将标题替换进内容中
      const newHtml = richText.replace(contentTitle, val)
      this.$set(this.form, 'richText', newHtml)
      this.nextItem.contentTitle = '{#' + val + '#}'
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getLunbo(id).then(response => {
        // 初始化发布时间
        if (response.data.releaseTime) {
          response.data.releaseTime = [response.data.releaseTime, response.data.lockTime]
        }

        this.form = response.data
        // 如果是本地连接则打开富文本编辑器,否则则关闭
        this.show.richText = this.form.pageType === '0'

        // 写入富文本内容
        this.$nextTick(() => {
          if (this.editorItem.editor) {
            this.editorItem.editor.clear()
            this.editorItem.editor.setHtml(this.form.richText)
          }
        })

        this.open = true
        this.title = '修改广告轮播图'
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        let fd = new FormData()
        fd.append('id', this.form.id ? this.form.id : '')
        fd.append('picNm', this.form.picNm ? this.form.picNm : '')

        // 图片文件存在才去拼接
        if (this.form.picNmFile) {
          fd.append('picNmFile', this.form.picNmFile, this.form.picNmFile.name)
        }

        fd.append('picHyperlink', this.form.picHyperlink ? this.form.picHyperlink : '')
        fd.append('remarks', this.form.remarks ? this.form.remarks : '')
        fd.append('picDesc', this.form.picDesc ? this.form.picDesc : '')
        fd.append('picShow', this.form.picShow ? this.form.picShow : '')
        fd.append('createDt', this.form.createDt ? this.form.createDt : '')
        fd.append('modifyDt', this.form.modifyDt ? this.form.modifyDt : '')
        fd.append('pageType', this.form.pageType ? this.form.pageType : '')
        fd.append('richText', this.form.richText ? this.form.richText : '')

        // 发布时间
        if (this.form.releaseTime) {
          fd.append('lockTime', this.form.releaseTime ? this.form.releaseTime[1] : '')
          fd.append('releaseTime', this.form.releaseTime ? this.form.releaseTime[0] : '')
        }

        if (valid) {
          if (this.form.id != null) {
            updateLunbo(fd).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addLunbo(fd).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }

      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      const names = row.picNm || this.picNms

      this.$modal.confirm('是否删除广告图标题为"' + names + '"的数据项?').then(function() {
        return delLunbo(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$modal.confirm('是否确认导出所有广告轮播图数据项?').then(() => {
        this.exportLoading = true
        return exportLunbo(queryParams)
      }).then(response => {
        this.$download.name(response.msg)
        this.exportLoading = false
      }).catch(() => {
      })
    }
  }
}
</script>
<style scoped>
/*src="@wangeditor/editor/dist/css/style.css"*/
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF !important;
}

.avatar-uploader-icon {
  font-size: 34px !important;
  color: #8c939d !important;
  width: 350px !important;
  height: 180px !important;
  line-height: 180px !important;
  text-align: center !important;
  border: 1px #d9d9d9 solid !important;
}

.avatar {
  /*width: 200px;*/
  height: 180px !important;
  /*display: block;*/
}

.el-form-item--medium .el-form-item__content {
  line-height: 0 !important;
}

::v-deep .toolbar_1 .title {
  font-size: 10px;
  margin: 0;
  text-align: center;
}

.toolbar_1 {
  border-bottom: 1px solid #ccc;
}


/* switch按钮样式 */
::v-deep .switch .el-switch__label {
  position: absolute;
  display: none;
  color: #fff !important;
}

/*打开时文字位置设置*/
::v-deep .switch .el-switch__label--right {
  z-index: 1;
}

/* 调整打开时文字的显示位子 */
::v-deep .switch .el-switch__label--right span {
  margin-right: 9px;
}

/*关闭时文字位置设置*/
::v-deep .switch .el-switch__label--left {
  z-index: 1;
}

/* 调整关闭时文字的显示位子 */
::v-deep .switch .el-switch__label--left span {
  margin-left: 9px;
}

/*显示文字*/
::v-deep .switch .el-switch__label.is-active {
  display: block;
}

/* 调整按钮的宽度 */
::v-deep .switch.el-switch .el-switch__core,
::v-deep .el-switch .el-switch__label {
  width: 70px !important;
  margin: 0;
}
/*::v-deep .w-e-text-container .w-e-modal :first-child label:nth-of-type(3){*/
/*  background-color: #00afff;*/
/*  display: none;*/
/*}*/
::v-deep  video{
  max-width: 100%;
}
</style>

第二步,补齐配置文件

上述vue组件中使用到的wangEditor.js配置,请依据引入的路径创建本文件
import { getToken } from '@/utils/auth'
// import resize from "../views/dashboard/mixins/resize";
import { uploadFileHce } from '../api/common'
import { Message } from 'element-ui'

export default {
  // menus: [
  //   // "head",
  //   'bold',
  //   'fontSize',
  //   "fontName",
  //   'italic',
  //   'underline',
  //   '|',
  //   'strikeThrough',
  //   'indent',
  //   'lineHeight',
  //   'foreColor',
  //   'backColor',
  //   'link',
  //   '|',
  //   'list',
  //   // "todo",
  //   'image',
  //   'justify',
  //   'quote',
  //   'table',
  //   '|',
  //   'code',
  //   'splitLine',
  //   'undo',
  //   'emoticon',
  //   'redo'
  // ],
  placeholder: '请输入内容...',
  scroll: false,
  // autoFocus:true,
  MENU_CONF: {
    // emotion:{
    //   emotions: '

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


学习编程是顺着互联网的发展潮流,是一件好事。新手如何学习编程?其实不难,不过在学习编程之前你得先了解你的目的是什么?这个很重要,因为目的决定你的发展方向、决定你的发展速度。
IT行业是什么工作做什么?IT行业的工作有:产品策划类、页面设计类、前端与移动、开发与测试、营销推广类、数据运营类、运营维护类、游戏相关类等,根据不同的分类下面有细分了不同的岗位。
女生学Java好就业吗?女生适合学Java编程吗?目前有不少女生学习Java开发,但要结合自身的情况,先了解自己适不适合去学习Java,不要盲目的选择不适合自己的Java培训班进行学习。只要肯下功夫钻研,多看、多想、多练
Can’t connect to local MySQL server through socket \'/var/lib/mysql/mysql.sock问题 1.进入mysql路径
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 sqlplus / as sysdba 2.普通用户登录
一、背景 因为项目中需要通北京网络,所以需要连vpn,但是服务器有时候会断掉,所以写个shell脚本每五分钟去判断是否连接,于是就有下面的shell脚本。
BETWEEN 操作符选取介于两个值之间的数据范围内的值。这些值可以是数值、文本或者日期。
假如你已经使用过苹果开发者中心上架app,你肯定知道在苹果开发者中心的web界面,无法直接提交ipa文件,而是需要使用第三方工具,将ipa文件上传到构建版本,开...
下面的 SQL 语句指定了两个别名,一个是 name 列的别名,一个是 country 列的别名。**提示:**如果列名称包含空格,要求使用双引号或方括号:
在使用H5混合开发的app打包后,需要将ipa文件上传到appstore进行发布,就需要去苹果开发者中心进行发布。​
+----+--------------+---------------------------+-------+---------+
数组的声明并不是声明一个个单独的变量,比如 number0、number1、...、number99,而是声明一个数组变量,比如 numbers,然后使用 nu...
第一步:到appuploader官网下载辅助工具和iCloud驱动,使用前面创建的AppID登录。
如需删除表中的列,请使用下面的语法(请注意,某些数据库系统不允许这种在数据库表中删除列的方式):
前不久在制作win11pe,制作了一版,1.26GB,太大了,不满意,想再裁剪下,发现这次dism mount正常,commit或discard巨慢,以前都很快...
赛门铁克各个版本概览:https://knowledge.broadcom.com/external/article?legacyId=tech163829
实测Python 3.6.6用pip 21.3.1,再高就报错了,Python 3.10.7用pip 22.3.1是可以的
Broadcom Corporation (博通公司,股票代号AVGO)是全球领先的有线和无线通信半导体公司。其产品实现向家庭、 办公室和移动环境以及在这些环境...
发现个问题,server2016上安装了c4d这些版本,低版本的正常显示窗格,但红色圈出的高版本c4d打开后不显示窗格,
TAT:https://cloud.tencent.com/document/product/1340