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

Question

我正在尝试将自定义 Adob​​e 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 编辑器生成的 的 标签包含两个 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">

<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 样式表加载正常，并且 Adob​​e 字体在编辑器所在的页面上工作，只是不在编辑器中编辑器预览本身。

Answer 1

您需要创建一个插件来加载该插件，

首先我们将启动插件：

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

然后，我们需要添加一个函数，该函数将添加一个将插入字体的脚本：

function addScriptToHead() {}

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

var doc = editor.getDoc();

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

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 ) );

将脚本添加到标题：

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

调用我们的函数：

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();
        });

---

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