TinyMCE富文本编辑器的配置

tinymce官方文档：http://tinymce.ax-z.cn/

1. 允许上传本地视频

在init中加上如下代码，需要修改服务器上传地址。

file_picker_callback: (callback, value, meta) => {
          if (meta.filetype == 'media') {
            let input = document.createElement('input') //创建一个隐藏的input
            input.setAttribute('type', 'file')
            input.setAttribute('accept', '.mp4')
            //  let _this = this;
            input.onchange = function() {
              let file = this.files[0] //选取第一个文件
              if (file.size / 1024 / 1024 > 10) {
                //文件大于10M
                _this.$message.error('文件大小超出10MB限制, 请压缩或降低文件质量! ')
                return
              }
              // _this.uploadVideo(file, 'media') // 上传视频拿到url
              //---------
              let content = file
              let formData = new FormData()
              formData.append('file', content)
              console.log(file, formData)
              axios({
                method: 'post',
                //服务器上传地址
                url: '/sys/upload/uploadFile',
                data: formData,
                headers: {
                  // 修改请求头
                  'Content-Type': 'multipart/form-data'
                }
              }).then(res => {
                if (res.success) {
                  _this.resVideo = res.result.url
                  _this.uploaded = true
                  console.log(333, _this.uploaded)
                  callback(_this.resVideo, { title: file.name }) //将url显示在弹框输入框中
                } else {
                  console.log(res.message)

                  _this.$message.warning(res.message)
                }
              })
            }
            //触发点击
            input.click()
          }
        }

2. 允许粘贴图片

导入import "tinymce/plugins/paste"

init中添加paste_data_images: true,//图片是否可粘贴

这样即可实现粘贴图片。（不能粘贴doc文件中的图片）

3. 工具栏添加字体字号行高颜色等

init中添加如下代码

fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px',
font_formats: "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;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;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
lineheight_formats: '1 1.5 2 2.5 3 3.5 4 4.5 5',
//配置默认字体
        setup: function(editor) {
                editor.on('init', function(ed) {
                    ed.target.editorCommands.execCommand("fontName", false, "微软雅黑");
                  });                       
              },

4. ul和ol显示时会超出div 怎么设缩进？

一般情况下，ul是有这个属性的，所以会显示缩进。

自己项目中ul默认没有这个属性，因此需要加上。

/deep/ .contentBox ul{
padding-inline-start: 40px !important;
}
/deep/ .contentBox ol{
padding-inline-start: 40px !important;
}

5. 图片超出div怎么处理？

将图片的最大宽度设为100%，高度自适应即可。

/deep/ .contentBox img {
  max-width: 100% !important;
  height: auto !important;
}