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

Question

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

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

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

Answer 1

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

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

干杯，

普拉尼

Answer 2

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

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

要获取 API 密钥，请访问API 控制台。在“服务”窗格中，激活 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，并遍历对象，构建配置行，然后将其复制并粘贴进去。