AngularJS + TinyMCE: ng-maxlength is not working on </a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2016-01-14T15:33:13.403" class="fromnow">Jan 14 '16 at 15:33</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2018-10-25T20:07:55.560" datetime="2018-10-25T20:07:55.560">Oct 25 '18 at 20:07</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 2,598 times"> <span class="fc-light mr2">Viewed</span> 2,598 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="34793442" data-ownerid="1429387" data-score="7"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="34793442"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="7">7</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I want to limit max text length so it doesn't exceed a column length in a DB. I've put this limitation on backend, and now I want to enforce it on frontend.</p> <p>I use <a class="external-link" href="https://www.tinymce.com/" rel="nofollow noreferrer">TinyMCE</a> v4.3.3 with <a class="external-link" href="https://github.com/angular-ui/ui-tinymce" rel="nofollow noreferrer">angular-ui-tinymce</a> v0.0.12 plugin and <a class="external-link" href="https://angularjs.org/" rel="nofollow noreferrer">AngularJS</a> v1.4.6.</p> <p>JS:</p> <pre><code>var tinymceOpts = { toolbar: false, menubar: false, // do not add <p></p> from the start: forced_root_block: '' } </code></pre> <p>HTML:</p> <pre><code><textarea ui-tinymce="tinymceOpts" ng-model="body" name="body" ng-maxlength="100" required> {{ body }} </textarea> <span ng-show="form.body.$error.maxlength" class="error"> Reached limit! </span> </code></pre> <p>As you can see, I use <a class="external-link" href="https://docs.angularjs.org/api/ng/directive/textarea" rel="nofollow noreferrer"><code>ng-maxlength</code></a> attribute here to limit a length of <code><textarea></code>.</p> <p><strong>Expected result:</strong> input is validated and error message is displayed only if content length <strong>(with tags included)</strong> has exceeded a limit (100 characters in this case).</p> <p><strong>Actual result:</strong><br/> <a class="external-link" href="https://i.stack.imgur.com/qCTs2.png" rel="nofollow noreferrer"><img alt="Screenshot" src="../../images/3829075079.webp"/></a></p> <p>Form input state is set to invalid when the input contains some text (no matter what length).</p> <hr/> <p>Number of characters (in the right bottom corner) is calculated for testing:</p> <pre><code>this.getCharCount = function() { var tx = editor.getContent({format: 'raw'}); return tx.length; }; </code></pre></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/angularjs" class="post-tag js-gps-track" title="show questions tagged 'angularjs'" rel="tag">angularjs</a> <a href="../../questions/tagged/tinymce" class="post-tag js-gps-track" title="show questions tagged 'tinymce'" rel="tag">tinymce</a> <a href="../../questions/tagged/textarea" class="post-tag js-gps-track" title="show questions tagged 'textarea'" rel="tag">textarea</a> <a href="../../questions/tagged/ng-maxlength" class="post-tag js-gps-track" title="show questions tagged 'ng-maxlength'" rel="tag">ng-maxlength</a> <a href="../../questions/tagged/angular-ui-tinymce" class="post-tag js-gps-track" title="show questions tagged 'angular-ui-tinymce'" rel="tag">angular-ui-tinymce</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2016-02-10T09:09:19.263" class="relativetime">Feb 10 '16 at 09:09</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">naXa stands with Ukraine</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jan 14 '16 at 15:33">asked Jan 14 '16 at 15:33</time> <a href="../../users/1429387/naxa-stands-with-ukraine" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1429387.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="naXa stands with Ukraine" /> </a> <div class="s-user-card--info"> <a href="../../users/1429387/naxa-stands-with-ukraine" class="s-user-card--link">naXa stands with Ukraine</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">35,493</li> <li class="s-award-bling s-award-blinggold" title="19 gold badges">19</li> <li class="s-award-bling s-award-blingsilver" title="190 silver badges">190</li> <li class="s-award-bling s-award-blingbronze" title="259 bronze badges">259</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-34793442" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="34793442" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-58330471" class="comment js-comment " data-comment-id="58330471" data-comment-owner-id="1429387" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment58330471_34793442"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">It is a bug in angular-ui-tinymce: [maxlength/minlength attribute broke 2-way databinding](https://github.com/angular-ui/ui-tinymce/issues/145)</span> – <a href="../../users/1429387/naxa-stands-with-ukraine" title="35,493 reputation" class="comment-user owner">naXa stands with Ukraine</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/34793442/angularjs-tinymce-ng-maxlength-is-not-working-on-textarea#comment58330471_34793442"><span title="2016-02-10T08:53:53.213 License: CC BY-SA 3.0" class="relativetime-clean">Feb 10 '16 at 08:53</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">3 Answers<span style="display:none;" itemprop="answerCount">3</span></h2> </div> </div> </div> <a name="34808516"></a> <div id="answer-34808516" class="answer " data-answerid="34808516" data-ownerid="346063" data-score="1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="34808516"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>The problem here is that TinyMCE uses an own <code><iframe></code> to edit text contents and writes them back to your <code><textarea></code> on special events. No wonder <code>ng-maxlength</code> does not work here.</p> <p>In order to achieve what you want you will need to check for the editor content itself and disallow entering more characters in case the maxlength is reached.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Oct 25 '18 at 20:07">edited Oct 25 '18 at 20:07</time> <a href="../../users/1429387/naxa-stands-with-ukraine" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1429387.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="naXa stands with Ukraine" /> </a> <div class="s-user-card--info"> <a href="../../users/1429387/naxa-stands-with-ukraine" class="s-user-card--link">naXa stands with Ukraine</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">35,493</li> <li class="s-award-bling s-award-blinggold" title="19 gold badges">19</li> <li class="s-award-bling s-award-blingsilver" title="190 silver badges">190</li> <li class="s-award-bling s-award-blingbronze" title="259 bronze badges">259</li> </ul> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jan 15 '16 at 09:59">answered Jan 15 '16 at 09:59</time> <a href="../../users/346063/thariama" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/346063.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Thariama" /> </a> <div class="s-user-card--info"> <a href="../../users/346063/thariama" class="s-user-card--link">Thariama</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">50,002</li> <li class="s-award-bling s-award-blinggold" title="13 gold badges">13</li> <li class="s-award-bling s-award-blingsilver" title="138 silver badges">138</li> <li class="s-award-bling s-award-bling__bronze" title="166 bronze badges">166</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-34808516" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="34808516" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-58326184" class="comment js-comment " data-comment-id="58326184" data-comment-owner-id="1429387" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment58326184_34808516"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I'm using AngularJS wrapper for TinyMCE, it binds text content to a model. So `ng-maxlength` directive shouldn't even know about the `<iframe>`. I have troubles setting a limit on characters count in the model. I've tried writing a custom TinyMCE plugin that counts characters, but I've faced another problem ([Data URIs are shorter inside TinyMCE](http://stackoverflow.com/questions/34223337) then in a model and I get a wrong content length)</iframe></span> – <a href="../../users/1429387/naxa-stands-with-ukraine" title="35,493 reputation" class="comment-user owner">naXa stands with Ukraine</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/34793442/angularjs-tinymce-ng-maxlength-is-not-working-on-textarea#comment58326184_34808516"><span title="2016-02-10T06:27:53.707 License: CC BY-SA 3.0" class="relativetime-clean">Feb 10 '16 at 06:27</span></a></span> </div> </div> </li> <li id="comment-58330029" class="comment js-comment " data-comment-id="58330029" data-comment-owner-id="346063" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment58330029_34808516"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">so you want to count everything (tag code included)?can you elaborate a bit more - i think i might have a solution (but not much time atm)</span> – <a href="../../users/346063/thariama" title="50,002 reputation" class="comment-user ">Thariama</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/34793442/angularjs-tinymce-ng-maxlength-is-not-working-on-textarea#comment58330029_34808516"><span title="2016-02-10T08:41:05.920 License: CC BY-SA 3.0" class="relativetime-clean">Feb 10 '16 at 08:41</span></a></span> </div> </div> </li> <li id="comment-58330696" class="comment js-comment " data-comment-id="58330696" data-comment-owner-id="1429387" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment58330696_34808516"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Yes, I want to limit max text length so it doesn't exceed a column length in a DB. I've put this limitation on backend, and now I want to enforce it on frontend. Please, don't trouble yourself and post the solution when you have more free time. I already have a solution that works with enabled SCE _(I wrote a custom `maxlength` Angular directive)_ and will post it later.</span> – <a href="../../users/1429387/naxa-stands-with-ukraine" title="35,493 reputation" class="comment-user owner">naXa stands with Ukraine</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/34793442/angularjs-tinymce-ng-maxlength-is-not-working-on-textarea#comment58330696_34808516"><span title="2016-02-10T08:59:31.560 License: CC BY-SA 3.0" class="relativetime-clean">Feb 10 '16 at 08:59</span></a></span> </div> </div> </li> <li id="comment-58335344" class="comment js-comment " data-comment-id="58335344" data-comment-owner-id="346063" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment58335344_34808516"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">my solution would be expensive (in time), because you would need to check for the editor content length each time the user performs an editor action. In case the maxlength is exceeded the editor content would get reset to the previous state (undo step).</span> – <a href="../../users/346063/thariama" title="50,002 reputation" class="comment-user ">Thariama</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/34793442/angularjs-tinymce-ng-maxlength-is-not-working-on-textarea#comment58335344_34808516"><span title="2016-02-10T10:55:20.557 License: CC BY-SA 3.0" class="relativetime-clean">Feb 10 '16 at 10:55</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="34852655"></a> <div id="answer-34852655" class="answer " data-answerid="34852655" data-ownerid="1429387" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="34852655"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I managed to get it working! It was necessary to disable <a class="external-link" href="https://docs.angularjs.org/api/ng/service/$sce" rel="nofollow">SCE</a> mode in AngularJS:</p> <pre><code>angular.module('myApp', ['ui.tinymce']) .config(['$sceProvider', function($sceProvider) { $sceProvider.enabled(false); }]) .controller('myCtrl', ['$scope', function($scope) { // ... }]); </code></pre> <p><kbd><a class="external-link" href="https://jsfiddle.net/naXa/zsnLupvd/" rel="nofollow">jsFiddle</a></kbd></p> <h1>! Beware of security vulnerabilities !</h1> <p>Strict Contextual Escaping (<a class="external-link" href="https://docs.angularjs.org/api/ng/service/$sce" rel="nofollow">SCE</a>) is a mode in which AngularJS requires bindings in certain contexts to result in a value that is marked as safe to use for that context. With SCE disabled, an AngularJS application allows to render arbitrary HTML into the <code><div></code>, and rendering user controlled input creates security vulnerabilities.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jan 18 '16 at 10:38">answered Jan 18 '16 at 10:38</time> <a href="../../users/1429387/naxa-stands-with-ukraine" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1429387.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="naXa stands with Ukraine" /> </a> <div class="s-user-card--info"> <a href="../../users/1429387/naxa-stands-with-ukraine" class="s-user-card--link">naXa stands with Ukraine</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">35,493</li> <li class="s-award-bling s-award-blinggold" title="19 gold badges">19</li> <li class="s-award-bling s-award-blingsilver" title="190 silver badges">190</li> <li class="s-award-bling s-award-blingbronze" title="259 bronze badges">259</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="34880832"></a> <div id="answer-34880832" class="answer " data-answerid="34880832" data-ownerid="1603746" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="34880832"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I believe what you really want is to have the TinyMCE directive calculate the "length" of the visible characters as opposed to counting the characters in the <code><textarea></code>. TinyMCE is going to inject its own iFrame into the page and the editor is part of that iFrame - its not the <code><textarea></code>. </p> <p>When you put validation on the <code><textarea></code> you are asking Angular to count the characters in the <code><textarea></code>...this is going to be an issue for you. The issue is that the standard directives just count characters so a simple (empty) HTML sample:</p> <p><code><p></p></code></p> <p>Would indeed be counted as 7 characters when in reality there is no "visible" content. I built a custom directive for another editor and what I ended up doing is using jQuery's <code>.text()</code> function against the HTML. This removes all of the HTML tags and provides an approximation for the number of actual text characters in the editor. This is a portion of the code in the directive:</p> <pre><code>var jStrippedString = jQuery(modelValue).text().trim(); return (maxlength < 0) || ngModelCtrl.$isEmpty(jStrippedString) || (jStrippedString.length <= maxlength); </code></pre> <p>I believe that you would want to create a custom Attribute directive that allows you to grab the model data for the editor and perform this validation yourself as opposed to simply counting the characters in the <code><textarea></code>.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jan 19 '16 at 15:37">answered Jan 19 '16 at 15:37</time> <a href="../../users/1603746/michael-fromin" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1603746.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Michael Fromin" /> </a> <div class="s-user-card--info"> <a href="../../users/1603746/michael-fromin" class="s-user-card--link">Michael Fromin</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">13,131</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="20 silver badges">20</li> <li class="s-award-bling s-award-blingbronze" title="31 bronze badges">31</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-34880832" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="34880832" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-57499766" class="comment js-comment " data-comment-id="57499766" data-comment-owner-id="1429387" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment57499766_34880832"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">No, I don't. I said clearly that I need to count content length with tags.</span> – <a href="../../users/1429387/naxa-stands-with-ukraine" title="35,493 reputation" class="comment-user owner">naXa stands with Ukraine</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/34793442/angularjs-tinymce-ng-maxlength-is-not-working-on-textarea#comment57499766_34880832"><span title="2016-01-19T15:39:41.607 License: CC BY-SA 3.0" class="relativetime-clean">Jan 19 '16 at 15:39</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>