如何使用 Google Apps 脚本将 CSS 页面更改为具有内联样式的页面? [英] How do I use Google Apps Script to change a CSS page to one with inline styles?

查看：14
本文介绍了如何使用 Google Apps 脚本将 CSS 页面更改为具有内联样式的页面?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

背景...

我正在尝试编写 Google Apps 脚本以将 Google 文档的内容作为 HTML 获取，并使用该 HTML 在 Google 协作平台中创建或更新网页.我已经知道如何做到这一点，但结果是一个几乎所有格式都被剥离的网页.查看 Google Doc 中的 html 后，我发现它没有使用内联样式，我相信 Google 协作平台需要内联样式.

I am trying to write a Google Apps Script to get the content of a Google Doc as HTML and use that HTML to create or update a web page in Google Sites. I already know how to do this but the result is a web page that is stripped of almost all of its formatting. After looking at the html from the Google Doc, I see that it is not using inline styles and I believe that Google Sites requires inline styling.

在使用它创建 Google 协作平台页面之前，我可以使用它来将 CSS 转换为内联样式的 Google Apps 脚本吗?此外，我可以在 Google Apps 脚本环境中使用的库也可以提供相同的功能.它只需要是我可以在 Google Apps 脚本环境中添加的库(即，通过资源"-管理库"菜单).谢谢.

Anyone have a Google Apps Script that I can use to convert the CSS to inline styles before using it to create a Google Sites page? Also, a library that I could use within the Google Apps Script environment that would give me the same functionality would be just as good. It just needs to be a library that I could add within the Google Apps Scripting environment (i.e., through the "resources" - "manage libraries" menu). Thanks.

顺便说一句……

我尝试通过两种方式从 Google Doc 获取 html.这两种方式都为我提供了相同的 CSS 非内联样式，当我使用它来创建 Google 协作平台页面时会被剥离.

I have tried getting the html from a Google Doc in two ways. Both ways give me the same CSS non-inline-style that gets stripped out when I use it to create a Google Sites Page.

1) 我在以下链接中使用了 Romain Vialard 的 DocsListExtened Google 脚本库...

1) I have used Romain Vialard's DocsListExtened Google Script Library at the following link...

https://sites.google.com/站点/scriptsexamples/new-connectors-to-google-services/driveservice

2) 我使用了一些人建议的代码，包括 hgabreu@gmail.com 和其他人...

2) I have used code suggested by a few people including hgabreu@gmail.com, and others at...

https://code.google.com/p/google-apps-script-issues/issues/detail?can=2&start=0&num=100&q=&colspec=Stars%20Opened%20ID%20Type%20Status%20Summary%20Component%20Owner&groupby=&sort=&id=585

注意:同样的问题会影响发送给 gmail 用户的 html 电子邮件.

Note: the same problem affects html email messages sent to gmail users.

推荐答案

有许多在线工具 可以进行这种转换，因此您可以利用 Google Apps 脚本中的一种.(如果您只需要偶尔执行一次，为什么不直接使用其中一项服务呢?)

There are numerous online tools that do this conversion, so you could leverage one of them from Google Apps Script. (If you only need to do this once in a while, why not just use one of those services?)

这是一个示例脚本，它基于 Google Apps 脚本是否有类似 getElementById 的东西?.

Here's an example script, that builds on the getElementByVal() function from Does Google Apps Script have something like getElementById?.

/**
 * Convert html containing <style> tags to instead have inline css.
 *
 * This example uses an online service from MailChimp Labs, but
 * the same principle could be used to leverage several other
 * online providers.
 *
 * @param  {Text}  htmlWstyle  A block of HTML text including
 *                             <style>..</style> tags.
 *
 * @returns {Text}             Same HTML, converted to inline css.
 */
function inline(htmlWstyle) {
  // Generate a POST request to inline css web tool.
  var payload =
  {
    "html" : htmlWstyle,
    "strip" : "checked"
  };

  // Because payload is a JavaScript object, it will be interpreted as
  // an HTML form. (We do not need to specify contentType; it will
  // automatically default to either 'application/x-www-form-urlencoded'
  // or 'multipart/form-data')

  var options =
  {
    "method" : "post",
    "payload" : payload,
    "muteHttpExceptions" : true
  };

  var url = "http://beaker.mailchimp.com/inline-css";
  var response = UrlFetchApp.fetch(url, options);

  // The html from this service is non-compliant, so we need
  // to massage it to satisfy the XmlService.
  var badlink = new RegExp('<link (.*?)[/]*>',"igm");
  var badmeta = new RegExp('<meta (.*?)[/]*>',"igm");
  var badinput = new RegExp('<input (.*?)[/]*>',"igm");
  var xml = response.getContentText()
                    .replace(badlink,"<link $1></link>" )
                    .replace(badinput,"<input $1></input>" )
                    .replace(badmeta,"<meta $1></meta>" )
                    .replace(/<br>/g,"<br/>");

  // So far, so good! Next, extract converted text from page. <textarea name="text" ...>
  // Put the receieved xml response into XMLdocument format
  var doc = XmlService.parse(xml);

  var inlineHTML = getElementByVal( doc, 'textarea', 'name', 'text' );
  return (inlineHTML == null) ? null : inlineHTML.getValue();
}

说明

那里似乎有一些黑魔法.previous answer 描述了如何使用旧的 Xml 服务检查网页的结构以找到您想要的位.它仍然是很好的阅读(和投票，提示，提示！)，但该服务现在已经消失了，新的 XmlService 没有等效的探索性支持.

Explanation

There may appear to be some black magic in there. A previous answer described how to use the old Xml Service to examine the structure of a web page to find the bits you wanted. It's still good reading (and voting up, hint, hint!), but that service is now gone, and the new XmlService doesn't have equivalent exploratory support.

首先，我们发现一个网络服务 完成了我们感兴趣的工作，并使用 UrlFetch Service 模拟一个人将代码粘贴到服务中.理想情况下，我们想要一个只返回我们想要的结果的格式，我们可以在没有任何进一步工作的情况下使用.唉，我们拥有的是一个完整的网页，这意味着我们必须为我们的结果耕种它.那里的基本思想:使用 XmlService 解析和浏览页面，只提取我们想要的部分.

To start, we found a web service that did the job we were interested in, and used the UrlFetch Service to simulate a person pasting code into the service. Ideally, we'd like one that returned just the result we wanted, in a format we could use without any further work. Alas, what we had was a complete web page, and that meant that we'd have to farm it for our result. Basic idea there: Use the XmlService to parse and explore the page, extracting just the bit we wanted.

在选择的 Css Inline 服务中，Chrome 的Inspect Element"能力被用于确定标签类型(