在 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