如何在 tinymce 编辑器中启用字体系列和颜色选项？答案

【问题标题】：how to enable font family and color options in tinymce editor?如何在 tinymce 编辑器中启用字体系列和颜色选项？
【发布时间】：2012-08-28 03:50:37
【问题描述】：

我在我的 cms 上使用 tinymce 编辑器，它有一个普通的文本工具栏，其中有粗体、斜体、下划线和对齐选项，但它没有字体系列更改选项，甚至没有颜色更改。如何启用？

【问题讨论】：

标签： javascript fonts tinymce

【解决方案1】：

我就是这样做的

tinyMCE.init({
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
)};

【讨论】：

这对于 TinyMCE 的旧版本第 3 版是准确的。对于较新的第 4 版有什么想法吗？

【解决方案2】：

这里是升级版的全功能示例

  tinymce.init({
    selector: 'textarea',
    height: 500,
    theme: 'modern',
    plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak',
    'searchreplace wordcount visualblocks visualchars code fullscreen',
    'insertdatetime media nonbreaking save table contextmenu directionality',
    'emoticons template paste textcolor colorpicker textpattern imagetools'
    ],
   toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
   toolbar2: 'print preview media | forecolor backcolor emoticons',
   image_advtab: true,
   templates: [
   { title: 'Test template 1', content: 'Test 1' },
   { title: 'Test template 2', content: 'Test 2' }
   ],
   content_css: ['//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
    '//www.tinymce.com/css/codepen.min.css'
   ]
   });

更多参考请访问https://www.tinymce.com/docs/demo/full-featured/

【讨论】：

【解决方案3】：

在我的旧版 TinyMCE 4.0.10 中，除了您的其他初始化工具栏和插件选项之外，还向 tinymce.init 添加了字体和颜色控件：

toolbar: "styleselect fontselect fontsizeselect | forecolor backcolor",
plugins: "textcolor"

【讨论】：