一、toorbar 自定義和右鍵菜單、添加首航縮進(jìn)、默認(rèn)行高等設(shè)置

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 標(biāo)簽提示
  placeholder: '請(qǐng)輸入內(nèi)容',
  plugins: plugins,
  toolbar: toolbar,
  automatic_uploads: true,
  // image_title: false, // 自定義圖像的標(biāo)題
  // 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: '首行縮進(jìn)',
      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: '首行縮進(jìn)',
  //     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('')
},
/*
* 監(jiān)聽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>

···