在html页面中获取并显示Google Doc正文

时间:2013-08-30 16:04:40

标签: content-management-system google-apps-script google-docs-api

是否可以检索Google文档的内容并在html页面的div中显示?如果是这样,在下面的简化示例中,实施“MAGIC”的正确方法是什么?

<html>
    <head>
    </head>
    <body>
       <div>
          <MAGIC>
            Script or link that retrieves and displays the body of a Google Doc.
          </MAGIC>
       </div>
    </body>
</html> 

在上面,您可以假设

  1. html由Google Drive Hosting提供。
  2. 对Google文档的引用是静态的。
  3. 无需在公共html页面内编辑Doc(即在该上下文中它是只读的)。
  4. 我已经阅读了Apps脚本文档,看起来似乎可以通过文档服务和内容服务的某种组合来实现某些功能。例如,Document Service有getBody()和copy()方法,但不清楚这些调用返回的对象是否可以呈现为WYSIWYG作为html插入到html容器中。

    背景:我正在尝试为小型非营利组织实施安全易用的CMS。我已经建立了一个托管的网站框架原型 在Google云端硬盘上。到目前为止看起来很有希望,但更改需要能够编辑html。我们有很多人可以在类似文字处理器的环境中创建内容,但只包括我自己 谁可以应付HTML / CSS / JQuery / AppsScript。

    如果我可以专注于整体框架,让其他人更新内容 事件等,这将是一个巨大的胜利。基本上,如果他们能够编辑Google文档,然后手动重新加载网页以查看结果,我会非常高兴。

    我意识到CMS有很多方法,但就目前而言,我有兴趣探索纯Google Docs / Google Drive解决方案。

2 个答案:

答案 0 :(得分:2)

我已决定发布内容文档,并包含Google提供的iframe嵌入代码,以实现原始问题中的“MAGIC”,例如

<iframe class="cmsframe" src="https://docs.google.com/document/d/1rhkuAB3IIu5Hq0tEtA4E_Qy_-sJMMnb33WBMlAEqlJU/pub?embedded=true"></iframe>

手动添加类标记,以便我可以使用CSS控制iframe大小。

答案 1 :(得分:1)

您可以使用urlFetch调用驱动器API获取google doc的原始html内容,以下是它的工作原理

      var id = 'Doc-Very-Long-ID-Here';
      var url = 'https://docs.google.com/feeds/';
      var doc = UrlFetchApp.fetch(url+'download/documents/Export?exportFormat=html&format=html&id='+id,
                                  googleOAuth_('docs',url)).getContentText();

   // the variable doc is the HTML content that you can use

    function googleOAuth_(name,scope) {
      var oAuthConfig = UrlFetchApp.addOAuthService(name);
      oAuthConfig.setRequestTokenUrl("https://www.google.com/accounts/OAuthGetRequestToken?scope="+scope);
      oAuthConfig.setAuthorizationUrl("https://www.google.com/accounts/OAuthAuthorizeToken");
      oAuthConfig.setAccessTokenUrl("https://www.google.com/accounts/OAuthGetAccessToken");
      oAuthConfig.setConsumerKey('anonymous');
      oAuthConfig.setConsumerSecret('anonymous');
      return {oAuthServiceName:name, oAuthUseToken:"always"};
    }

Romain Vialard available here还有一个名为DocsListExtended的图书馆,它提供了大量不错的扩展。


编辑: 关注您的编辑:

无法使用它,使用html service在webapp中呈现HTML内容,下面的示例包含您的完整代码和working example

function doGet() {

    var id = '1el3DpTp1sukDjzlKXh8plf0Zj-qm0drI7KbytroVrNU';
    var url = 'https://docs.google.com/feeds/';
    var doc = UrlFetchApp.fetch(url+'download/documents/Export?exportFormat=html&format=html&id='+id, googleOAuth_('docs',url)).getContentText();
    return HtmlService.createHtmlOutput(doc);
}

// the variable doc is the HTML content that you can use

function googleOAuth_(name,scope) {
    var oAuthConfig = UrlFetchApp.addOAuthService(name);
    oAuthConfig.setRequestTokenUrl("https://www.google.com/accounts/OAuthGetRequestToken?scope="+scope);
    oAuthConfig.setAuthorizationUrl("https://www.google.com/accounts/OAuthAuthorizeToken");
    oAuthConfig.setAccessTokenUrl("https://www.google.com/accounts/OAuthGetAccessToken");
    oAuthConfig.setConsumerKey('anonymous');
    oAuthConfig.setConsumerSecret('anonymous');
    return {oAuthServiceName:name, oAuthUseToken:"always"};
}