相关文章推荐
风流倜傥的麦片  ·  Dependency ...·  1 年前    · 
玩篮球的松树  ·  NSIS ...·  1 年前    · 
知识渊博的花卷  ·  python ...·  1 年前    · 

toolbar 字段增加 fontsizeselect fontselect
toolbar.js:

// toolbar.js文件存的是TinyMCE初始化时加载的工具栏控件, 设置的顺序即代表着在编辑器工具栏上出现的顺序
const toolbar = [
  'styleselect fontselect fontsizeselect formatselect searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript',
  'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime  table emoticons forecolor backcolor  code codesample fullscreen'
export default toolbar

然后,添加fontsize_formatsfont_formats属性:

fontsize_formats: "8pt 10pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 36pt",
        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",

比较完整的信息:

    initTinymce () {
      /**由于TinyMCE允许通过CSS选择器来标识可替换的元素,所以只需要将包含选择器的对象传递给TinyMCE.init(),
       * 这样就将textarea替换为TinyMCE编辑器实例, 做完了最简单的初始化 */
      const _this = this
      window.tinymce.init({
        selector: `#${this.tinymceId}`,
        language: this.languageTypeList['zh'],
        branding: false,    // 隐藏tinymce右下角水印
        height: this.height,
        body_class: 'panel-body ',
        object_resizing: false,  // 是否禁用表格图片大小调整
        toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar, // 分组工具栏控件
        menubar: this.menubar, // 菜单:指定应该出现哪些菜单
        plugins: plugins, // 插件(比如: advlist | link | image | preview等)
        end_container_on_empty_block: true,  // enter键 分块
        powerpaste_word_import: 'merge', // 是否保留word粘贴样式  clean | merge
        code_dialog_height: 450, // 代码框高度 、宽度
        code_dialog_width: 1000,
        advlist_bullet_styles: 'square', // 无序列表 有序列表
        advlist_number_styles: 'default',
        imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
        // paste_data_images: true, // 设置为“true”将允许粘贴图像,而将其设置为“false”将不允许粘贴图像
        default_link_target: '_blank',
        link_title: false,
        plugin_preview_width: 375, // 预览宽度
        plugin_preview_height: 668,// 预览宽度
        nonbreaking_force_tab: true, // inserting nonbreaking space   need Nonbreaking Space Plugin
        fontsize_formats: "8pt 10pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 36pt",
        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",
        style_formats: [
            title: "Line Height",
            items: [
              { title: "1", block: "p", styles: { "line-height": "1.0" } },
              { title: "1.5", block: "p", styles: { "line-height": "1.5" } },
              { title: "1.75", block: "p", styles: { "line-height": "1.75" } },
              { title: "2", block: "p", styles: { "line-height": "2" } },
              { title: "3", block: "p", styles: { "line-height": "3" } },
              { title: "4", block: "p", styles: { "line-height": "4" } },
              { title: "5", block: "p", styles: { "line-height": "5" } }
        style_formats_merge: false, // 此选项可以设置TinyMCE,是将style_formats设置中的样式附加到默认样式格式还是完全替换它们
        style_formats_autohide: true, //(隐藏当前不可用的样式列表)
        init_instance_callback: editor => {
          if (_this.value) {
            editor.setContent(_this.value)
          _this.hasInit = true
          editor.on('NodeChange Change KeyUp SetContent', () => {
            this.hasChange = true
            this.$emit('input', editor.getContent())
        setup (editor) {
          editor.on('FullscreenStateChanged', (e) => {
            _this.fullscreen = e.state
        convert_urls: false,
        images_dataimg_filter (img) {
          // 定义一个自定义过滤器处理base64图像转blobs的逻辑。
          console.log('images_dataimg_filter', img)
        images_upload_handler (blobInfo, success, failure, progress) {
          // 此选项允许你使用自定义函数代替TinyMCE来处理上传操作。
          // blobinfo 是一个对象,包含上传文件的信息
          // success 和 failure 是函数,当向后台上传完图片, 我调用success函数来用服务器地址替换<image>标签的src属性,失败的时候向 failure 传入报错信息
          console.log('images_upload_handler', blobInfo)
          progress(0)
          let files = uploadObject(blobInfo.blob(), (url) => {
            success(url) // succuss(服务图片地址);
            progress(100)

页面效果:
在这里插入图片描述
在这里插入图片描述