vue-element-admin 项目 tinymce 相关配置

前言

vue-element-admin 项目中使用 tinymce ，是以组件形式使用的。整个组件内都没看到单独的 css 文件。

目录结构如下

效果预览

tinymce 相关配置

增加字体大小、字体选择

工具栏 toolbar.js

toolbar 数组，一个元素是一排。

同一排的 各项配置 空格 分割

字体大小选择

fontsizeselect 

字体选择

fontselect

// Here is a list of the toolbar
// Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
// formatselect 段落 标题选项

const toolbar = [
  'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
  'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen formatselect fontsizeselect fontselect'
]

export default toolbar

组件入口页 index.vue

字体大小选择

fontsize_formats: '12px 14px 16px 18px 24px 36px',

tinymce.init 完整配置