vue 一步一步开发 集成 UEeditor

vue 一步一步开发 集成 UEeditor

src/main.js 增加如下引用:

import '../static/UE/ueditor.config.js'
import '../static/UE/ueditor.all.min.js'
import '../static/UE/lang/zh-cn/zh-cn.js'
import '../static/UE/ueditor.parse.min.js'

static目录中增加　UE　目录

链接: https://pan.baidu.com/s/1R6YKHyvqzCt66PITZG2-hw 提取码: mek8

component 下面增加 UE.vue

<template>
    <div>
        <script id="editor" type="text/plain"></script>
    </div>
</template>
<script>
    export default {
        name: 'ue',
        data () {
            return {
                editor: null
            }
        },
        props: {
            value: '',
            config: {}
        },
        mounted () {
            this.editor = window.UE.getEditor('editor', this.config);
            this.editor.addListener('ready',  () => {
                this.editor.setContent(this.value)
            })
        },
        methods: {
            getUEContent () {
                return this.editor.getContent()
            }
        },
        destroyed () {
            this.editor.destroy()
        }
    }
</script>

需要引用编辑器的地方:

  <el-row>
    <el-col :span="24">
      <el-form-item label="公告内容" prop="b_ed_info">
        <!--<el-input style="width:98%;" type="textarea" v-model="base_dzggModel.b_ed_info"></el-input>-->
        <Uediter :value="ueditor.value" :config="ueditor.config" ref="ue"></Uediter>
      </el-form-item>
    </el-col>
  </el-row>

  import Uediter from '@/components/UE.vue';

return 增加

 ueditor: {
      value: '编辑器默认文字',
      config: {
        initialFrameWidth: 830,
        initialFrameHeight: 110
      }
    },

回传值:

this.base_dzggModel.b_ed_info = this.$refs.ue.getUEContent()

components 引用

components: {
  Uediter
},

整体引用代码如下: 自己找位置:

