4

背景...

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

任何人都有一个 Google Apps 脚本,我可以使用它来将 CSS 转换为内联样式,然后再使用它来创建 Google 协作平台页面?此外,我可以在 Google Apps 脚本环境中使用的库也可以提供相同的功能。它只需要是我可以在 Google Apps 脚本环境中添加的库(即,通过“资源”-“管理库”菜单)。谢谢。

顺便一提...

我尝试通过两种方式从 Google Doc 获取 html。这两种方式都给了我相同的 CSS 非内联样式,当我使用它来创建 Google 站点页面时会被剥离。

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

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

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

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 电子邮件。

4

1 回答 1

4

许多在线工具可以进行这种转换,因此您可以从 Google Apps Script 中利用其中一种工具。(如果您只需要偶尔执行一次,为什么不只使用其中一项服务呢?)

这是一个示例脚本,它建立在 Google Apps 脚本是否具有 getElementById 之类的getElementByVal()功能.

内联()函数

/**
 * 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没有等效的探索性支持。

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

在选择的 Css Inline 服务中,Chrome 的“检查元素”功能用于确定标签类型 ( <textarea>) 和唯一标识它的方法 ( name="text")。有了这些知识,我们就拥有getElementByVal()了挖掘 POST 请求返回的 HTML 所需的一切。(或者,您可以使用 String 方法来查找和提取您想要的文本。)

但是当所有这些放在一起时,XmlService 一直在抱怨结果页面中 HTML 的格式——因此在传递页面之前使用 JavaScript String 和 RegExp 方法来平衡格式错误的标签。

例子

这是一个简单的示例,说明该inline()函数的使用。请注意,样式信息是从外部 css 链接和标记样式中吸收的。

function test_inline() {
  var myHtml =
    '<html>'
  +   '<head>'
  +     '<title>Example</title>'
  +     '<link rel="stylesheet" href="http://inlinestyler.torchboxapps.com/static/css/example.css" ></link>'
  +   '</head>'
  +   '<body>'
  +     '<style type="text/css">'
  +        'h1{'
  +             'color:yellow'
  +        '}'
  +     '</style>'
  +     '<h1>An example title</h1>'
  +     '<p>Paragraph 1</p>'
  +     '<p class="p2">Paragraph 2</p>'
  +   '</body>'
  + '</html>';

  var inlined = inline(myHtml);
  debugger;  // pause in debugger, have a look at "inlined"
}

结果

  <html>
    <head>
      <title>Example</title>
    </head>
    <body>
      <h1 style="color: yellow;">An example title</h1>
      <p style="margin: 0;padding: 0 0 10px 0;">Paragraph 1</p>
      <p class="p2" style="margin: 0;padding: 0 0 10px 0;">Paragraph 2</p>
    </body>
  </html>
于 2013-12-19T18:56:01.453 回答