在 React 中将自定义 Typekit/Adobe Fonts 添加到 Tiny MCE

Question

我正在尝试将自定义 Adobe Typekit 字体添加到 Tiny MCE React 组件以在编辑器中设置文本样式。 我有以下内容：

<Editor
        init={{
          allow_html_in_named_anchor: false,
          branding: false,
          plugins: [
            "autolink lists link image preview anchor",
            "searchreplace",
            "insertdatetime media table paste code"
          ],
          toolbar: "bold italic | bullist numlist",
          content_css: ["https://use.typekit.net/XXXXXX.css", "/overrides.css"]
        }}
      />

我已经删除了 Typekit CSS 文件名，因为这是特定于帐户的。

overrides.css文件如下所示：

@import url("https://use.typekit.net/XXXXX.css");
body {
  font-family: "neue-haas-grotesk-text, Arial, sans-serif" !important;
  font-size: 14px;
  font-weight: 400;
}

TinyMCE 编辑器生成的<head>标签<iframe>包含两个 CSS <link>标签，顺序正确：

<link rel="stylesheet" type="text/css" id="mce-u0" crossorigin="anonymous" referrerpolicy="origin" href="https://cdn.tiny.cloud/1/k9s4r4mdxeukqc7mrign93b26zofvznzyw98lj16y5rlb73z/tinymce/5.10.3-128/skins/ui/oxide/content.min.css">

<link rel="stylesheet" type="text/css" id="mce-u1" crossorigin="anonymous" referrerpolicy="origin" href="https://use.typekit.net/XXXXXX.css">

<link rel="stylesheet" type="text/css" id="mce-u0" crossorigin="anonymous" referrerpolicy="origin" href="https://cdn.tiny.cloud/1/k9s4r4mdxeukqc7mrign93b26zofvznzyw98lj16y5rlb73z/tinymce/5.10.3-128/skins/ui/oxide/content.min.css">

我试过两次导入 CSS，一次是在overrides.css中，一次是在content_css属性中。 但是没有任何效果，我在编辑器中得到了一种奇怪的衬线字体（甚至没有 Arial 或默认的“sans-serif”。

CSS 样式表加载正常，Adobe 字体在编辑器所在的页面上工作，只是不在编辑器预览本身中。

Answer 1

你需要创建一个插件来加载它，

首先我们将启动插件：

 tinymce.PluginManager.add( 'typekit', function( editor ) {}

然后在其中我们需要添加一个 function，它将添加一个脚本来插入 fonts：

function addScriptToHead() {}

现在，我们将获得 DOM object（在函数内部）：

var doc = editor.getDoc();

创建一个脚本，然后我们将其添加到 header：

var jscript = "(function() {\n\
            var config = {\n\
                kitId: 'xxxxxxx'\n\
            };\n\
            var d = false;\n\
            var tk = document.createElement('script');\n\
            tk.src = '//use.typekit.net/' + config.kitId + '.js';\n\
            tk.type = 'text/javascript';\n\
            tk.async = 'true';\n\
            tk.onload = tk.onreadystatechange = function() {\n\
                var rs = this.readyState;\n\
                if (d || rs && rs != 'complete' && rs != 'loaded') return;\n\
                d = true;\n\
                try { Typekit.load(config); } catch (e) {}\n\
            };\n\
            var s = document.getElementsByTagName('script')[0];\n\
            s.parentNode.insertBefore(tk, s);\n\
        })();";

将字体插入脚本：

var script = doc.createElement( 'script' );
script.type = 'text/javascript';
script.appendChild( doc.createTextNode( jscript ) );

将脚本添加到 header：

doc.getElementsByTagName( 'head' )[0].appendChild( script );

致电我们的 function：

editor.onPreInit.add( function( editor ) {
            addScriptToHead();
        });

一切都在一起：

tinymce.PluginManager.add( 'typekit', function( editor ) {
    function addScriptToHead() {
            var doc = editor.getDoc(); // gets dom element from iframe
            var jscript = "(function() {\n\
                var config = {\n\
                kitId: 'xxxxxxx'\n\
            };\n\
            var d = false;\n\
            var tk = document.createElement('script');\n\
            tk.src = '//use.typekit.net/' + config.kitId + '.js';\n\
            tk.type = 'text/javascript';\n\
            tk.async = 'true';\n\
            tk.onload = tk.onreadystatechange = function() {\n\
                var rs = this.readyState;\n\
                if (d || rs && rs != 'complete' && rs != 'loaded') return;\n\
                d = true;\n\
                try { Typekit.load(config); } catch (e) {}\n\
            };\n\
            var s = document.getElementsByTagName('script')[0];\n\
            s.parentNode.insertBefore(tk, s);\n\
        })();";

    var script = doc.createElement( 'script' );
    script.type = 'text/javascript';
    script.appendChild( doc.createTextNode( jscript ) );

    // Add the script to the header
    doc.getElementsByTagName( 'head' )[0].appendChild( script );
}
editor.onPreInit.add( function( editor ) {
            addScriptToHead();
        });

我不确定我从哪里得到这个想法，但很久以前我在我的代码中使用过它。

在 React 中将自定义 Typekit/Adobe Fonts 添加到 Tiny MCE

问题描述

1 个解决方案

解决方案1
0 2022-04-12 21:00:58

在 React 中将自定义 Typekit/Adobe Fonts 添加到 Tiny MCE

问题描述

1 个解决方案

解决方案1 0 2022-04-12 21:00:58

解决方案1
0 2022-04-12 21:00:58