TinyMCE 6 - Vue 2.6.14 - Vue Integration Issue with FontSize and FontFamily

Question

We are currently upgrading our version of TinyMCE to 6.4.0 since the version we currently use will be losing support soon. During the upgrade, we have found that the Vue plugin for TinyMCE seems to no longer recognize the fontfamily and fontsize toolbar options. On another page we use the Jquery options for TinyMCE, and that works fine, displaying the fontfamily and fontsize drop down options, but for some reason the Vue integration refuses to display the options.

I have tried removing our custom font_size_formats, font_family_formats, moved the toolbar options to different areas, and have viewed the page source just in case the options are in some way hidden, and was unable to find them. There are no errors being thrown on loading the TinyMCE editor.

Here is our object config. The same config is used for both Jquery and Vue.

{
  height: 250,
  contextmenu: false,
  menubar: false,
  resize: false,
  entity_encoding: "raw",
  statusbar: false,
  forced_root_block: "div",
  relative_urls: false,
  convert_urls: false,
  browser_spellcheck: true,
  font_size_formats: "8px 9px 10px 11px 12px 14px 16px 18px 20px 22px 24px 26px 28px 36px 48px 72px",
  font_family_formats: "Arial=arial,helvetica,sans-serif;Arial Black=arial black,arial bold,gadget,sans-serif;Book Antiqua=book antiqua,palatino,palatino linotype,palatino lt std,georgia,serif;Century Gothic=century gothic,centurygothic,applegothic,sans-serif;Comic Sans MS=comic sans ms,lucida sans,tahoma;Courier New=courier new,courier,monospace;Georgia=georgia,serif;Lucida Sans Unicode=lucida sans unicode,lucida grande,sans-serif;Monaco=monaco,consolas,lucida console,monospace;Palatino=palatino,palatino linotype,palatino lt std,book antiqua,georgia,serif;Tahoma=tahoma,geneva,sans-serif;Times New Roman=times new roman,times,serif;Trebuchet MS=trebuchet ms,helvetica,sans-serif;Verdana=verdana,geneva,sans-serif;",
  quickbars_selection_toolbar: "bold italic underline | forecolor backcolor",
  plugins: [
    "advlist",
    "autolink",
    "lists",
    "link",
    "image",
    "charmap",
    "preview",
    "searchreplace",
    "visualblocks",
    "code",
    "fullscreen",
    "emoticons",
    "insertdatetime",
    "media",
    "table",
    "help",
    "wordcount"
  ],
  toolbar: ["fontfamily | fontsize | bold italic underline strikethrough | superscript subscript | bullist numlist checklist outdent indent | alignleft aligncenter alignright alignjustify | charmap emoticons | removeformat | undo redo help | code"]
}

I have to do a summary of the page, so here is the import, components, and the use of the editor on the page. editor_config is the above object. Any advise as to why the fontfamily and fontsize isn't showing up would be most appreciated.

<editor
  api-key="apikey"
  v-model="property"
  :init="editor_config"
/>

import Editor from "@tinymce/tinymce-vue";

components: {
   Editor: Editor,
},

In summary, we have tried:

Removing font_size_formats
Removing font_family_formats
Moving the toolbar references to a different location
Changing from an array toolbar to a single string toolbar

TinyMCE 6 - Vue 2.6.14 - Vue Integration Issue with FontSize and FontFamily

0 Answers0