1

I am making my first blog, and I want to be able to write the posts as text files on a word processor like Microsoft Word so that I can spellcheck and check for mistakes, but then include the contents of those files into my website with custom formatting using CSS (e.g. add a style attribute to the HTML like this: style='font-family: sans-serif;').

I have already tried searching around the web, and I found this website blog.teamtreehouse.com, but it didn't suit my needs because it needs the user to click a button to include the file. I also came up with some test code that relies on the FileReader API, but since I don't understand the bits parameter of the File object (I left it blank), the test page just shows undefined. Here's the code:

    <!DOCTYPE html>
    <html>
 <head>
  <title>Test Webpage</title>
 </head>
 <body>
  <p id='output'></p><!--p tag will have styles applied to it-->
 </body>
 <script>
  var reader = new FileReader();

  reader.onload = function(e) {
   var text = reader.result;
  }
  //What does the first parameter do? What am I supposed to put here?
  //                   |
  //                   |
  var file = new File([ ],'test.txt');
  var txt = reader.readAsText(file);
  var out = document.getElementById('output');
  out.innerHTML = txt+'';
 </script>
    </html>
J.vee
  • 623
  • 1
  • 7
  • 26
Thuong Vo
  • 77
  • 11
  • You can edit html files in Word – Jaybird Dec 11 '18 at 10:20
  • you can directly use your content in html – AKASH PANDEY Dec 11 '18 at 10:22
  • Are you trying to upload files onto your website via a(n) HTML form's file input or do you want to edit the HTML of web pages? It's not clear which of the two you're trying to do. – Agi Hammerthief Dec 11 '18 at 10:24
  • How about something like this? Embedding it in the HTML is more straightforward in my opinion. ` ` – Eugenio Dec 11 '18 at 10:24
  • 1
    @Jaybird The reason I wanted to separate my posts into different text files is to organize it better. That way, I don't need to see all of my HTML code when I am writing a new post. – Thuong Vo Dec 11 '18 at 10:25
  • 1
    @Eugenio That, unfortunately, doesn't let me apply and CSS styles. – Thuong Vo Dec 11 '18 at 10:26
  • @–AgiHammerthief I am trying to put a txt file's contents into my webpage. I am not trying to upload the files to the website via a form input, as I am already able to do that, since I found the website mentioned. – Thuong Vo Dec 11 '18 at 10:30
  • @ThuongVo Can't you just do an ajax call to the file to read the contents? Maybe need to setup your web server to allow this. What server are you using? Also why don't you do this with a database? Sounds like a much better approach to me. – Mark Baijens Dec 11 '18 at 10:56
  • Thank you for the suggestion, using a database works great. – Thuong Vo Mar 07 '20 at 02:04

3 Answers3

1

Just don't read files in js in a web browser. You can create an API with node.js and then make an http request to get this data.

Once you created the server, just do like that:

const fs = require('fs');
var content;
// First I want to read the file
fs.readFile('./Index.html', function read(err, data) {
    if (err) {
        throw err;
    }
    content = data;

    // Invoke the next step here however you like
    console.log(content);   // Put all of the code here (not the best solution)
    processFile();          // Or put the next step in a function and invoke it
});

function processFile() {
    console.log(content);
}

if you want to know how to do an api, here it is: https://dev.to/tailomateus/creating-an-express-api--7hc

Hope it helps you.

Marius Van Nieuwenhuyse
  • 92
  • 1
  • 11
0

In case you have *.txt files on your server you can utilize Javascript to display the content in the browser like so:

fetch('/path/to/file.txt')
  .then(r => r.text())
  .then(txt => document.querySelector('<a selector>').innerHTML = txt);

That approach has the drawbacks:

  • The urls/filenames need to be known by the Javascript
  • Plain txt files do not contain any formatting, so the text block wont have a headline or alike.

But all in all: Without any server side processing this is a repetitive thing, since JS from the client side cannot even trigger a directory listing, to gain all the files that should be loaded, so for each new file you create, you have to add an entry in the Javascript as well. This is a very common problem an is already solved by the various content management systems out there (Wordpress, Joomla, Drupal,…), so I would recommend to just use on of those. Btw. Grav is a purely file based CMS, that works without a backend interface as well, so a very simple solution for your problem.

philipp
  • 15,947
  • 15
  • 61
  • 106
  • I actually already managed to do the exact same thing with an embed tag: . That also doesn't let me format it using CSS, so it looks very bad when I put this in my website – Thuong Vo Dec 11 '18 at 10:35
  • Well, this way you can style the `txt` using css, but just for the entire block of text, not individual paragraphs. To make that happen you would need to use some sort of formatting, markdown can be a good starting point https://github.com/evilstreak/markdown-js – philipp Dec 11 '18 at 10:48
0

In the end, I used an HTTP request to retrieve the text from a file.

function includeText() {
  var xmlhttp, allElements, element, file;
  allElements = document.getElementsByTagName("*");
  for (let i = 0; i < z.length; i++) {
    element = allElements[i];
    file = element.getAttribute("insert-text-from-file");
    if (file) {
      xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {element.innerText = this.responseText;}
          if (this.status == 404) {element.innerText = "Contents not found";}
          elmnt.removeAttribute("insert-text-from-file");
          includeText();
        }
      }
      xmlhttp.open("GET", file, true);
      xmlhttp.send();
      return;
    }
  }
}
Thuong Vo
  • 77
  • 11