Как использовать пользовательские шрифты в TinyMCE, используя пакет tinymce- vue для VueJS?

Question

Я пытаюсь использовать пользовательские шрифты, хранящиеся в моей папке assets / fonts с TinyMCE, но кажется, что он не может отобразить шрифт, кроме селектора формата. Содержимое не отображает шрифт правильно, хотя селектор шрифта показывает, что шрифт применяется (в заголовке, например).

Вот код на данный момент:

<template>
  <tinymce-editor
    :key="id"
    :initial-value="initialValue"
    :resize="false"
    :init="{
      selector: 'textarea#format-custom',
      height: height,
      plugins: 'table wordcount link lists',
      menubar : false,
      statusbar : false,
      toolbar: 'undo redo | bold italic| styleselect | alignleft aligncenter alignright alignjustify | numlist bullist | fontselect',
      content_css: [ '//www.tiny.cloud/css/codepen.min.css' ],
      content_style: 'body { font-family: Roboto Light; font-size: 16px; }' + '.left { text-align: left; }' + 'img.left { float: left; }' + 'table.left { float: left; }' + '.right { text-align: right; }' + 'img.right { float: right; }' + 'table.right { float: right; }' + '.center { text-align: center; }' + 'img.center { display: block; margin: 0 auto; }' + 'table.center { display: block; margin: 0 auto; }' + '.full { text-align: justify; }' + 'img.full { display: block; margin: 0 auto; }' + 'table.full { display: block; margin: 0 auto; }' + '.bold { font-weight: bold; }' + '.italic { font-style: italic; }' + '.underline { text-decoration: underline; }' + '.title { font-family: Raleway Bold; font-size: 26px; }' + '.subtitle { font-family: Roboto Medium; font-size: 20px; }',
      formats: {
        alignleft: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'left' },
        aligncenter: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'center' },
        alignright: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'right' },
        alignfull: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'full' },
        bold: { inline: 'span', classes: 'bold' }, italic: { inline: 'span', classes: 'italic' },
        titleformat: { inline: 'span', attributes: { title: 'Title'} , classes: 'title', },
        subtitleformat: { inline: 'span', attributes: { title: 'SubTitle'} , classes: 'subtitle' } },
      style_formats: [ { title: 'Title', format: 'titleformat' }, { title: 'SubTitle', format: 'subtitleformat' } ]
    }"
    api-key="no-api-key"
    model-events="change keydown blur focus paste"
    @input="handleInput"
    @error="handleError"
  />
</template>

<script>
import Editor from '@tinymce/tinymce-vue'

export default {
  components: {
    'tinymce-editor': Editor
  },
  props: {
    initialValue: {
      type: String,
      default: null
    },
    id: {
      type: String,
      default: null
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  methods: {
    handleInput (value) {
      this.$emit('input', value)
    },
    handleError (err) {
      console.error(err)
    }
  }
}
</script>

Вот печать:

Answer 1

Если вы хотите использовать пользовательские шрифты, вам необходимо:

1. Загрузить их в TinyMCE через content_css
2. Включить шрифты с помощью параметра конфигурации font_formats: https://www.tiny.cloud/docs/configure/editor-appearance/#font_formats

Вы, кажется, загружаете CSS с демонстрационного сайта TinyMCE:

content_css: [ '//www.tiny.cloud/css/codepen.min.css' ],

Скорее всего, это не то, что вы хотите сделать как наша демоверсия CSS, скорее всего, не подходит для вашего веб-сайта / приложения. Я бы изменил это, чтобы использовать соответствующий CSS для вашего сайта. В этом CSS вы можете загрузить собственный шрифт. Например:

@import url('https://fonts.googleapis.com/css?family=Lato');

Примечание: Причина, по которой меню TinyMCE может отображать шрифт, заключается в том, что вы, вероятно, загружаете шрифт на странице, которая включает TinyMCE, но не в самой TinyMCE. Содержимое редактора по-своему iframe, но меню являются частью главной страницы. Если вы осмотрите DOM, вы сможете увидеть этот макет. Использование content_css позволяет ввести CSS в редактор iframe.