<template>
  <el-dialog :title="dialogProps.title" :visible.sync="dialogProps.visible" width="1020px" @open="handleDialogOpen()"
    v-loading="loading">
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
    <el-form :model="base_dzggModel" :rules="formRules" ref="base_dzggForm" label-width="120px" label-position="left"
      size="small">
      <el-row>
        <el-col :span="24">
          <el-form-item label="公告标题" prop="b_te_title">
            <el-input style="width:98%;" v-model="base_dzggModel.b_te_title"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="公告类型" prop="b_se_zy">
            <el-select filterable style="width:90%;" v-model="base_dzggModel.b_se_zy" placeholder="请选择" @change="getb_se_zySelectLists($event)">
              <el-option v-for="item in select_listb_se_zy" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发布日期" prop="b_tm_dtime">
            <el-date-picker style="width:90%;" type="datetime" v-model="base_dzggModel.b_tm_dtime" format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择时间发布日期"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="有效日期" prop="b_tm_ttime">
            <el-date-picker style="width:90%;" type="datetime" v-model="base_dzggModel.b_tm_ttime" format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择时间有效日期"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="接收用户" prop="b_dg_transfer">
            <el-input style="width:97%;" placeholder="接收用户" v-model="base_dzggModel.b_dg_transfer">
              <el-button slot="append" type="primary" icon="el-icon-share" style="background-color: #0A3B6E; color: #FFFFFF;"
                @click="dialogFormVisibleb_dg_transfer = true"></el-button>
            </el-input>
          </el-form-item>
        </el-col>
        <el-dialog :visible.sync="dialogFormVisibleb_dg_transfer" width="800px" :append-to-body='true'>
          <el-tree class="filter-tree" show-checkbox :data="sys_depList" :props="defaultProps" :filter-node-method="filterNode"
            node-key="id" :default-expanded-keys="expanded_keys" :default-checked-keys="[0]" ref="tree3">
          </el-tree>

          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisibleb_dg_transfer = false">取 消</el-button>
            <el-button type="primary" @click="getCheckedNodes">确 定</el-button>
          </span>
        </el-dialog>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="公告内容" prop="b_ed_info">
            <!--<el-input style="width:98%;" type="textarea" v-model="base_dzggModel.b_ed_info"></el-input>-->
            <Uediter :value="ueditor.value" :config="ueditor.config" ref="ue"></Uediter>
          </el-form-item>
        </el-col>
      </el-row>


      <el-upload name="picture" class="upload-demo" :action="uploadUrl()" :on-preview="handlePreview" :on-remove="handleRemove"
        :before-remove="beforeRemove" multiple :limit="3" :on-exceed="onExceed" :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">文件大小不超过100MB</div>
      </el-upload>

      <el-input style="width:0%;" type="hidden" v-model="base_dzggModel.b_hid_depid"></el-input>
      <el-input style="width:0%;" type="hidden" v-model="base_dzggModel.b_hid_userid"></el-input>
      <el-input style="width:0%;" type="hidden" v-model="base_dzggModel.b_hid_task_total"></el-input>
      <el-input style="width:0%;" type="hidden" v-model="base_dzggModel.b_dg_transfer_dep"></el-input>
      <el-input style="width:0%;" type="hidden" v-model="base_dzggModel.b_hid_attachid"></el-input>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
      <el-button type="primary" size="small" @click="submitForm('base_dzggForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import Uediter from '@/components/UE.vue';

  import {
    listWx_sjzd_cb,
    listByParentId
  } from '@/api/wx_sjzd_cb'
  import {
    listSys_dep,
    getSys_depById,
    removeSys_dep,
    saveSys_dep,
    updateSys_dep
  } from '@/api/sys_dep'
  import {
    saveBase_dzgg,
    updateBase_dzgg
  } from '@/api/base_dzgg'
  export default {
    name: 'base_dzgg-edit',
    data() {

      var now = new Date();

      function checkTime(i) {
        if (i < 10) {
          i = "0" + i;
        }
        return i;
      }

      var startDate = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours())).toISOString()
        .slice(0, 20);

      var checkPhone = (rule, value, callback) => {
        const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/;
        if (!value) {
          return callback(new Error('电话号码不能为空'))
        }
        setTimeout(() => {
          if (!Number.isInteger(+value)) {
            callback(new Error('请输入数字值'))
          } else {
            if (phoneReg.test(value)) {
              callback()
            } else {
              callback(new Error('电话号码格式不正确'))
            }
          }
        }, 100)
      }

      var checkEmail = (rule, value, callback) => {
        const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
        if (!value) {
          return callback(new Error('邮箱不能为空'))
        }
        setTimeout(() => {
          if (mailReg.test(value)) {
            callback()
          } else {
            callback(new Error('请输入正确的邮箱格式'))
          }
        }, 100)
      }

      return {


        ueditor: {
          value: '编辑器默认文字',
          config: {
            initialFrameWidth: 830,
            initialFrameHeight: 110
          }
        },

        fileList: [],
        picstr: [], //用户上传文件的数组
        edit: true, //用户表单空间的禁用状态，默认禁止使用
        b_dg_transferdata: '',
        b_dg_transfervalue: '',
        b_dg_transfer_depdata: '',
        b_dg_transfer_depvalue: '',
        sys_depList: [],
        expanded_keys: ['8da6d88c91a13be58b096756c13c2979'],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        dialogFormVisibleb_dg_transfer: false,
        dialogFormVisibleb_dg_transfer_dep: false,

        picyl: '', //用于图片的显示
        loading: false,
        dialogImageUrl: '',
        dialogVisible: false,
        select_listb_se_zy: [],
        parentId: 0,
        search: {
          name: '',
          offset: 0,
          limit: 10,
          current: 0
        },
        base_dzggModel: { //表单实体
          b_p_v_id: '0',
          b_te_title: '',
          b_se_zy: '',
          b_tm_dtime: startDate,
          b_tm_ttime: '',
          b_ed_info: '',
          b_tm_time: '',
          b_dg_transfer: '',
          b_dg_transfer_dep: '',
          b_hid_depid: '',
          b_hid_userid: '',
          b_hid_task_total: '',
          b_hid_attachid: '',
        },
        dialogProps: {
          visible: false,
          action: '',
          title: ''
        },
        formRules: {
          b_te_title: [{
            required: true,
            message: '请输入公告标题',
            trigger: 'blur'
          }, {
            min: 1,
            max: 200,
            message: '长度在 1 到 200 个字符',
            trigger: 'blur'
          }],
          b_se_zy: [{
            required: true,
            message: '请输入公告类型',
            trigger: 'blur'
          }, {
            min: 1,
            max: 200,
            message: '长度在 1 到 200 个字符',
            trigger: 'blur'
          }],
          b_tm_dtime: [{
            required: true,
            message: '请输入发布日期',
            trigger: 'blur'
          }, {
            min: 1,
            max: 200,
            message: '长度在 1 到 200 个字符',
            trigger: 'blur'
          }],
          b_tm_ttime: [{
            required: true,
            message: '请输入有效日期',
            trigger: 'blur'
          }, {
            min: 1,
            max: 200,
            message: '长度在 1 到 200 个字符',
            trigger: 'blur'
          }],
          b_tm_time: [{
            required: true,
            message: '请输入更新日期',
            trigger: 'blur'
          }, {
            min: 1,
            max: 200,
            message: '长度在 1 到 200 个字符',
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {

      beforeRemove() {

      },
      getCheckedNodes() {

        //alert(JSON.stringify(this.$refs.tree3.getCheckedNodes()));
        var str = "";
        var strname = "";
        for (var i = 0; i < this.$refs.tree3.getCheckedNodes().length; i++) {
          //alert(this.$refs.tree3.getCheckedNodes()[i].id);
          str = str + this.$refs.tree3.getCheckedNodes()[i].id + ",";
          strname = strname + this.$refs.tree3.getCheckedNodes()[i].label + ",";
        }
        this.base_dzggModel.b_dg_transfer = strname;
        this.base_dzggModel.b_dg_transfer_dep = str;
        this.dialogFormVisibleb_dg_transfer = false;

      },
      handleNodeClick(data) {
        this.expanded_keys = [data.id];
        this.base_dzggModel.b_dg_transfer_dep = data.label;
        this.base_dzggModel.b_hid_depid = data.id;
        this.dialogFormVisibleb_dg_transfer_dep = false;
      },

      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },

      getb_se_zySelectLists(selectdatas) {
        let obj = {};
        obj = this.select_listb_se_zy.find((item) => {
          return item.value === selectdatas;
        });
        this.base_dzggModel.b_se_zy = obj.label;
      },

      handleb_dg_transferChange(value, direction, movedKeys) {
        this.base_dzggModel.b_dg_transfer = value.toString();
      },
      handleb_dg_transfer_depChange(value, direction, movedKeys) {
        this.base_dzggModel.b_dg_transfer_dep = value.toString();
      },

      uploadUrl() {
        var url = process.env.BASE_API + "upload.do?b_hid_v_id=" + this.base_dzggModel.b_hid_attachid +
          "&b_hid_userid=" + JSON.parse(sessionStorage.getItem('currentUser')).name +
          "&b_hid_common=电子公告附件&b_hid_type=DZGG";
        return url
      },
      handleSuccess(res, file) {
        this.$message({
          type: 'info',
          message: '上传成功',
          duration: 6000
        });
        if (file.response.success) {
          this.picstr.push(process.env.BASE_API + file.response.message)
        }
      },
      //删除文件之前的钩子函数
      handleRemove(file, fileList) {
        this.$message({
          type: 'info',
          message: '已删除',
          duration: 6000
        });
        for (var int = 0; i < fileList.length; i++) {
          this.picstr.push(process.env.BASE_API + fileList[i].response.message)
        }
      },
      //点击列表中已上传的文件事的钩子函数
      handlePreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      //上传的文件个数超出设定时触发的函数
      onExceed(files, fileList) {
        this.$message({
          type: 'info',
          message: '超出文件上传数量！',
          duration: 6000
        });
      },
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isGIF = file.type === 'image/gif';
        const isPNG = file.type === 'image/png';
        const isBMP = file.type === 'image/bmp';
        const isLt2M = file.size / 1024 / 1024 < 100;
        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传文件大小不能超过 100MB!');
        }
        return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
      },
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            if (this.dialogProps.action === 'add') {
              this.doSaveBase_dzgg()
            } else {
              this.doUpdateBase_dzgg()
            }
          } else {
            return false
          }
        });
      },
      doUpdateBase_dzgg() {
        this.loading = true
        this.base_dzggModel.b_ed_info = this.$refs.ue.getUEContent()
        updateBase_dzgg(this.base_dzggModel.b_p_v_id, this.base_dzggModel)
          .then(response => {
            this.loading = false;
            this.dialogProps.visible = false;
            this.$emit('save-finished')
          })
          .catch(error => {
            this.outputError(error)
          })
      },
      doSaveBase_dzgg() {
        this.loading = true
        this.base_dzggModel.b_ed_info = this.$refs.ue.getUEContent()
        if (this.base_dzggModel.b_dg_transfer == undefined) {
          this.$alert('<strong>请先选择接收部门！</strong>', '系统提示', {
            dangerouslyUseHTMLString: true
          });

          this.loading = false;
        } else {

          saveBase_dzgg(this.base_dzggModel)
            .then(response => {
              this.loading = false;
              this.dialogProps.visible = false;
              this.$emit('save-finished')
            })
            .catch(error => {
              this.dialogProps.visible = false;
              this.loading = false;
              this.$emit('save-finished')
            })
        }
      },
      handleDialogClose() {
        this.dialogProps.visible = false
      },
      handleDialogOpen() {
        this.$nextTick(() => {
          this.$refs['base_dzggForm'].clearValidate()
        })
      },
      outputError(error) {
        console.log(error.response ? error.response : error.message)
        this.loading = false
        this.$message({
          showClose: true,
          message: '出错了，请按F12查看浏览器日志。',
          type: 'error'
        })
      },
      getSelectFomatList(selectdatas) { //用户select 数据封装
        let result = []
        result.push({
          value: 0,
          label: '无'
        })
        for (let data of selectdatas) {
          result.push({
            value: data.fid, //此处对应数据库的字段
            label: data.b_te_smc //此处对应数据库的字段
          })
        }
        return result
      },
      async pageInit() {

        //图片加载
        var picyl_str = []
        var picstr = "";
        if (this.base_dzggModel.b_file_pic) {
          picyl_str = (this.base_dzggModel.b_file_pic).split(',');
          if (picyl_str.length > 0) {
            for (var i = 0; i < picyl_str.length; i++) {
              picstr = picstr + "<img src='" + picyl_str[i] + "' width='100px' height='100px'></img>";
            }
          }
        }
        this.picyl = picstr;


        try {
          let [listSys_depResp] = await Promise.all([
            listSys_dep(this.search)
          ])
          this.sys_depList = listSys_depResp.data
        } catch (error) {
          this.outputError(error)
        }

        listByParentId('9909a35fab2787b9d7d9ef07bdd19bef')
          .then(response => {
            this.select_listb_se_zy = this.getSelectFomatList(response.data.records)
          })
          .catch(error => {
            this.outputError(error)
          })

        this.base_dzggModel.b_hid_userid = JSON.parse(sessionStorage.getItem('currentUser')).name;
      }
    },
    mounted: function() {
      var now = new Date();

      function checkTime(i) {
        if (i < 10) {
          i = "0" + i;
        }
        return i;
      }

      var startDate = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours())).toISOString()
        .slice(0, 20);
      this.$nextTick(() => {
        this.$on('openEditBase_dzggDialog', function(base_dzgg) {
          this.base_dzggModel = base_dzgg;
          this.ueditor.value = base_dzgg.b_ed_info;
          this.dialogProps.action = 'edit';
          this.dialogProps.title = '修改电子公告'
          this.dialogProps.visible = true
        })
        this.$on('openAddBase_dzggDialog', function(base_dzgg) {
          this.dialogProps.action = 'add'
          this.dialogProps.title = '添加电子公告'
          this.base_dzggModel = {
            b_hid_attachid: now.getFullYear() + '' + checkTime(now.getMonth() + 1) + '' + checkTime(now.getDate()) +
              '' + checkTime(now.getMinutes()) +
              '' + now.getSeconds() + JSON.parse(sessionStorage.getItem('currentUser')).id,
            b_hid_userid: JSON.parse(sessionStorage.getItem('currentUser')).name
          }
          this.dialogProps.visible = true
        })
      })
    },
    components: {
      Uediter
    },
    created() {
      this.pageInit()
    }
  }
</script>

<style>
  .el-transfer-panel {
    width: 300px;
    height: 400px;
  }

  .el-transfer-panel__list.is-filterable {
    height: 300px;
  }

  .redItem .el-form-item__label {
    color: red;
  }
</style>