TelpoUserManageAdmin/src/views/message-manage/main/add-articles/index.vue

<!--
 * @Date: 2022-08-08 10:09:45
 * @LastEditors: JinxChen
 * @LastEditTime: 2022-09-16 16:39:27
 * @FilePath: \TelpoUserManageAdmin\src\views\message-manage\main\add-articles\index.vue
 * @description: 添加文章
-->

<template>
    <div class="home-container">
      <!-- 顶部内容 -->
      <div class="top-container">
        <TopMenu :buttonList="buttonList"/>
      </div>
      <!-- 表单 -->
      <el-form ref="form" :model="form" label-width="80px" size="small">
        <el-form-item label="文章标题:">
          <el-input v-model="form.articleTitle" ></el-input>
        </el-form-item>
        <el-form-item label="文章类型:">
          <el-select v-model="form.articleType" placeholder="请选择文章类型">
            <el-option :label="item.label" :value="item.label" v-for="(item, index) in articleTypes" :key="index"/>
          </el-select>
        </el-form-item>
        <el-form-item label="分享标题:">
          <el-input v-model="form.shareTitle"></el-input>
        </el-form-item>
        <el-form-item label="分享简介:">
          <el-input v-model="form.shareAbout"></el-input>
        </el-form-item>
        <el-form-item label="分享图片:">
          <el-button  v-show="fileList.length > 0" disabled type="warning">请删除图片后再上传</el-button>
          <el-upload
            class="upload-img"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="onPreview"
            :on-remove="onRemove"
            :on-progress="onProgress"
            :before-remove="beforeRemove"
            :before-upload="beforeUpload"
            :on-error="onError"
            :on-success="onSuccess"
            :on-change="onUploadChange"
            :auto-upload="false"
            :limit="1"
            list-type="picture"
            :file-list="fileList">
            <el-button size="small" type="primary" v-show="fileList.length <= 0">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              <p>最多上传一张，尺寸750X300</p>
            </div>
          </el-upload>
        </el-form-item>


        <!-- 富文本编辑器 -->
        <el-form-item label="文章内容:">
         <!--  <tinymce v-model="form.articleContent" :height="5" menubar="false" /> -->
         <!--  <p>文章内容：{{form.articleContent}}</p> -->
         <div style="border: 1px solid #ccc;">
            <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :defaultConfig="toolbarConfig"
                :mode="mode"
            />
            <Editor
                style="height: 350px; overflow-y: hidden;"
                v-model="form.articleContent"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="onCreated"
                @onChange="onChange"
                @onDestroyed="onDestroyed"
                @onMaxLength="onMaxLength"
                @onFocus="onFocus"
                @onBlur="onBlur"
                @customPaste="customPaste"
            />
         </div>
        </el-form-item>

        <!-- 保存 -->
        <el-form-item class="footer-btn">
            <el-button type="primary" @click="onSave">保存</el-button>
            <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
import TopMenu from "@/components/TopMenu/index";
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
/* import Tinymce from '@/components/Tinymce' */
export default {
  name: 'wechat-fans',
  components: { TopMenu, /* Tinymce */ Editor, Toolbar },
  data(){
   return {
     buttonList: [], // 头部按钮，例子：  {name: '添加', type: 'primary', icon: 'el-icon-circle-plus', click: () => { this.AddDialog();}}
    //  表单数据
     form: {
       articleTitle: '', //文章标题
       articleType: '普通文章', //文章类型
       shareTitle: '', //分享标题
       shareAbout: '', //分享简介
       shareImage: '', //分享图片
       articleContent: '', //文章内容

     },
    //  文章类型
     articleTypes: [
       { label: '普通文章', value: '普通文章' },
       { label: '特别文章', value: '特别文章' },
       { label: '其它文章', value: '其它文章' },
     ],
    //  图片列表
    fileList: [],
    editor: null,
    toolbarConfig: { },
    mode: 'default', // or 'simple'
    // 菜单配置
    editorConfig: {
      MENU_CONF: {
         uploadImage: {
           server: '', //上传图片地址 todo 待后端提供

          }
      }
    }

   }
  },
  mounted() {},
  created() {
    this.clearFiles();
    console.log("本地的上传图片列表", this.fileList);
  },
  beforeDestroy() {
      const editor = this.editor
      if (editor == null) return
      editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    onChange(editor) { console.log('onChange', editor.children) },
    onDestroyed(editor) { console.log('onDestroyed', editor) },
    onMaxLength(editor) { console.log('onMaxLength', editor) },
    onFocus(editor) { console.log('onFocus', editor) },
    onBlur(editor) { console.log('onBlur', editor) },
    customPaste(editor, event, callback) {
        console.log('ClipboardEvent 粘贴事件对象', event)
        // const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
        // const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
        // const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）

        // 自定义插入内容
        editor.insertText('')

        // 返回 false ，阻止默认粘贴行为
        event.preventDefault()
        callback(false) // 返回值（注意，vue 事件的返回值，不能用 return）

        // 返回 true ，继续默认的粘贴行为
        // callback(true)
    },
    // 清空本地上传的图片列表
    clearFiles() {},
    // 删除上传的图片
    onRemove() {
      this.fileList = []
    },
    // 点击文件列表中已上传的文件时的钩子
    onPreview(file) {
      console.log("点击了上传图片", file);
    },
    // 删除上传图片
    beforeRemove(file) {
      return this.$confirm(`确定删除 ${ file.name }？`);
    },
    // 上传图片前
    beforeUpload(file) {
      console.log("上传图片前::", file);
    },
    // 上传失败
    onError(err) {
      return this.$confirm(`上传失败,请联系管理人`);
    },
    // 上传成功
    onSuccess(file) {
      console.log("上传成功", file);
    },
    // 文件上传时
    onProgress(fileList) {
      console.log("fileList", fileList);
    },
    // 上传文件发生变化时
    onUploadChange(file) {
      console.log('传文件发生变化时', file);
      if(this.fileList.length > 0) {
        this.fileList.length = 0
      } else {
        this.fileList.push(file);
      }
    },
    // 保存
    onSave() {
      console.log("保存的内容::", this.form);
    }
  }
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped lang="scss">
  .home-container {
    position: relative;
    height: 600px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0 20px;
    p {
      padding: 5px;
    }
  }
  .upload-img {
    width: 400px;
    .el-button {
      margin-left: 0;
    }
  }
</style>