富文本编辑器tinymce 自定义配置（首行缩进，右键菜单，默认

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

1662450058876.png
1662450080177.png
1662450092187.png

二、配置如下：

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.{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>

···