将下载的字体添加到TinyMCE。

huangapple go评论96阅读模式
英文:

Adding downloaded fonts to TinyMCE

问题

我正在使用React,并尝试将TinyMCE集成到我的网站中。一切似乎都正常工作,唯一让我困扰的是添加自定义字体。TinyMCE博客中关于添加自定义字体的部分主要集中在Google字体上,但我有一个已经下载的字体。

由于我正在使用Tailwind CSS,所以我没有太多的.css文件。

以下是在index.css中的字体定义部分:

@font-face {
  font-family: "metrischmedium";
  src: url("./assets/fonts/Metrisch-Medium-webfont.eot");
  src: url("./assets/fonts/Metrisch-Medium-webfont.eot?#iefix") format("embedded-opentype"),
    url("./assets/fonts/Metrisch-Medium-webfont.woff2") format("woff2"),
    url("./assets/fonts/Metrisch-Medium-webfont.woff") format("woff"),
    url("./assets/fonts/Metrisch-Medium-webfont.ttf") format("truetype"),
    url("./assets/fonts/Metrisch-Medium-webfont.svg#metrischmedium") format("svg");
  font-weight: normal;
  font-style: normal;
}

// 还有其他字体导入

我尝试了以下方法来添加这个字体:

<Editor
  onInit={...}
  initialValue="<p>This is the initial content of the editor.</p>"
  init={{
    height: ...,
    menubar: ...,
    plugins: ...,
    font_formats: "Metrisch Light = Metrisch-light;Metrisch Medium = metrischmedium",
    toolbar: ...,
    menu: ...,
    content_css: "../index.css", // 尝试添加文件中的所有字体。
    content_style: "body { font-family: Helvetica, Arial, sans-serif, metrischmedium; font-size: 14px }",
  }}
/>

我还尝试了这样导入它:

tinymce.init({
  /* ... */
  content_style: "@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');",
});

但这种方式不起作用,因为我的字体不是网址类型的字体。

英文:

i am using React and I'm trying to integrate TinyMCE into my website. Everything seems to be working fine, the one thing that i'm struggling with is adding custom fonts. The tinyMCE blog on adding custom fonts focus alot on Google fonts but i have a font that i have downloaded.

I don't have many .css files because i'm using tailwind CSS.

Here is the font situated in index.css:

@font-face {
  font-family: &quot;metrischmedium&quot;;
  src: url(&quot;./assets/fonts/Metrisch-Medium-webfont.eot&quot;);
  src: url(&quot;./assets/fonts/Metrisch-Medium-webfont.eot?#iefix&quot;)
      format(&quot;embedded-opentype&quot;),
    url(&quot;./assets/fonts/Metrisch-Medium-webfont.woff2&quot;) format(&quot;woff2&quot;),
    url(&quot;./assets/fonts/Metrisch-Medium-webfont.woff&quot;) format(&quot;woff&quot;),
    url(&quot;./assets/fonts/Metrisch-Medium-webfont.ttf&quot;) format(&quot;truetype&quot;),
    url(&quot;./assets/fonts/Metrisch-Medium-webfont.svg#metrischmedium&quot;)
      format(&quot;svg&quot;);
  font-weight: normal;
  font-style: normal;
}

//among other font imports

What ive tried:

&lt;Editor
            onInit=...
            initialValue=&quot;&lt;p&gt;This is the initial content of the editor.&lt;/p&gt;&quot;
            init={{
              height: ...,
              menubar: ...,
              plugins: ...,
              font_formats:
                &quot;Metrisch Light = Metrisch-light;Metrisch Medium = metrischmedium&quot;,
              toolbar:...,
              menu: ...,
              content_css: &quot;../index.css&quot;, //trying to add all fonts in the file.
              content_style:
                &quot;body { font-family:Helvetica,Arial,sans-serif,metrischmedium; font-size:14px }&quot;,
            }}
          /&gt;

I've also tried importing it in like so:

tinymce.init({
  /* ... */
  content_style:
    &quot;@import url(&#39;https://fonts.googleapis.com/css2?family=Oswald&amp;display=swap&#39;);&quot;,
});

but it doesn't work as mine is not a url type font.

答案1

得分: 0

  1. 你可以尝试在你的 index.css 中使用 public/** 文件夹代替 src/** 来导入字体文件。

  2. 然后更新你的字体路径:

@font-face {
  font-family: "metrischmedium";
  src: url("/assets/fonts/Metrisch-Medium-webfont.eot");
  src: url("/assets/fonts/Metrisch-Medium-webfont.eot?#iefix") format("embedded-opentype"),
    url("/assets/fonts/Metrisch-Medium-webfont.woff2") format("woff2"),
    url("/assets/fonts/Metrisch-Medium-webfont.woff") format("woff"),
    url("/assets/fonts/Metrisch-Medium-webfont.ttf") format("truetype"),
    url("/assets/fonts/Metrisch-Medium-webfont.svg#metrischmedium") format("svg");
  font-weight: normal;
  font-style: normal;
}
  1. 现在,在你使用 TinyMCE 的组件中导入 index.css

当你的应用程序构建为生产环境时,通常会将 public 目录中的所有内容直接复制到构建输出中,使文件可以直接提供服务。

请注意是否需要对其他文件路径进行更改。

英文:
  1. Can you try using public/** folder instead of src/** for import of font files in your index.css
  2. Then update your paths for font-face
@font-face {
  font-family: &quot;metrischmedium&quot;;
  src: url(&quot;/assets/fonts/Metrisch-Medium-webfont.eot&quot;);
  src: url(&quot;/assets/fonts/Metrisch-Medium-webfont.eot?#iefix&quot;) format(&quot;embedded-opentype&quot;),
    url(&quot;/assets/fonts/Metrisch-Medium-webfont.woff2&quot;) format(&quot;woff2&quot;),
    url(&quot;/assets/fonts/Metrisch-Medium-webfont.woff&quot;) format(&quot;woff&quot;),
    url(&quot;/assets/fonts/Metrisch-Medium-webfont.ttf&quot;) format(&quot;truetype&quot;),
    url(&quot;/assets/fonts/Metrisch-Medium-webfont.svg#metrischmedium&quot;) format(&quot;svg&quot;);
  font-weight: normal;
  font-style: normal;
}
  1. Now, import index.css in the component where you are using TinyMCE

When your application is built for production, all the contents of the public directory are usually copied to the build output as-is, making the files available to be served directly.

Beware of any other file path corrections needed to this change.

huangapple
  • 本文由 发表于 2023年7月13日 20:29:18
  • 转载请务必保留本文链接:https://go.coder-hub.com/76679394.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定