FE_huoran_server/src/components/editor.js

import Axios from 'axios'
import Api from '@/api'
import Setting from '@/setting'
import Util from '@/libs/util'
import store from '@/store'
export default {
  //skin:'oxide-dark',
  language: 'zh_CN',
  language_url: './styles/tinymce/langs/zh_CN.js',
  plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave autoresize formatpainter paragraphspacing',
  toolbar: 'code undo redo restoredraft | cut copy pastetext | forecolor backcolor headings fontsize lineHeight bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify | \
    styleselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
    table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | indent2em formatpainter | paragraphspacing',
  style_formats: [
    //新增 首行缩进与行高 配置
    {
      title: '首行缩进',
      block: 'p',
      styles: {
        'text-indent': '2em'
      }
    },
    {
      title: '行高',
      items: [{
        title: '1',
        styles: {
          'line-height': '1'
        },
        inline: 'span'
      },
      {
        title: '1.5',
        styles: {
          'line-height': '1.5'
        },
        inline: 'span'
      },
      {
        title: '2',
        styles: {
          'line-height': '2'
        },
        inline: 'span'
      },
      {
        title: '2.5',
        styles: {
          'line-height': '2.5'
        },
        inline: 'span'
      },
      {
        title: '3',
        styles: {
          'line-height': '3'
        },
        inline: 'span'
      }
      ]
    },
    //默认的配置
    {
      title: 'headings',
      items: [
        {
          title: 'Heading 1',
          format: 'h1'
        },
        {
          title: 'Heading 2',
          format: 'h2'
        },
        {
          title: 'Heading 3',
          format: 'h3'
        },
        {
          title: 'Heading 4',
          format: 'h4'
        },
        {
          title: 'Heading 5',
          format: 'h5'
        },
        {
          title: 'Heading 6',
          format: 'h6'
        }
      ]
    },
    {
      title: 'Inline',
      items: [
        {
          title: 'Bold',
          icon: 'bold',
          format: 'bold'
        },
        {
          title: 'Italic',
          icon: 'italic',
          format: 'italic'
        },
        {
          title: 'Underline',
          icon: 'underline',
          format: 'underline'
        },
        {
          title: 'Strikethrough',
          icon: 'strikethrough',
          format: 'strikethrough'
        },
        {
          title: 'Superscript',
          icon: 'superscript',
          format: 'superscript'
        },
        {
          title: 'Subscript',
          icon: 'subscript',
          format: 'subscript'
        },
        {
          title: 'Code',
          icon: 'code',
          format: 'code'
        }
      ]
    },
    {
      title: 'Blocks',
      items: [
        {
          title: 'Paragraph',
          format: 'p'
        },
        {
          title: 'Blockquote',
          format: 'blockquote'
        },
        {
          title: 'Div',
          format: 'div'
        },
        {
          title: 'Pre',
          format: 'pre'
        }
      ]
    },
    {
      title: 'Alignment',
      items: [
        {
          title: 'Left',
          icon: 'alignleft',
          format: 'alignleft'
        },
        {
          title: 'Center',
          icon: 'aligncenter',
          format: 'aligncenter'
        },
        {
          title: 'Right',
          icon: 'alignright',
          format: 'alignright'
        },
        {
          title: 'Justify',
          icon: 'alignjustify',
          format: 'alignjustify'
        }
      ]
    }
  ],
  promotion: false,
  branding: false,
  height: 650, //编辑器高度
  min_height: 400,
  content_css: [ //可设置编辑区内容展示的css，谨慎使用
    './styles/css/editor.css',
  ],
  // content_style: Style,
  fontsize_formats: '12px 14px 16px 18px 19px 22px 24px 36px 48px 56px 72px',
  font_formats: '鸿蒙=Harmony;思源=siyuan;宋体=simsun,serif;微软雅黑=Microsoft YaHei,Helvetica Neue,仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;知乎配置=BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;小米配置=Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif',
  link_list: [
    { title: '预置链接1', value: 'http://www.tinymce.com' },
    { title: '预置链接2', value: 'http://tinymce.ax-z.cn' }
  ],
  image_list: [
    { title: '预置图片1', value: 'https://www.tiny.cloud/images/glyph-tinymce@2x.png' },
    { title: '预置图片2', value: 'https://www.baidu.com/img/bd_logo1.png' }
  ],
  image_class_list: [
    { title: 'None', value: '' },
    { title: 'Some class', value: 'class-name' }
  ],
  //importcss_append: true,
  //自定义文件选择器的回调内容
  file_picker_callback: function (callback, value, meta) {
    if (meta.filetype === 'file') {
      callback('https://www.baidu.com/img/bd_logo1.png', { text: 'My text' });
    }
    if (meta.filetype === 'image') {
      callback('https://www.baidu.com/img/bd_logo1.png', { alt: 'My alt text' });
    }
    if (meta.filetype === 'media') {
      callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.baidu.com/img/bd_logo1.png' });
    }
  },
  //为内容模板插件提供预置模板
  templates: [
    {
      title: '中文文章模板1', description: '图片文字流', content: `
        <div class="tiny-wrap">
          <div class="block">
            <div class="fl">
              <img class="pic" src="images/default.png"/>
              <p class="img-des">图片描述</p>
            </div>
            <div class="texts">
              <p>S³FEL主要由一台超导直线加速器、波荡器、光束线和实验站组成，可产生重复频率达1MHz、电子束能量达2.5 GeV的软X 射线自由电子激光，可在百飞秒内级实现原子、分子及外壳层电子结构的无损、动态监测，是科学家认识和了解物质微观结构及动态变化的“高速摄像机”。S³FEL为科学家和企业用户提供了一种具有超高时间分辨、空间分辨和能量分辨的新方法、新技术。 S³FEL在量子材料、能源催化、生物医药、大气与星际科学、原子分子科学等领域的应用研究，将为促进我国战略性新兴产业创新发展和关键。S³FEL主要由一台超导直线加速器、波荡器、光束线和实验站组成，可产生重复频率达1MHz、电子束能量达2.5 GeV的软X 射线自由电子激光，可在百飞秒内级实现原子、分子及外壳层电子结构的无损、动态监测，是科学家认识和了解物质微观结构及动态变化的“高速摄像机”。S³FEL为科学家和企业用户提供了一种具有超高时间分辨、空间分辨和能量分辨的新方法、新技术。 S³FEL在量子材料、能源催化、生物医药、大气与星际科学、原子分子科学等领域的应用研究，将为促进我国战略性新兴产业创新发展和关键。S³FEL主要由一台超导直线加速器、波荡器、光束线和实验站组成，可产生重复频率达1MHz、电子束能量达2.5 GeV的软X 射线自由电子激光，可在百飞秒内级实现原子、分子及外壳层电子结构的无损、动态监测，是科学家认识和了解物质微观结构及动态变化的“高速摄像机”。S³FEL为科学家和企业用户提供了一种具有超高时间分辨、空间分辨和能量分辨的新方法、新技术。 S³FEL在量子材料、能源催化、生物医药、大气与星际科学、原子分子科学等领域的应用研究，将为促进我国战略性新兴产业创新发展和关键。S³FEL主要由一台超导直线加速器、波荡器、光束线和实验站组成，可产生重复频率达1MHz、电子束能量达2.5 GeV的软X 射线自由电子激光，可在百飞秒内级实现原子、分子及外壳层电子结构的无损、动态监测，是科学家认识和了解物质微观结构及动态变化的“高速摄像机”。S³FEL在量子材料、能源催化、生物医药、大气与星际科学、原子分子科学等领域的应用研究，将为促进我国战略性新兴产业创新发展和关键。S³FEL主要由一台超导直线加速器、波荡器、光束线和实验站组成，可产生重复频率达1MHz、电子束能量达2.5 GeV的软X 射线自由电子激光，可在百飞秒内级实现原子、分子及外壳层电子结构的无损、动态监测，是科学家认识和了解物质微观结构及动态变化的“高速摄像机”。
              </p>
            </div>
          </div>
          <div class="block">
            <div class="fr">
              <img class="pic" src="images/default.png"/>
              <p class="img-des">图片描述</p>
            </div>
            <div>
              <p>集聚世界前沿和原创性科学技术及产业研发，将推动一批高水平大学和科研机构的科技人才队伍建设及相关学科的高质量发展，营造粤港澳大湾区人才高地，并助力粤港澳大湾区国际科技创新中心的建设。此外， S³FEL作为重要的科普教育基地，</p>
              <p>S³FEL汇聚并培养信息、生命、材料、能源等学科领域的国际水平科技领军人才，集聚世界前沿和原创性科学技术及产业研发，将推动一批高水平大学和科研机构的科技人才队伍建设及相关学科的高质量发展，营造粤港澳大湾区人才高地，并助力粤港澳大湾区国际科技创新中心的建设。此外， S³FEL作为重要的科普教育基地，是展示我国科技实力、提高全民族科学素质和民族自信的重要宣传窗口。 S³FEL主体建筑将成为深圳市地标式建筑，促进提升深圳市的城市形象和国际化知名度。S³FEL汇聚并培养信息、生命、材料、能源等学科领域的国际水平科技领军人才，集聚世界前沿和原创性科学技术及产业研发，将推动一批高水平大学和科研机构的科技人才队伍建设及相关学科的高质量发展，营造粤港澳大湾区人才高地，并助力粤港澳大湾区国际科技创新中心的建设。此外， S³FEL作为重要的科普教育基地，是展示我国科技实力、提高全民族科学素质和民族自信的重要宣传窗口。 S³FEL主体建筑将成为深圳市地标式建筑，促进提升深圳市的城市形象和国际化知名度。S³FEL汇聚并培养信息、生命、材料、能源等学科领域的国际水平科技领军人才，集聚世界前沿和原创性科学技术及产业研发，将推动一批高水平大学和科研机构的科技人才队伍建设及相关学科的高质量发展，营造粤港澳大湾区人才高地，并助力粤港澳大湾区国际科技创新中心的建设。此外， S³FEL作为重要的科普教育基地，是展示我国科技实力、提高全民族科学素质和民族自信的重要宣传窗口。 S³FEL主体建筑将成为深圳市地标式建筑，促进提升深圳市的城市形象和国际化知名度。</p>
            </div>
          </div>
        </div>
        `
    },
    {
      title: '英文文章模板1', description: '图片文字流', content: `
        <div class="tiny-wrap">
          <div class="block en-block">
            <div class="fr">
              <img class="pic" src="images/default.png"/>
              <p class="img-des">Picture description</p>
            </div>
            <div>
              <p>One of the major barriers to treating pain effectively is rooted in providers’ fear of killing their patients. This includes caregivers who may be family or friends. In a 2014 study I led of nonprofessional hospice caregivers, we found that the majority of pain medication errors caregivers made involved administering less than the prescribed dose, which makes it difficult for patients to achieve optimal pain relief.</p>
              <p>Meanwhile, more than 11 million Americans – often family members or friends – provide unpaid care for people with Alzheimer's or other dementias, according to calculations by the Alzheimer’s Association. In 2021, caregivers for people with Alzheimer’s or other dementias provided an estimated 16 billion hours of unpaid care valued at nearly $272 billion.My father took her to the emergency room. A doctor found a severe knee infection and took her into surgery. She was hospitalized for two weeks, followed by two months of rehabilitation at a skilled nursing facility.</p>
              <p>If you heated the salt on your kitchen table up to 801 C (1,474 F), it would melt, and you’d have molten salt. However, for making and storing energy, not just any salt will do. Scientists are exploring different combinations of salts to get the exact properties needed to cool and fuel a nuclear power reactor efficiently for decades. These properties include lower melting temperatures, the right consistency, and the ability to absorb high amounts of heat, among others.</p>
              <div class="quote">“We used experimental results to validate our simulation. At the same time, the simulation results provided us more details about which salts to study further. They work with each other.” — Jicheng Guo, chemical engineer at Argonne National Laboratory</div>
              <p>Which molten salt blueprints will deliver the desired traits for a nuclear reactor? The potential variations are nearly endless. The study set out to determine whether computer simulations driven by machine learning could guide and refine real-world experiments at the Advanced Photon Source (APS), a DOE Office of Science user facility at Argonne. The results were recently published in the journal Physical Review B.</p>
              <p>“We used experimental results from the APS to validate our simulation. At the same time, the simulation results provided us more details about which salts to study further. They work with each other,” said Jicheng Guo, a chemical engineer at Argonne and the paper’s lead author. “This allows us to study multiple compositions at the same time.”</p>
            </div>
          </div>
        </div>
        `
    },
    {
      title: '新闻模板', description: '', content: `
        <div class="tiny-wrap">
          <div class="block" style="margin-bottom: 70px;">
            <div class="fr">
              <img class="pic" src="images/default.png"/>
              <p class="img-des">图片描述</p>
            </div>
            <div>
              <p style="text-indent: 2em">S³FEL汇聚并培养信息、生命、材料、能源等学科领域的国际水平科技领军人才，集聚世界前沿和原创性科学技术及产业研发，将推动一批高水平大学和科研机构的科技人才队伍建设及相关学科的高质量发展，营造粤港澳大湾区人才高地，并助力粤港澳大湾区国际科技创新中心的建设。此外， S³FEL作为重要的科普教育基地，是展示我国科技实力、提高全民族科学素质和民族自信的重要宣传窗口。 S³FEL主体建筑将成为深圳市地标式建筑，促进提升深圳市的城市形象和国际化知名度。S³FEL汇聚并培养信息、生命、材料、能源等学科领域的国际水平科技领军人才，集聚世界前沿和原创性科学技术及产业研发，将推动一批高水平大学和科研机构的科技人才队伍建设及相关学科的高质量发展，营造粤港澳大湾区人才高地，并助力粤港澳大湾区国际科技创新中心的建设。此外， S³FEL作为重要的科普教育基地，是展示我国科技实力、提高全民族科学素质和民族自信的重要宣传窗口。 S³FEL主体建筑将成为深圳市地标式建筑，促进提升深圳市的城市形象和国际化知名度。S³FEL汇聚并培养信息、生命、材料、能源等学科领域的国际水平科技领军人才，集聚世界前沿和原创性科学技术及产业研发，将推动一批高水平大学和科研机构的科技人才队伍建设及相关学科的高质量发展，营造粤港澳大湾区人才高地，并助力粤港澳大湾区国际科技创新中心的建设。此外， S³FEL作为重要的科普教育基地，是展示我国科技实力、提高全民族科学素质和民族自信的重要宣传窗口。 S³FEL主体建筑将成为深圳市地标式建筑，促进提升深圳市的城市形象和国际化知名度。</p>
              <div class="quote">
                Here is a long quotation here is a long quotation here is a long quotation 
                here is a long quotation here is a long quotation here is a long quotation 
                here is a long quotation here is a long quotation here is a long quotation.
              </div>
            </div>
          </div>
          <div class="block">
            <div class="img-wrap">
              <img class="pic" src="images/default.png"/>
              <p class="img-des">图片描述</p>
            </div>
            <div class="texts">
            <h6 class="tiny-title">小标题</h6>
            <p style="text-indent: 2em">S³FEL主要由一台超导直线加速器、波荡器、光束线和实验站组成，可产生重复频率达1MHz、电子束能量达2.5 GeV的软X 射线自由电子激光，可在百飞秒内级实现原子、分子及外壳层电子结构的无损、动态监测，是科学家认识和了解物质微观结构及动态变化的“高速摄像机”。S³FEL为科学家和企业用户提供了一种具有超高时间分辨、空间分辨和能量分辨的新方法、新技术。 S³FEL在量子材料、能源催化、生物医药、大气与星际科学、原子分子科学等领域的应用研究，将为促进我国战略性新兴产业创新发展和关键。S³FEL主要由一台超导直线加速器、波荡器、光束线和实验站组成，可产生重复频率达1MHz、电子束能量达2.5 GeV的软X 射线自由电子激光，可在百飞秒内级实现原子、分子及外壳层电子结构的无损、动态监测，是科学家认识和了解物质微观结构及动态变化的“高速摄像机”。S³FEL为科学家和企业用户提供了一种具有超高时间分辨、空间分辨和能量分辨的新方法、新技术。 S³FEL在量子材料、能源催化、生物医药、大气与星际科学、原子分子科学等领域的应用研究，将为促进我国战略性新兴产业创新发展和关键。
            </p>
            </div>
          </div>
        </div>
        `
    },
    {
      title: '图片描述', description: '', content: `
        <div class="tiny-wrap">
          <div class="block">
            <div class="img-wrap">
              <img class="pic" src="images/default.png"/>
              <p class="img-des">图片描述</p>
            </div>
          </div>
        </div>
        `
    }
  ],
  // content_security_policy: "https://cdn.tiny.cloud/1/rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda/tinymce/6/tinymce.min.js",
  // extended_valid_elements:'script[src]',
  //
  // template_cdate_format: '[CDATE: %m/%d/%Y : %H:%M:%S]',
  // template_mdate_format: '[MDATE: %m/%d/%Y : %H:%M:%S]',
  // autosave_ask_before_unload: false,
  toolbar_mode: 'wrap',
  // automatic_uploads: true,
  // images_upload_base_path: '/demo',
  paste_data_images: true,
  powerpaste_allow_local_images: true,
  powerpaste_word_import: 'clean',
  powerpaste_html_import: 'clean',
  // 自定义上传
  images_upload_handler: function (blobInfo, succFun, failFun) {
    const form = new FormData()
    console.log(11, form)
    form.append('file', blobInfo.blob()),
      Axios({
        method: 'post',
        url: Api.upload,
        data: form,
        headers: {
          'Content-Type': 'multipart/form-data',
          token: Util.local.get(Setting.tokenKey)
        },
      }).then(({ data }) => {
        if (data.code === 401) {
          Util.errorMsg(data.msg)
          setTimeout(() => {
            store.dispatch('user/logout')
          }, 1000)
          return false
        }
        succFun(data.url)
      }).catch(res => { })
  },
  //自定义文件选择器的回调内容 此方法只有在点击上方图片按钮才会触发
  file_picker_callback: function (callback, value, meta) {
    if (meta.filetype === 'file') {
      callback('https://www.baidu.com/img/bd_logo1.png', { text: 'My text' });
    }
    if (meta.filetype === 'image') {
      callback('https://www.baidu.com/img/bd_logo1.png', { alt: 'My alt text' });
    }
    // 主要判断 media 
    if (meta.filetype === 'media') {
      // 动态创建上传input，并进行模拟点击上传操作，达到本地上传视频效果。
      let input = document.createElement('input');//创建一个隐藏的input
      input.setAttribute('type', 'file');
      input.setAttribute("accept", ".mp4");
      input.onchange = function () {
        let file = this.files[0];
        let fd = new FormData();
        fd.append("file", file);
        Axios({
          method: 'post',
          url: Api.upload,
          data: fd,
          headers: {
            'Content-Type': 'multipart/form-data',
            token: Util.local.get(Setting.tokenKey)
          },
        }).then(({ data }) => {
          if (data.code === 401) {
            Util.errorMsg(data.msg)
            setTimeout(() => {
              store.dispatch('user/logout')
            }, 1000)
            return false
          }
          callback(data.url)
        }).catch(res => { })
      }
      //触发点击
      input.click();
    }
  },
  // 初始化事件
  setup: function (editor) {
    const that = this
    editor.on('init', function (ed) {
      // 设置默认字体(新增才需要设置)
      if (editor.iframeElement.contentWindow.document.body.innerText === '\n') {
        ed.target.editorCommands.execCommand("fontName", false, "Harmony")
        ed.target.editorCommands.execCommand("fontSize", false, "19px")
        ed.target.editorCommands.execCommand("lineHeight", false, "1.5")
      }
    })
  },
}