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

how to enable font family and color options in tinymce editor?

本文关键字：系列 字体 颜色 选项 启用 tinymce 编辑器      更新时间：2023-09-26

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

我已经用这种方式完成了

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.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/

在我的旧版本TinyMCE 4.0.10中，除了其他初始化工具栏和插件选项外，字体和颜色控件也像这样添加到了TinyMCE.init中：

toolbar: "styleselect fontselect fontsizeselect | forecolor backcolor",
plugins: "textcolor"
相关文章：