公告项目2020/10/13

最新推荐文章于 2024-02-19 20:58:47 发布

原创最新推荐文章于 2024-02-19 20:58:47 发布 · 210 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #css

js 专栏收录该内容

8 篇文章

订阅专栏

本文详述了在前端实现富文本编辑器中集成图片上传功能的过程，包括tinymce的配置和使用，以及遇到的重置表单避免校验问题。同时，文章提出了表格单元格内容超出隐藏导致布局错乱的待解决技术问题。

重点难点：

在这里插入图片描述

上传附件：在发布公告的时候需要上传附件：思路是将文件上传到一个新的接口中，得到返回的路径以及id，将id在发布公告的时候传给后台（此处后台会根据id进行关联，在查看这一条公告的时候通过这条公告的id重新请求这条公告的详情，在详情中会返回刚刚上传的附件）。（后台设计的这种模式并不是很好）

在这里插入图片描述

富文本框的编辑：经历千难万险终于实现了富文本框的图片上传功能，下边附上代码，我是将富文本框抽离成了一个组件，在要使用的页面引入，其中就是配置比较麻烦，官网的介绍代码比较不全，引入的方法有些模糊，思路就是先注册tinymce然后通过自己的key来引入这tinymce，再配置自己想要的功能，最快的方法就是先实现一个完整的功能再去添加一些无关紧要的功能（即：先使用复杂的功能），比如我先实现了图片上传功能，再去添加文字格式化、对齐等等。

<template>
  <editor
    apiKey="自己官网注册tinymce的key值"
    initialValue="<p></p>"
     placeholder="在此输入内容"
    :init="inits"
    v-model="tinyContent"
    ref="fileObj"
  >
  </editor>
</template>
<script>
import Editor from '@tinymce/tinymce-vue'

export default {
  name: 'app',
  components: {
    editor: Editor
  },
  data() {
    return {
      tinyContent: '',
      inits: Object.freeze({
        height: 450,
        language: 'zh_CN',
        selector: 'textarea#local-upload',
        plugins: 'image code link',
        toolbar: 'undo redo | code|undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist checklist | forecolor backcolor casechange formatpainter removeformat | rotateleft rotateright | flipv fliph | editimage imageoptions| link image ',
        image_title: true,
        toolbar_mode: 'sliding',
        file_picker_types: 'image',
        file_picker_callback: (cb, value, meta) => {
          let _this = this
          var input = document.createElement('input')
          input.setAttribute('type', 'file')
          input.setAttribute('accept', 'image/*')

          input.onchange = function () {
            var file = this.files[0]
            var formData = new FormData()
            formData.append("file", file)
            let params = {
              type: 2
            }
            _this.$api.announce
              .upload(formData, params)
              .then((res) => {
                console.log(res)
                if (res) {
                  cb(res.fileAddress, { title: file.name })
                  success(res.fileAddress)
                }
              })
              .catch((err) => {
                _this.$message.error(err.$message)
              })
          }

          input.click()
        },
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
      })
    }
  },
  methods: {
  }
}
</script>

在引入的页面

 <TinymceEditor ref="tiny" />
 import TinymceEditor from './tinymce-editor'

css:overflow：auto
发布新公告提交之后表单要重新置空这个发布公告页面，此时如果贸然的用 this.form = {} 那么会触发表单的校验，再次进入你的页面你的页面就会飘红如下图所示，所以最简单的方法就是重置表单（重置表单可以移除校验，此时就不会触发校验）。

  // 取消
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.$emit('close')
    },

待解决问题：
table中某一个cell文字超长我想用超过的部分…隐藏，会导致table的布局错乱。如果所示
在这里插入图片描述

css样式也没什么问题

.border /deep/ .el-table {
  .el-table__body-wrapper {
    .cell {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #666666;
      line-height: 1;
    }
  }
}

7.关于正则也使不熟练
例如文本框只能输入文字

 <el-input
          type="textarea"
          v-model="form.summary"
          maxlength="300"
          :rows="4"
          placeholder="只能输入文字内容 字数不超过300"
          onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"
        >
          ></el-input
        >