富文本编辑器tinymce 自定义配置（首行缩进，右键菜单，默认行高，字体大小，字体样式）

一、toorbar 自定义和右键菜单、添加首航缩进、默认行高等设置

二、配置如下：

export const plugins = [ table  ,  image  ,  link ,  fullscreen ,  lists ,
   insertdatetime ,  preview ,  searchreplace ,  wordcount ]
export const toolbar = [ cancel searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample fontsize ,
   hr bullist numlist link image charmap preview anchor pagebreak insertdatetime  table emoticons forecolor backcolor fontfamily styles fullscreen ]
export const editorOptions = {
  base_url:  /tinymce ,
  language_url:  /tinymce/langs/zh-Hans.js , // 语言包的路径
  language:  zh-Hans , // 语言
  skin_url:  /tinymce/skins/ui/oxide , // skin路径
  height: 440, // 编辑器高度
  branding: false, // 是否禁用“Powered by TinyMCE”
  elementpath: false, // 底部html 标签提示
  placeholder:  请输入内容 ,
  plugins: plugins,
  toolbar: toolbar,
  automatic_uploads: true,
  // image_title: false, // 自定义图像的标题
  // image_uploadtab: true, // 允许上传本地图片
  image_description: false, // 图片描述
  // image_dimensions: false, // 图片大小禁止
  // image_prepend_url: imgPrefix, // 图片前缀
  // images_upload_base_path: imgPrefix,

  // images_file_types:  jpeg,jpg,jpe,jfi,jif,jfif,png,gif,bmp,webp , //图片类型

  // image_list: [
  //   { title:  Cat , value:  cat.png  },
  //   { title:  Dog , value:  dog.jpg  }
  // ]
  images_reuse_filename: true, //  使用图片本身的名称
  font_family_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",
  font_size_formats:  12px 14px 16px 18px 20px 24px 26px 28px 30px 32px 34px 36px 38px ,
  line_height_formats:  1 1.2 1.5 2 2.5 ,
  indent_use_margin: true,
  content_style:  body { font-family:微软雅黑,Arial,sans-serif; font-size:16px;line-height:2 } ,
  contextmenu:  copy paste | link image inserttable | cell row column deletetable ,
  style_formats: [
    {
      title:  首行缩进 ,
      block:  p ,
      styles: {  text-indent :  2em  }
    },
    {
      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 , format:  bold  },
        { title:  Italic , format:  italic  },
        { title:  Underline , format:  underline  },
        { title:  Strikethrough , format:  strikethrough  },
        { title:  Superscript , format:  superscript  },
        { title:  Subscript , format:  subscript  },
        { title:  Code , format:  code  }
      ]
    },
    {
      title:  Blocks ,
      items: [
        { title:  Paragraph , format:  p  },
        { title:  Blockquote , format:  blockquote  },
        { title:  Div , format:  div  },
        { title:  Pre , format:  pre  }
      ]
    },
    {
      title:  Align ,
      items: [
        { title:  Left , format:  alignleft  },
        { title:  Center , format:  aligncenter  },
        { title:  Right , format:  alignright  },
        { title:  Justify , format:  alignjustify  }
      ]
    }
  ]
  // style_formats: [
  //   {
  //     title:  首行缩进 ,
  //     block:  p ,
  //     styles: {  text-indent :  2em  }
  //   }]
}

初始化tinymce

···
<template>
<Editor
ref=”editor”
id=”editor”
:init=”initEditor”
v-model=”content”
:disabled=”disabled”
@onChange=”handlerSave”
@onCancel=”handlerCancle”
/>

</template>
<script>
import { imgPrefix } from @/config
import tinymce from tinymce/tinymce
import Editor from @tinymce/tinymce-vue
import tinymce/themes/silver
import tinymce/icons/default
import tinymce/models/dom
// 引入你需要的插件
import tinymce/plugins/link
import tinymce/plugins/image
import tinymce/plugins/table
import tinymce/plugins/fullscreen
import tinymce/plugins/lists
import tinymce/plugins/media
import tinymce/plugins/insertdatetime
import tinymce/plugins/preview
import tinymce/plugins/searchreplace
import tinymce/plugins/wordcount
import { editorOptions } from ./editor.js
export default {
props: {
editorContent: {
type: String,
default: () => null
}
},
components: { Editor },

data () {
return {
content: ,
disabled: false, // 是否禁止

  initEditor: {
    images_upload_handler: this.handlerAddImg
  }
}

},
created () {
this.initEditor = { …this.initEditor, …editorOptions }
this.$nextTick(() => {
setTimeout(() => {
if (tinymce && this.editorContent) {
tinymce.get( editor ).setContent(this.editorContent)
}
}, 500)
})
},
beforeDestroy () {

},
methods: {
/**
* 清空
/
clear () {
this.content = null
tinymce.get( editor ).setContent( )
},
/*
* 监听change
/
handlerChange (value, render) {
console.log( change , value, render, this.content)
this.emit( change , this.content) // save
},
/*
* 添加图片
*/
handlerAddImg (blobInfo, progress, remove) {
return new Promise((resolve, reject) => {
const formData = new FormData()
formData.append( file , blobInfo.blob())
this. { if (res.code === 200) { resolve(`” mathimg=”1″>{imgPrefix}/${res.data.pic}`)
} else {
reject(res?.msg)
}
}).catch(res => {
reject(res)
})
})
},
handlerCancle () {
console.log( shanshanshan )
}

}
}
</script>
<style lang=”scss”>
.tox-dialog__body{
@include flexLayout($horizontal:column);

}
</style>

···