Vue.js 如何使用适用于VueJS的TinyMCE vue软件包在TinyMCE中使用自定义字体？

我试图使用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>

从“@tinymce/tinymce vue”导入编辑器
导出默认值{
组成部分：{
“tinymce编辑器”：编辑器
},
道具：{
初始值：{
类型：字符串，
默认值：null
},
身份证：{
类型：字符串，
默认值：null
},
高度：{
类型：字符串，
默认值：“100%”
}
},
方法：{
handleInput（值）{
此.$emit（'input'，value）
},
手柄错误（err）{
控制台错误（err）
}
}
}

这是一张照片：

---

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

通过

content\u css

通过

font\u格式

配置选项包括字体：

您似乎正在从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\u css

可以将css插入编辑器的

iframe

我有一个css文件，在其中导入了字体，与模板文件位于同一文件夹中。我应该在“content_css”属性中放置什么样的正确路径来指向它？它似乎无法正确运行…我无法告诉您答案，因为我不知道您的应用程序是如何部署的。

content\u css

设置在浏览器中运行，因此浏览器需要找到css文件的任何路径都是您需要使用的路径。好的，当应用程序部署时，所有css文件都包含在带有标记的html文件中，因此我尝试放入“content\u css”的文件不再是文件，而是代码的一部分。因此，我不知道如何使其工作。TinyMCE希望/需要一个可以加载到iFrame中的文件。或者，您可以使用

content\u style

通过TinyMCE配置将特定CSS传递到编辑器中。大多数人觉得

内容\u css

更容易使用。