How do I use Google Apps Script to change a CSS page to one with inline styles?

后端未结
关注
 1  751
无人共我 2020-12-11 08:59
Background...
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.
1条回答
萌比男神i (楼主)
2020-12-11 09:24
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?)
Here's an example script, that builds on the getElementByVal() function from Does Google Apps Script have something like getElementById?.
inline() function

/**
 * Convert html containing  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('',"igm");
  var badmeta = new RegExp('',"igm");
  var badinput = new RegExp('',"igm");
  var xml = response.getContentText()
                    .replace(badlink,"" )
                    .replace(badinput,"" )
                    .replace(badmeta,"" )
                    .replace(/
/g,"
");

  // So far, so good! Next, extract converted text from page.   // 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();
}
</code></pre>

<h3>Explanation</h3>

<p>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.</p>

<p>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. </p>

<p>In the Css Inline service that was selected, Chrome's ability to "Inspect Element" was used to determine the tag type (<code><textarea></code>) and a way to uniquely identify it (<code>name="text"</code>). Armed with that knowledge, we had everything we needed to use <code>getElementByVal()</code> to dig through the HTML returned from a POST request. (Alternatively, you could use String methods to find and extract the text you want.)</p>

<p>But when that was all put together, XmlService kept complaining about the format of the HTML in the result page - so JavaScript String & RegExp methods were used to balance the malformed tags before passing the page on.</p>

<h3>Example</h3>

<p>Here's a simple example illustrating use of the <code>inline()</code> function. Note that style information is absorbed from both the external css link AND the tagged styling.</p>

<pre><code>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"
}
</code></pre>

<h3>Result</h3>

<pre><code>  <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>
</code></pre>
    </p>
             <div class="appendcontent">
                                                        </div>
            </div>
            <div class="jieda-reply">
              <span class="jieda-zan button_agree" type="zan" data-id='1063202'>
                <i class="iconfont icon-zan"></i>
                <em>0</em>
              </span>
                   <span type="reply" class="showpinglun" data-id="1063202">
                <i class="iconfont icon-svgmoban53"></i>
               讨论(0)
              </span>
                                                  
              
              <div class="jieda-admin">
                          
             
       
          
              </div>
                                    </div>
                         <div class="comments-mod "  style="display: none; float:none;padding-top:10px;" id="comment_1063202">
                    <div class="areabox clearfix">

<form class="layui-form" action="">
               
            <div class="layui-form-item">
    <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label>
    <div class="layui-input-block" style="margin-left:90px;">
         <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" />
                        <input type='hidden' value='0' name='replyauthor' />
    </div>
    <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="1063202">提交评论 </span></div>
  </div>
  
</form>
                    </div>
                    <hr>
                    <ul class="my-comments-list nav">
                        <li class="loading">
                        <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />
                         加载中...
                        </li>
                    </ul>
                </div>
          </li>
                              			
        </ul>
        
        <div class="layui-form layui-form-pane">
          <form id="huidaform"  name="answerForm"  method="post">
            
            <div class="layui-form-item layui-form-text">
              <a name="comment"></a>
              <div class="layui-input-block">
            
    
<script type="text/javascript" src="https://www.e-learn.cn/qa/static/js/neweditor/ueditor.config.js"></script>
<script type="text/javascript" src="https://www.e-learn.cn/qa/static/js/neweditor/ueditor.all.js"></script>
<script type="text/plain" id="editor"  name="content"  style="width:100%;height:200px;"></script>                                 
<script type="text/javascript">
                                 var isueditor=1;
            var editor = UE.getEditor('editor',{
                //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
                toolbars:[['source','fullscreen',  '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'link', 'unlink', 'anchor', '|', 'simpleupload', 'insertimage', 'scrawl', 'insertvideo', 'attachment', 'map', 'insertcode', '|', 'horizontal', '|', 'preview', 'searchreplace', 'drafts']],
            
                initialContent:'',
                //关闭字数统计
                wordCount:false,
                zIndex:2,
                //关闭elementPath
                elementPathEnabled:false,
                //默认的编辑区域高度
                initialFrameHeight:250
                //更多其他参数，请参考ueditor.config.js中的配置项
                //更多其他参数，请参考ueditor.config.js中的配置项
            });
                        editor.ready(function() {
            	editor.setDisabled();
            	});
                            $("#editor").find("*").css("max-width","362px");
        </script>              </div>
            </div>
                          
    

        
         <div class="layui-form-item">
                <label for="L_vercode" class="layui-form-label">验证码</label>
                <div class="layui-input-inline">
                  <input type="text"  id="code" name="code"   value="" required lay-verify="required" placeholder="图片验证码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid">
                  <span style="color: #c00;"><img class="hand" src="https://www.e-learn.cn/qa/user/code.html" onclick="javascript:updatecode();" id="verifycode"><a class="changecode"  href="javascript:updatecode();"> 看不清?</a></span>
                </div>
              </div>
                                  <div class="layui-form-item">
                    <input type="hidden" value="344847" id="ans_qid" name="qid">
   <input type="hidden" id="tokenkey" name="tokenkey" value=''/>
                <input type="hidden" value="How do I use Google Apps Script to change a CSS page to one with inline styles?" id="ans_title" name="title"> 
             
              <div class="layui-btn    layui-btn-disabled"  id="ajaxsubmitasnwer" >提交回复</div>
            </div>
          </form>
        </div>
      </div>
      <input type="hidden" value="344847" id="adopt_qid"	name="qid" /> 
      <input type="hidden" id="adopt_answer" value="0"	name="aid" />
    </div>
    <div class="layui-col-md4">
          
 <!-- 热门讨论问题 -->
     
 <dl class="fly-panel fly-list-one">
        <dt class="fly-panel-title">热议问题</dt>
            <!-- 本周热门讨论问题显示10条-->