Vue中tinymce4.7.5设置字体大小和字体样式

1.第一步:
在toolbar中添加 fontsizeselect (字体大小)和 fontselect (字体样式)

2第二步:
我引用的是tinymce4.7.5 组件 Editor
在初始化editorInit中添加 以下 ,
代表字体小大格式范围 fontsize_formats: “8pt 10pt 12pt 14pt 18pt 24pt 36pt”,

代码示例

import Editor from '@tinymce/tinymce-vue'


      editorInit: {
        language_url: './static/tinymce4.7.5/zh_CN.js',
        language: 'zh_CN',
        convert_urls: false,
        plugins: ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'],
        toolbar: ['searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample fontsizeselect fontselect', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'],
        fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
        images_upload_handler: function(blobInfo, success, failure) {
          const formData = new FormData()
          formData.append('file', blobInfo.blob())
          createStorage(formData).then(res => {
            success(res.data.data.url)
          }).catch(() => {
            failure('上传失败,请重新上传')
          })
        }
      },

效果
Vue中tinymce4.7.5设置字体大小和字体样式_第1张图片
补充:
字体样式想中添加中文字体
找到tinymce.min.js文件
Vue中tinymce4.7.5设置字体大小和字体样式_第2张图片
ctrl + F 搜索 Andale Mono=andale mono
在前面添加如下,总共有两处地方需要添加,然后刷新页面即可看到效果

"宋体=宋体;黑体=黑体;仿宋_GB2312=仿宋_GB2312;楷体_GB2312=楷体_GB2312;隶书=隶书;幼圆=幼圆;微软雅黑=microsoft yahei;

tinymce 默认是英文界面,所以还需要下载一个中文语言包(国内可能需要)
语言包放置在
Vue中tinymce4.7.5设置字体大小和字体样式_第3张图片
在初始化editorInit中添加 以下

language_url: '/static/tinymce4.7.5/zh_CN.js',

示例
Vue中tinymce4.7.5设置字体大小和字体样式_第4张图片

效果如下
Vue中tinymce4.7.5设置字体大小和字体样式_第5张图片

你可能感兴趣的:(vue)