如何将（以编程方式）谷歌字体添加到 ckeditor

Posted 2023-03-15

【中文标题】如何将（以编程方式）谷歌字体添加到 ckeditor

【英文标题】：How can I add(programatically) google fonts to ckeditor

【发布时间】：2012-12-08 19:43:23

【问题描述】：

我刚刚下载了 CKEditor，它很棒。尽管我注意到它会使字体松弛。 所以我认为能够将 Google Web Fonts 添加到 CKEditor 以增加其功能是一个好主意。

我在网上搜索过，但只能找到如何手动进入并在config.js文件中添加每种字体。

谁能帮我以编程方式将所有 Google Web 字体添加到 CKEditor 并展示如何操作。

【参考方案1】：

您可以使用脚本语言通过开发人员 API 拉入所有 Google WebFonts 的列表，并自动生成 CKEditor 配置行。

要使用 API，您需要一个 API 密钥，

要获取 API 密钥，请访问 APIs Console。在“服务”窗格中，激活 Google Web Fonts Developer API；如果出现服务条款，请阅读并接受它们。

接下来，转到 API 访问窗格。 API 密钥位于该窗格底部附近，位于标题为“简单 API 访问”的部分中。

获得 API 密钥后，您的应用程序可以将查询参数 key=yourAPIKey 附加到所有请求 URL。

API 密钥对于嵌入 URL 是安全的；它不需要任何编码。

webfonts 的端点是https://www.googleapis.com/webfonts/v1/webfonts?key=YOURKEYHERE，它返回一个 JSON 响应，因此，例如，您可以使用 jQuery 在请求中进行 ajax，并遍历对象，构建配置行，然后复制并粘贴它在。

【讨论】：

感谢您的回复，但我才刚刚开始学习javascript。可以帮我写代码吗？

嘿，当然，我写了拉它的代码，给我发电子邮件丹尼尔 [at] buildhq.co

谢谢伙计，我刚刚给你发了一封电子邮件。将感谢您的帮助。干杯！

【参考方案2】：

好的，我找到了答案。我在这里发布它，因此它可能对其他正在寻找相同内容的人有所帮助。所以这里是：

myFonts = ['Aclonica', 'Allan', 'Allerta', 'Allerta Stencil', 'Amaranth', 'Angkor', 'Annie Use Your Telescope', 'Anonymous Pro', 'Anton', 'Architects Daughter', 'Arimo', 'Artifika', 'Arvo', 'Astloch', 'Bangers', 'Battambang', 'Bayon', 'Bentham', 'Bevan', 'Bigshot One', 'Bokor', 'Brawler', 'Buda', 'Cabin', 'Cabin Sketch', 'Calligraffitti', 'Candal', 'Cantarell', 'Cardo', 'Carter One', 'Caudex', 'Chenla', 'Cherry Cream Soda', 'Chewy', 'Coda', 'Coda Caption', 'Coming Soon', 'Content', 'Copse', 'Corben', 'Cousine', 'Covered By Your Grace', 'Crafty Girls', 'Crimson Text', 'Crushed', 'Cuprum', 'Damion', 'Dancing Script', 'Dangrek', 'Dawning of a New Day', 'Didact Gothic', 'Droid Sans', 'Droid Sans Mono', 'Droid Serif', 'EB Garamond', 'Expletus Sans', 'Fontdiner Swanky', 'Francois One', 'Freehand', 'GFS Didot', 'GFS Neohellenic', 'Geo', 'Goudy Bookletter 1911', 'Gruppo', 'Handlee', 'Hanuman', 'Holtwood One SC', 'Homemade Apple', 'IM Fell DW Pica', 'IM Fell DW Pica SC', 'IM Fell Double Pica', 'IM Fell Double Pica SC', 'IM Fell English', 'IM Fell English SC', 'IM Fell French Canon', 'IM Fell French Canon SC', 'IM Fell Great Primer', 'IM Fell Great Primer SC', 'Inconsolata', 'Indie Flower', 'Irish Grover', 'Josefin Sans', 'Josefin Slab', 'Judson', 'Jura', 'Just Another Hand', 'Just Me Again Down Here', 'Kenia', 'Khmer', 'Koulen', 'Kranky', 'Kreon', 'Kristi', 'Lato', 'League Script', 'Lekton', 'Limelight', 'Lobster', 'Lora', 'Luckiest Guy', 'Maiden Orange', 'Mako', 'Maven Pro', 'Meddon', 'MedievalSharp', 'Megrim', 'Merriweather', 'Metal', 'Metrophobic', 'Michroma', 'Miltonian', 'Miltonian Tattoo', 'Molengo', 'Monofett', 'Moul', 'Moulpali', 'Mountains of Christmas', 'Muli', 'Neucha', 'Neuton', 'News Cycle', 'Nobile', 'Nova Cut', 'Nova Flat', 'Nova Mono', 'Nova Oval', 'Nova Round', 'Nova Script', 'Nova Slim', 'Nova Square', 'Nunito', 'OFL Sorts Mill Goudy TT', 'Odor Mean Chey', 'Old Standard TT', 'Open Sans', 'Open Sans Condensed', 'Orbitron', 'Oswald', 'Over the Rainbow', 'PT Sans', 'PT Sans Caption', 'PT Sans Narrow', 'PT Serif', 'PT Serif Caption', 'Pacifico', 'Paytone One', 'Permanent Marker', 'Philosopher', 'Play', 'Playfair Display', 'Podkova', 'Preahvihear', 'Puritan', 'Quattrocento', 'Quattrocento Sans', 'Radley', 'Raleway', 'Reenie Beanie', 'Rock Salt', 'Rokkitt', 'Ruslan Display', 'Schoolbell', 'Shanti', 'Siemreap', 'Sigmar One', 'Six Caps', 'Slackey', 'Smythe', 'Sniglet', 'Special Elite', 'Sue Ellen Francisco', 'Sunshiney', 'Suwannaphum', 'Swanky and Moo Moo', 'Syncopate', 'Tangerine', 'Taprom', 'Tenor Sans', 'Terminal Dosis Light', 'The Girl Next Door', 'Tinos', 'Ubuntu', 'Ultra', 'UnifrakturCook', 'UnifrakturMaguntia', 'Unkempt', 'VT323', 'Vibur', 'Vollkorn', 'Waiting for the Sunrise', 'Wallpoet', 'Walter Turncoat', 'Wire One', 'Yanone Kaffeesatz'];

config.font_names = 'serif;sans serif;monospace;cursive;fantasy';

for(var i = 0; i<myFonts.length; i++)
            config.font_names = config.font_names+';'+myFonts[i];
            myFonts[i] = 'http://fonts.googleapis.com/css?family='+myFonts[i].replace(' ','+');


config.contentsCss = ['/ckeditor/contents.css'].concat(myFonts);

干杯，

普拉尼

【讨论】：

它对我有用，但出现一个错误，并且格式 dropdowlist 中缺少其他字体“拒绝应用来自 'localhost:4200/ckeditor/contents.css' 的样式，因为它的 MIME 类型 ('text/html') 是不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。”