CODEWITHSUNDEEP
javascriptfontstinymce
Harish Kumar
Harish Kumar

Reputation: 995

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

I am using a tinymce editor on my cms its having a normal text toolbar where it has bold,italic,underline, and justify option but it dont have the font family change option and not even color change. how to enable that?

Upvotes: 7

Views: 34080

Answers (3)

Matthew Lock
Matthew Lock

Reputation: 13536

In my old version of TinyMCE 4.0.10 font and color controls are added like so to tinymce.init in addition to your other init toolbar and plugin options:

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

Upvotes: 6

Harish Kumar
Harish Kumar

Reputation: 995

for the upgraded version here is the full featured example

  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'
   ]
   });

for more reference visit https://www.tinymce.com/docs/demo/full-featured/

Upvotes: 9

Harish Kumar
Harish Kumar

Reputation: 995

i have done this in this way

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",
)};

Upvotes: 12

Related Questions