TingMCE富文本编辑器，全配置

拜无忧
116 阅读1分钟

示例图

image.png

编辑器文件-本地化-放public文件夹里

https://wwu.lanzouv.com/iwp0d0b8b8pe

中文文档

http://tinymce.ax-z.cn/

组件中使用

<RichText ref="JobDescription" :myHtml="myHtml" v-model="form.Content" class="summmy-input" :readonly="isView"
        :disabled="isView" name="JobDescription" @input="updateForm"></RichText>

代码

<template>
  <div class="content">
    <textarea :id="tinymceId"></textarea>
    <!-- <tinymce-editor :init="init" v-model="form.container" id="mytextarea" :key="tinymceFlag"></tinymce-editor> -->

  </div>
</template>
<script>
import store from '@/store'
import axios from 'axios';
// const tinymce = require ('/tinymce/tinymce.min.js')
// import tinymce from '../../../public/tinymce/js/tinymce/tinymce.min.js';
// let tinymce = require('/tinymce/js/tinymce/tinymce.min.js')
export default {
  name: 'MyEditor',

  props: {
    myHtml: {
      type: String,
      default: 'hi',
    },
    placeholder: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: '<p>Hi</p>'
    },
    remarks: {
      type: String,
      default: ''
    },
    uploadPath: {
      type: String,
      default: '/File/UploadSingleFile'
    }
  }, // 接收父组件的方法
  data() {
    return {
      tinymceId: 'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + ''),
      tinymce: tinymce,
      tinymceFlag: 0,//是防止组件缓存导致编辑器不能正常使用，每次切换来都更改key,使其重新渲染
      content: '', //输入的内容
      editor: null,
      html: '',
      toolbarConfig: {},
      //上传图片地址
      uploadApi: process.env.VUE_APP_API_BASE_URL + '/file/image',
      editorConfig: {
        placeholder: '请输入内容...',
        // autoFocus: false,
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {
          //配置上传图片
          uploadImage: {
            customUpload: this.upload
          }
        }
      },

    };
  },
  watch: {
    myHtml: function (New, old) {
      // window.tinymce.get(this.tinymceId).getContent()
      // console.log(window.tinymce.get(this.tinymceId).getContent());
      this.$nextTick(() => {
        console.log(1996, New);
        window.tinymce.get(this.tinymceId).setContent(this.myHtml)
      })
    }

  },
  mounted() {
    this.initTinymce()
  },
  methods: {
    initTinymce() {
      const _this = this
      this.tinymce.init({
        selector: `#${this.tinymceId}`,
        statusbar: false,//右下角版权信息隐藏
        // directionality: 'ltr',
        // language: '/addmin/langs/zh_CN.js', // 显示语种
        language_url: '/admin/tinymce/js/tinymce/langs/zh_CN.js',
        language: 'zh_CN',//注意大小写
        height: 700, // 高度
        paste_data_images: true, // 是否允许粘贴图像
        images_upload_credentials: true,
        object_resizing : 'myBox',//给某一个类名添加可修改大小
        body_class: 'panel-body ',
        plugins: 'template importcss codesample advlist autolink link image imagetools lists preview fullscreen emoticons help hr  code insertdatetime autosave charmap directionality media pagebreak preview searchreplace table visualblocks visualchars wordcount autolink link media preview print toc visualchars wordcount anchor', //插件-字符串方式
        toolbar: [
          'template styleselect  formatselect fontselect fontsizeselect bullist numlist indent outdent blockquote link help emoticons code insertdatetime restoredraft media pagebreak searchreplace visualchars wordcount fullscreen',
          'alignleft aligncenter alignright lineheight visualaid forecolor backcolor bold codesample italic underline strikethrough subscript superscript formats removeformat undo redo hr charmap ltr rtl media image',
          "table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol visualchars toc anchor wordcount print link preview visualblocks",
        ],
        // menubar: "format",
        // 自定义插入视频代码
        video_template_callback: function(data) {
          console.log(data);
        return '<video width="' + data.width + '" height="' + data.height 
        + '"' + (data.poster ? ' poster="' + data.poster + '"' : '')
        + ' controls="controls">\n' + '<source src="' + data.source1 + '"' 
        + (data.source1mime ? ' type="' + data.source1mime + '"' : '') + ' />\n' 
        + (data.source2 ? '<source src="' + data.source2 + '"' 
        + (data.source2mime ? ' type="' + data.source2mime + '"' : '') + ' />\n' : '') 
        + '</video>';
    },
        templates: [
          { title: '自定义布局-左右500*300', description: 'product', content: `<div class="myBox" style="width: 500px;height: 300px;padding:0px,0px,0px,0px;margin: 0px 0px 0px 0px;display: flex;justify-content: space-between;align-items: center;">
            <div class="sun-left" style="width: 50%;height: 100%;padding:0px,0px,0px,0px;margin: 0px 0px 0px 0px;">左</div>
            <div class="sun-right" style="width: 50%;height: 100%;padding:0px,0px,0px,0px;margin: 0px 0px 0px 0px;">右</div>
            </div>占位符` },
          { title: '产品-Banner', description: 'cdate', content: '<img src="http://dev.vzhilin.com/files/2022/6/ae232680-90ea-4fcb-9416-2d392b24a76e.png" style="width: 100%; height: 340px; object-fit: cover; object-fit: cover;vertical-align: middle;" class="one_img" alt="">占位符' },
          {
            title: '产品-平台介绍', description: 'cdate', content: `<div class="platform_box" style="padding-top: 40px;width: 1200px;margin: 0 auto;height: 80%;display: flex;justify-content: space-around;box-sizing: border-box;">
          <div class="left_introduce" style="overflow: hidden;margin-right: 126px;">
            <div class="introduce_name" style="margin-top: 32px;margin-bottom: 14px;"><p>产业学院运行管理平台</p></div>
            <div class="introduce_text" style="">
              产业学院管理服务平台覆盖产业学院运行、教学组织与管理、在企生产管理、技术革新项目管理、创新创业管理、成果转化管理等领域，借助互联网平台链接学院师生、行业企业、社会组织等人员，以微服务的方式，串接产业学院的各类业务场景和活动，将应用型人才培养与地方产业发展结合，为区域产业发展提供人力与1智力支持。
            </div>
          </div>
          <img style="width: 486px;height: 278px;object-fit: cover;vertical-align: middle;" src="http://dev.vzhilin.com/files/2022/6/ae232680-90ea-4fcb-9416-2d392b24a76e.png" style="max-width:100%;">
        </div>占位符`},
          {
            title: '产品-平台结构', description: 'product', content: `<div class="platformConstruction" style=" width: 100%;
      height: 834px;
      background: #f5faff;
      overflow: hidden;
      box-sizing: border-box;">
        <div class="construction_title" style="    width: 100%;
        height: 20%;
        text-align: center;
        padding: 61px 0 0 0;
        font-size: 32px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
        box-sizing: border-box;">平台结构</div>
        <div class="construction_box" style="    width: 1200px;
        height: 80%;
        margin: 0 auto;
        display: flex;
        justify-content: center;"><img style=" object-fit: cover;
          width: 996px;
          height: 628px;" src="/files/2022/7/d102995c-ad5a-4600-9a42-f6109f1e54d0.png" style="max-width:100%;"><br></div>
      </div>占位符` },
          {
            title: '产品-应用场景', description: 'product', content: `<div class="sceneLayout" style="width: 100%;
      background-color: #fff;
      overflow: hidden;">
        <div class="layout_title" style="width: 100%;
      height: 102px;
      margin-bottom: 48px;
      text-align: center;
      padding: 61px 0 0 0;
      font-size: 32px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      box-sizing: border-box;">
          应用场景
        </div>
        <div class="sceneBox" style="width: 1200px;
        height: calc(100% - 150px);
        margin: 0 auto;
        box-sizing: border-box;">
          <div class="scene_item" style="width: 100%;">
            <div class="item" style="  width: 100%;
            height: 223px;
            display: flex;
            margin-bottom: 96px;
            box-sizing: border-box;">
              <div class="one_img" style="width: 485px !important;
              height: 223px !important;
              margin-right: 80px;
              vertical-align: middle;"><img style="" src="/files/2022/7/2aab38c1-7d1f-438d-8017-de08cdefcd5f.png" style="max-width:100%;width: 485px !important;
                height: 223px !important;
                vertical-align: middle;"><br></div>
              <div class="one_center" style=" width: 635px;">
                <div class="center_title" style="  margin-top: 23px;
                margin-bottom: 16px;
                font-size: 24px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #0066cc;
                line-height: 33px;"><p>运行管理服务系统</p></div>
                <div class="center_text" style="  font-size: 18px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #666666;
                line-height: 32px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 4;"><p>运行管理服务系统主要提供产业学院从组织运转、信息展示到运行监管，帮助产业学院按照相应的规范开展活动，逐步规范工作流程，提升运行效果。系统展示产业学院的理事会信息、章程、专业集群，展示学院产、学、研、转、创，五位一体的多元人才培养过程以及取得的成效。</p></div>
              </div>
            </div>
            <div class="item" style=" width: 100%;
            height: 223px;
            display: flex;
            margin-bottom: 96px;
            box-sizing: border-box;">
              <div class="one_center" style="margin-right: 80px;">
                <div class="center_title" style=" margin-top: 23px;
                margin-bottom: 16px;
                font-size: 24px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #0066cc;
                line-height: 33px;text-align: right;">设计2</div>
                <div class="center_text" style="  font-size: 18px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #666666;
                line-height: 32px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 4;">
                  运行管理服务系统主要提供产业学院从组织运转、信息展示到运行监管，帮助产业学院按照相应的规范开展活动，逐步规范工作流程，提升运行效果。系统展示产业学院的理事会信息、章程、专业集群，展示学院产、学、研、转、创，五位一体的多元人才培养过程以及取得的成效。运行管理服务系统主要提供产业学院从组织运转、信息展示到运行监管，帮助产业学院按照相应的规范开展活动，逐步规范工作流程，提升运行效果。系统展示产业学院的理事会信息、章程、专业集群，展示学院产、学、研、转、创，五位一体的多元人才培养过程以及取得的成效。
                </div>
              </div>
              <div class="one_img" style=" width: 485px !important;
              height: 223px !important;
              vertical-align: middle;"><img style=" width: 485px !important;
                height: 223px !important;
                vertical-align: middle;" src="/files/2022/7/b11ce5f7-65d0-4df8-86c8-77f9b9b177af.png" style="max-width:100%;"><br></div>
            </div>
            子元素占位符
          </div>
          </div>
      </div>占位符` },
          {
            title: '产品-应用场景-子元素', description: 'product', content: ` <div class="scene_item" style="width: 100%;">
            <div class="item" style="  width: 100%;
            height: 223px;
            display: flex;
            margin-bottom: 96px;
            box-sizing: border-box;">
              <div class="one_img" style="width: 485px !important;
              height: 223px !important;
              margin-right: 80px;
              vertical-align: middle;"><img style="" src="/files/2022/7/2aab38c1-7d1f-438d-8017-de08cdefcd5f.png" style="max-width:100%;width: 485px !important;
                height: 223px !important;
                vertical-align: middle;"><br></div>
              <div class="one_center" style=" width: 635px;">
                <div class="center_title" style="  margin-top: 23px;
                margin-bottom: 16px;
                font-size: 24px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #0066cc;
                line-height: 33px;"><p>运行管理服务系统</p></div>
                <div class="center_text" style="  font-size: 18px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #666666;
                line-height: 32px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 4;"><p>运行管理服务系统主要提供产业学院从组织运转、信息展示到运行监管，帮助产业学院按照相应的规范开展活动，逐步规范工作流程，提升运行效果。系统展示产业学院的理事会信息、章程、专业集群，展示学院产、学、研、转、创，五位一体的多元人才培养过程以及取得的成效。</p></div>
              </div>
            </div>
            <div class="item" style=" width: 100%;
            height: 223px;
            display: flex;
            margin-bottom: 96px;
            box-sizing: border-box;">
              <div class="one_center" style="margin-right: 80px;">
                <div class="center_title" style=" margin-top: 23px;
                margin-bottom: 16px;
                font-size: 24px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #0066cc;
                line-height: 33px;text-align: right;">设计2</div>
                <div class="center_text" style="  font-size: 18px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #666666;
                line-height: 32px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 4;">
                  运行管理服务系统主要提供产业学院从组织运转、信息展示到运行监管，帮助产业学院按照相应的规范开展活动，逐步规范工作流程，提升运行效果。系统展示产业学院的理事会信息、章程、专业集群，展示学院产、学、研、转、创，五位一体的多元人才培养过程以及取得的成效。运行管理服务系统主要提供产业学院从组织运转、信息展示到运行监管，帮助产业学院按照相应的规范开展活动，逐步规范工作流程，提升运行效果。系统展示产业学院的理事会信息、章程、专业集群，展示学院产、学、研、转、创，五位一体的多元人才培养过程以及取得的成效。
                </div>
              </div>
              <div class="one_img" style=" width: 485px !important;
              height: 223px !important;
              vertical-align: middle;"><img style=" width: 485px !important;
                height: 223px !important;
                vertical-align: middle;" src="/files/2022/7/b11ce5f7-65d0-4df8-86c8-77f9b9b177af.png" style="max-width:100%;"><br></div>
            </div>子元素占位符` },

          { title: '服务-Banner', description: 'cdate', content: '<img src="http://dev.vzhilin.com/files/2022/6/ae232680-90ea-4fcb-9416-2d392b24a76e.png" style="width: 100%; height: 384px; object-fit: cover; object-fit: cover;vertical-align: middle;" class="one_img" alt="">占位符' },
          {
            title: '服务-头部介绍', description: 'cdate', content: `<div class="servicesLayout" style="width: 100%; box-sizing: border-box; height: 494px;background: #ffffff;">
          <div class="layoutBox" style="  padding: 64px 0;
        display: flex;
        justify-content: space-between;">
            <div class="background_left" style=" margin-right: 102px;">
              <div class="bg_title" style="margin: 57px 0 16px;
            font-size: 32px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333333;
            line-height: 45px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;">项目背景222</div>
              <div class="bg_text" style=" font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 32px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 6;">
                产业发展带来复合型技能人才需求，单个专业培养无法满足培养要求，这是专业群产生的根本原因。而专业群建设最核心的任务就是以群为口径，重构课程体系。在传统专业模式下，课程内容过窄，学生很少涉猎专业外的知识，不利于了解职业整体情况，不利于形成创新思维和综合素养，影响职业生涯的岗位迁移与持续发展，进而影响社会经济、产业的发展。
              </div>
            </div>
            <img src="/files/2022/7/8c207a1c-d185-4d99-9772-610fa4513641.png" style="max-width:100%; width: 588px;
          height: 366px;
          object-fit: cover;
          vertical-align: middle;">
          </div>
        </div>占位符` },
          {
            title: '服务-重点任务', description: 'product', content: `  <div class="servicesLayout" style="height: 576px;
      background: #f5faff; width: 100%;box-sizing: border-box;">
          <div class="layoutBox" style=" width: 1200px;
        height: 100%;
        margin: 0 auto;
        box-sizing: border-box;">
            <div class="emphasis_title" style="width: 100%;
          height: 90px;
          margin-bottom: 40px;
          text-align: center;
          padding: 48px 0 0 0;
          font-size: 32px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333333;
          box-sizing: border-box;">重点任务</div>
            <div class="emphasis_list" style="width: 100%;
          height: calc(100% - 90px);
          display: flex;
          flex-wrap: wrap;">
              <div class="item" style="padding: 40px 32px 40px 24px;
            width: 49%;
            margin-right: 1%;
            height: 176px;
            display: flex;
            background: #ffffff;
            border-radius: 8px;
            overflow: hidden;
            box-sizing: border-box;">
                <img style="width: 96px;
              height: 96px;
              margin-right: 24px;" src="/files/2022/7/474a7930-8e30-4de1-87e5-fb3cbcf8be8c.png" style="max-width:100%;"><div class="text">整合群内各专业所共同必需的知识、技能和素质，面向群内所有专业学生开设，帮助他们形成对职业领域的整体认知，掌握职业通用能力。</div>
              </div>
              <div class="item" style="padding: 40px 32px 40px 24px;
            width: 49%;
            margin-right: 1%;
            height: 176px;
            display: flex;
            background: #ffffff;
            border-radius: 8px;
            overflow: hidden;
            box-sizing: border-box;margin-right: 0;">
                <img style="width: 96px;
              height: 96px;
              margin-right: 24px;" src="/files/2022/7/9a827728-65f7-45fc-94cf-13f712b84587.png" style="max-width:100%;"><div class="text">整合群内各专业所共同必需的知识、技能和素质，面向群内所有专业学生开设，帮助他们形成对职业领域的整体认知，掌握职业通用能力。</div>
              </div>
              <div class="item" style="padding: 40px 32px 40px 24px;
            width: 49%;
            margin-right: 1%;
            height: 176px;
            display: flex;
            background: #ffffff;
            border-radius: 8px;
            overflow: hidden;
            box-sizing: border-box;">
                <img style="width: 96px;
              height: 96px;
              margin-right: 24px;" src="/files/2022/7/a99e041d-e656-4ab5-89b3-be06a41e3213.png" style="max-width:100%;"><div class="text">整合群内各专业所共同必需的知识、技能和素质，面向群内所有专业学生开设，帮助他们形成对职业领域的整体认知，掌握职业通用能力。</div>
              </div>
              <div class="item" style="padding: 40px 32px 40px 24px;
            width: 49%;
            margin-right: 1%;
            height: 176px;
            display: flex;
            background: #ffffff;
            border-radius: 8px;
            overflow: hidden;
            box-sizing: border-box;margin-right: 0;">
                <img style="width: 96px;
              height: 96px;
              margin-right: 24px;" src="/files/2022/7/29bd3bc9-f5fe-4724-a348-8fbd3d1afab9.png" style="max-width:100%;"><div class="text">整合群内各专业所共同必需的知识、技能和素质，面向群内所有专业学生开设，帮助他们形成对职业领域的整体认知，掌握职业通用能力。</div>
              </div>
            </div>
          </div>
        </div>占位符` },
          {
            title: '服务-专业团队', description: 'product', content: `
        <div class="servicesLayout5" style="      height: 647px;
      background: #ffffff;width: 100%;
      box-sizing: border-box;">
          <div class="layoutBox" style=" width: 1200px;
        height: 100%;
        margin: 0 auto;
        box-sizing: border-box;">
            <div class="team_title" style="  width: 100%;
          height: 90px;
          margin-bottom: 40px;
          text-align: center;
          padding: 48px 0 0 0;
          font-size: 32px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333333;
          box-sizing: border-box;">专业团队</div>
            <div class="team_list" style=" width: 100%;
          height: calc(100% - 90px);
          display: flex;">
              <div class="handleTeam1 team_item" style="width: 20%;
            height: 439px;
            padding: 0 33px;
            border: 1px solid black;
            margin-right: -1px;
            margin-bottom: -1px;
            transition: all 0.5s; background: url('~@/assets/images/professionalTeam/team1.png')
              no-repeat center;" @click="isTeam = i">
                <div class="handleTeam1 imgIcon" style=" width: 100%;
              text-align: center;"><img style="" src="/files/2022/7/2bcb08e5-e8f4-4659-8173-d836de50331c.png" style="max-width:100%; width: 48px;
                height: 48px;
                margin: 262px 0 12px;
                // background: #fff;
                object-fit: cover;
                vertical-align: middle;"><br></div>
                <div class="handleTeam1 team_name" style=" width: 100%;
              text-align: center;
              font-size: 24px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #ffffff;
              line-height: 32px;">咨询服务团队</div>
                <div class="handleTeam1 team_text" style=" display: none;
              font-size: 16px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              line-height: 24px;">可以通过大数据分析技术，通过抓取岗位招聘信息，对行业情况进行精准分析。</div>
              </div>
              <div class="handleTeam1 team_item" style="width: 20%;
            height: 439px;
            padding: 0 33px;
            border: 1px solid black;
            margin-right: -1px;
            margin-bottom: -1px;
            transition: all 0.5s; background: url('~@/assets/images/professionalTeam/team2.png')
              no-repeat center;" @click="isTeam = i">
              <div class="handleTeam2 imgIcon" style=" width: 100%;
              text-align: center;"><img style="" src="/files/2022/7/2bcb08e5-e8f4-4659-8173-d836de50331c.png" style="max-width:100%; width: 48px;
                height: 48px;
                margin: 262px 0 12px;
                // background: #fff;
                object-fit: cover;
                vertical-align: middle;"><br></div>
                <div class="handleTeam2 team_name" style=" width: 100%;
              text-align: center;
              font-size: 24px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #ffffff;
              line-height: 32px;">咨询服务团队</div>
                <div class="handleTeam2 team_text" style=" display: none;
              font-size: 16px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              line-height: 24px;">可以通过大数据分析技术，通过抓取岗位招聘信息，对行业情况进行精准分析。</div>
              </div>
              <div class="handleTeam1 team_item" style="width: 20%;
            height: 439px;
            padding: 0 33px;
            border: 1px solid black;
            margin-right: -1px;
            margin-bottom: -1px;
            transition: all 0.5s; background: url('~@/assets/images/professionalTeam/team3.png')
              no-repeat center;" @click="isTeam = i">
              <div class="handleTeam3 imgIcon" style=" width: 100%;
              text-align: center;"><img style="" src="/files/2022/7/2bcb08e5-e8f4-4659-8173-d836de50331c.png" style="max-width:100%; width: 48px;
                height: 48px;
                margin: 262px 0 12px;
                // background: #fff;
                object-fit: cover;
                vertical-align: middle;"><br></div>
                <div class="handleTeam3 team_name" style=" width: 100%;
              text-align: center;
              font-size: 24px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #ffffff;
              line-height: 32px;">咨询服务团队</div>
                <div class="handleTeam3 team_text" style=" display: none;
              font-size: 16px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              line-height: 24px;">可以通过大数据分析技术，通过抓取岗位招聘信息，对行业情况进行精准分析。</div>
              </div>
              <div class="handleTeam1 team_item team_isTeam" style="width: 20%;
            height: 439px;
            padding: 0 33px;
            border: 1px solid black;
            margin-right: -1px;
            margin-bottom: -1px;
            transition: all 0.5s; background: url('~@/assets/images/professionalTeam/team4.png')
              no-repeat center;" @click="isTeam = i">
              <div class="handleTeam4 imgIcon" style=" width: 100%;
              text-align: center;"><img style="" src="/files/2022/7/2bcb08e5-e8f4-4659-8173-d836de50331c.png" style="max-width:100%; width: 48px;
                height: 48px;
                margin: 262px 0 12px;
                // background: #fff;
                object-fit: cover;
                vertical-align: middle;"><br></div>
                <div class="handleTeam4 team_name" style=" width: 100%;
              text-align: center;
              font-size: 24px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #ffffff;
              line-height: 32px;">咨询服务团队</div>
                <div class="handleTeam4 team_text" style=" display: none;
              font-size: 16px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              line-height: 24px;">可以通过大数据分析技术，通过抓取岗位招聘信息，对行业情况进行精准分析。</div>
              </div>
              
            </div>
          </div>
        </div>
        占位符` },
        { title: '服务-构建流程', description: 'product', content: `
        <div class="servicesLayout" style=" height: 685px;
      background: #f5faff; padding-bottom: 77px;">
          <div class="structure_title" style="width: 100%;
        height: 90px;
        margin-bottom: 40px;
        text-align: center;
        padding: 48px 0 0 0;
        font-size: 32px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
        box-sizing: border-box;">构建流程</div>
          <img style=" width: 735px;
        height: 484px;
        height: calc(100% - 130px);
        display: flex;
        margin: 0 auto;" src="/files/2022/7/af0d1ddd-4233-447d-b113-138179a98475.png" style="max-width:100%;">
        </div>
        占位符` },
        { title: '服务-预期效果', description: 'product', content: `
        <div class="servicesLayout" style="height: 192px;">
          <div class="layoutBox" style=" width: 100%;
        background: url('~@/assets/images/professionalTeam/expect_bg.png')
          no-repeat center;
        background-size: 100% 100%;">
            <div class="expect_title" style="  width: 100%;
          height: 90px;
          margin-bottom: 16px;
          text-align: center;
          padding: 48px 0 0 0;
          font-size: 32px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #fff;
          box-sizing: border-box;">预期效果</div>
            <div class="expect_text" style=" margin: 0 auto;
          width: 820px;
          height: 96%;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          line-height: 24px;">
              以专业群为单位建设课程体系，能集聚学校优势资源，共建共享，提高办学效率，提升办学特色，构建品牌专业群，促进学校发展。学生能更贴合社会对技术技能型人才的需满足社会对综合性人才的需求，支撑产业升级转型。</div>
          </div>
        </div>
        占位符` },
        ],
        imagetools_cors_hosts: ['mydomain.com', 'otherdomain.com'],//图片跨域导致的选中图片不可编辑-图片编辑插件
        imagetools_proxy: 'proxy.php',//图片跨域
        content_css: "/admin/tinymce/js/tinymce/static/mycss.css",//自定义样式
        fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
        font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
        content_style: "img {max-width:100%;}",
        images_upload_url: `${process.env.VUE_APP_BASE_API + this.uploadPath}`, // 上传接口
        // images_upload_base_path: '/demo',
        images_upload_handler: (blobInfo, succFun, failFun) => {
          // var xhr, formData;
          var file = blobInfo.blob();//转化为易于理解的file对象
          // formData = new FormData();
          // formData.append('file', file, file.name);//此处与源文档不一样
          let formdata = new FormData();
          formdata.append('file', file);
          axios({
            url: `${process.env.VUE_APP_BASE_API + this.uploadPath}`, // 上传接口
            method: 'post',
            data: formdata,
            headers: { 'Content-Type': 'multipart/form-data', Authorization: `Bearer ${store.getters.token}` }
          }).then(res => {
            // console.log(window.location.origin);
            console.log(res);
            //上传完图片后直接插入到html中
            // insertFn('http://dev.vzhilin.com' + res.data.Result.Path);
            succFun('http://dev.vzhilin.com' + res.data.Result.Path)
          })

        },
        images_upload_base_path: '',
        init_instance_callback: (editor) => {
          editor.on('Change', (e) => {//input事件会导致图片丢失
            console.log(window.tinymce.get(this.tinymceId).getContent());
            this.$emit('input', window.tinymce.get(this.tinymceId).getContent())
          });
        }
      })
    }
  },
  setContent(value) {
    window.tinymce.get(this.tinymceId).setContent(value)
  },
  getContent() {
    console.log(window.tinymce.get(this.tinymceId).getContent());
    // return window.tinymce.get(this.tinymceId).getContent()
  },
  activated() {
    // 每次都给编辑器改变不同的key值使其每次切换页面都重新加载
    this.tinymceFlag++;

  },
  beforeDestroy() {
    // 销毁组件前销毁编辑器
    // this.tinymce && this.tinymce.destroy();
  },
};
</script>
<style lang="scss">
.content {
  border: 1px solid #ccc;
  margin-top: 10px;
}
.toolbar {
  border-bottom: 1px solid #ccc;
}
.editor {
  height: 400px !important;
  overflow-y: hidden;
}
</style>
avatar
文章
阅读
粉丝