I am working with tinyMCE, which, in its latest release doesn't support the editing of <head> and <!doctype>. I still need to use it to create a "full" document, so i need a way of "prepending" those tags to the editor content.
The problem can be split in two parts:
When i edit a file in my page, and use save() from TinyMCE, only the contents in the editor are POSTed to my Node.js + Express backend. The solution i've found is to have, outside of the editor, some buttons to create options for the request, so that the server knows what to write together with the content.
The real problem arises when i want to upload a file from my machine to be modified in the editor, when a file i upload is a "full" HTML file. In that case, the content outside the <body> tag still isn't displayed in the editor, but it's discarded, stopping me from editing it from within the page as i would if i were creating a new doc.
As i mentioned i'm working with node.js and Express for a backend, and, since i'm not familiar with jquery i'd need the solution to be vanilla js.
I have looked into the html-dom-parser' library, but it doesn't seem to fit the bill as i don't see how i can use the dom object it produces to then do the splitting.
I am using an <input type ="file> to choose the file i want to upload, but this problem is stumping me and i'm not sure anymore if it's the right path, so any help is welcome.
Related
Please read carefully before marking as dupe.
I want to read a javascript file on frontend. The javascript file is obviously being used as a script on the webpage. I want to read that javascript file as text, and verify if correct version of it is being loaded in the browser. From different chunks of text in the js file, I can identify what version is actually being used in the end user's browser. The js file is main.js which is generated by angular build.
I know we can do something like creating a global variable for version or some mature version management. But currently, on production site, that will mean a new release, which is couple of months from now. Only option I have right now is html/js page, which can be directly served from production site, without waiting for new release.
So my question is, is it possible we can read a javascript file as text in hmtl/js code in the browser.
an idea can be :
use fetch api to get a container that can be use to async load the script
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
use text() method which return a promise to get text content
fetch('http://localhost:8100/scripts.js').then((res) => res.text()).then(scriptContent => {
// scriptContent contain the content of your script
// if (scriptContent.includes('version : 1.1.1')
console.log(scriptContent);
});
this is absolutely not an efficient way, but since you want to work without any new version release or working with a version management system
here is the thing
assume file's checksum (md5 sha125 or anything) of V1.0 equals X and you will calculate before the coding part.
if checksum(X) != X{
location.reload()
}
would help for a security features too since it's an important project.
another way of controlling this situation is changing the main.js file's name if it is possible.
I'm working on a new Acumatica screen for our company that will require some javascript code to retrieve and display a map object (from ESRI).
This code requires an external .js file that is included to the HTML by the javascript code itself. Everything works fine if I use a blank HTML page to test this.
The problem I have is that when I try using the same code from inside the Acumatica screen, it doesn't load this required external file, and therefore the code does not work properly.
I attempted to load the full .js file code along with my code, but it returned the following error:
error CS8095: Length of String constant exceeds current memory limit. Try splitting the string into multiple constants.
I haven't tried splitting this file into multiple strings (as the error message suggests), because I want to make sure there isn't a cleaner and more professional, direct/right way to do this.
Is it possible to manually import this external .js file into our Acumatica instance, so I can point to it instead? (in case it makes a difference if it's hosted in the same environment)
or, is there any way to make Acumatica able to load external files so we can keep using our current approach? (any setting that may be preventing external files from loading?)
I'm not sure i fully understand the question. What comes to mind however is you may be looking to use the PXJavaScript control. I used this link to help get my head wrapped around how to use the control. We had a need to trigger something off with Java Script and the PXJavaScript control got us to the end result we needed. Let me know if this gets you in the right direction?
Dynamically Change Button Color
I am trying to display javascript code that is linked to the html page using a script tag as text on the same html page (and also syntax highlighted) as a tool for users to see the underlying javascript code.
Eventually I also want to display the html and css file contents as a learning tool so users can see all the components in a user-friendly manner on the same page (at the bottom in a tab control).
The other requirement is that the files are local and not stored on a web server. And last but not least I would like to keep this as simple as possible (no jQuery, no additional javascript if possible).
I have tried a couple of approaches without much success:
using HTML5 import and AJAX, encountered CORS and local file access
errors
embed HTML5 tag, encountered prompt to execute javascript, not good
iframe tag , encountered prompt to execute javascript, not good
I am looking for simple and working solutions, I have searched quite a bit, but it is difficult to find something where you want to "convert" javascript into plain text and display it on an HTML page.
Extracting the src attribute from the script element and loading the file content via a separate HTTP call is probably the most feasible solution.
An example for the lodash source code, using jQuery:
var src = $('#lodash').attr('src');
$.get(src, undefined, function(data) {
$('#content').text(data);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id='lodash' src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.js'></script>
<pre id='content'></pre>
I am developing a Google App Script project that will be used right from within a Google Sheet, with HTML files as dialogs. My project will be a mix of .gs files as well as HTML files for data entry, etc. I am trying to use the methodology explained here:
https://developers.google.com/apps-script/guides/html/best-practices#separate_html_css_and_javascript
to create global JavaScript and CSS modules that I can include in my HTML files rather than cutting and pasting inline code all over the place. This will be mainly useful for the data-saving routines which capture form data, serialize it, then save it to Sheets via the methodology outlined here (and many other places): http://railsrescue.com/blog/2015-05-28-step-by-step-setup-to-send-form-data-to-google-sheets/.
The problem I am having is with trying to call the "include" statement from my HTML files, namely, lines like:
<?!= include('JavaScript'); ?>
It doesn't work when I create a menu on the spreadsheet to display my HTML file as a dialog -- the text of the include line just shows up as literal output on the dialog, and code does not appear to be getting included (not in scope).
I know the Google example is primarily for pages delpoyed via a web app, but I'd like to use my HTML files as dialogs right inside the spreadsheet (e.g. from a menu or sidebar) -- that feels nice and tidy to me. But if I can't get includes to work, my code base is going to be a nightmare and it will be really, really hard to standardize CSS across the whole app. I don't want to be cutting and pasting all the time.
So, what is the secret behind this <?! tag, and why won't it work in my HTML files when they are called as dialogs? It is clear those lines are different from the get-go (maybe not in a bad way, but they don't work), as the Google Scripting console displays those lines oddly, as depicted in the screenshot below:
Please try adding:
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
More information can be found in Adding Style Sheets.
Figured it out. I was not properly understanding the way the HTML was being served up as a dialog. I was using this behind a custom menu option:
var html = HtmlService.createHtmlOutputFromFile(htmlFileName);
when I should have been using the more dynamic:
var html = HtmlService.createTemplateFromFile(htmlFileName).evaluate();
The latter generates a user interface object where the server-side script is executed and everything is included properly when I display the object with showModalDialog() (or showSidebar()).
I just had a complete misunderstanding of how the user interface object was being created, so now all scripting works inside my HTML files.
I'm using the Angular Dialog Service to build pop up forms on my website. This services source can be found here: https://github.com/m-e-conroy/angular-dialog-service/blob/master/README.md
Anyway, the actual angular and JavaScript that describes what the modal contains and does goes after the following where the ... is:
.run(['$templateCache',function($templateCache){
$templateCache.put(...)
My problem is the html and js seem to have to all be one after the other with no spacing or indentation allowed between any of it. This causes the code that describes the modal to essentially just be a wall of text that has become borderline unreadable and editable in my complicated modal. An example of this can be found in the JS portion of the code here: http://codepen.io/m-e-conroy/pen/rkIqv
Is there an easy fix which will allow me to have my modals html and JS in non wall of text format and have it build successfully? If there is no fix this seems like a pretty big flaw in using the Angular Dialog Service to handle modals...
Thanks!
There are tools, like html2js, that can build templateCache for you.
It means, that you can store your html code in html files (where it obviously should be), and then gather it into single javascript file with $templateCache.put(/* content of html file */); in it. Just don't forget to include resulting module into your project, so when one of the services requested html file, it could be found in templateCache.
So you shouldn't edit html in .js files. It's wrong on many levels.