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

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

问题描述

背景...

我正在尝试编写 Google Apps 脚本以获取 HTML 形式的 Google 文档内容，并使用该 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 Apps 脚本将 CSS 转换为内联样式，然后再使用它创建 Google 协作平台页面吗?此外，我可以在 Google Apps Script 环境中使用的库可以为我提供相同的功能，这也同样出色.它只需要是一个我可以添加到 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 Script Library...

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

https://sites.google.com/站点/脚本示例/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 Script 中的其中一个工具.(如果您只需要偶尔执行此操作，为什么不只使用其中一项服务?)

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 Script 是否有类似 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();
}

说明

那里似乎有一些黑魔法.以前的答案描述了如何使用旧的 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 的检查元素"功能被用来确定标签类型(