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

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

如果您想使用自定义字体，您需要：

通过content_css
通过 font_formats 配置选项包含字体：https://www.tiny.cloud/docs/configure/editor-appearance/#font_formats

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

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

您可能不想这样做，因为我们的演示 CSS 可能不适合您的网站 site/application。我会将其更改为对您的站点使用适当的 CSS。在 CSS 中，您可以加载自定义字体。例如：

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

注意： TinyMCE 菜单可以呈现字体的原因是您可能正在加载字体包含 TinyMCE 但不在 TinyMCE 本身中的页面。编辑器内容在它自己的 iframe 中，但菜单是主页的一部分。如果您检查 DOM，您将能够看到此布局。使用 content_css 允许您将 CSS 注入编辑器的 iframe.

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

How to use custom fonts in TinyMCE using tinymce-vue package for VueJS?

tinymce

vue.js