如何使用 VueJS 的 tinymce-vue 包在 TinyMCE 中使用自定义字体？

Question

我正在尝试将存储在我的资产/字体文件夹中的自定义字体与 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. 通过content_css将它们加载到TinyMCE
2. 通过font_formats 配置选项包含字体：https://www.tiny.cloud/docs/configure/editor-appearance/#font_formats

您似乎正在从 TinyMCE 演示站点加载 CSS：

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。