SPLOT-light?

simple little editor

So the other day I posted about how to make silent Google Form submissions. Then this morning I was looking around at headless CMS options1 and saw this one being advertised as being driven by Google Drive/Spreadsheets.

Those two things came together as I mowed my lawn and I wondered if I couldn’t make a little rich text editor to construct a one-piece content creator/displayer using Google Sheets. That led to a little research into URL parameter limits.

And then this evening I made this editor. The page uses Quill to take care of the rich text editor. It turns out there’s a whole world of rich text editor options out there. I’m only scratching the surface with Quill but it works fine for now.

It’s bare bones. You can associate an image via a URL, make a title, and add some text. It does show some interesting possibilities though and all with very little infrastructure or real technical know how.

The image preview is built by this little bit of javascript. It’s based on having a text field with the id of ‘theImage’ and then there’s a check to make sure there’s not already an image attached and if there is it replaces it.

function previewImage(){
    var url = document.getElementById('theImage').value;    
    var img = document.createElement('img');    
    img.src = url;
    var prev = document.getElementById('imgPreview');   
   //check for images already present
    if (prev.innerHTML.length < 0){ 
     	prev.appendChild(img);
	 } else {
		 prev.innerHTML = '<img src="'+url+'">';
	 }
}

This little bit of javascript builds the Google Forms URL from the various text fields on the page. I set it to run again on onblur (when a text field loses focus) and when there are edits to the Quill field. Probably not the most efficient path but it works.

function getData(){
  var title = encodeURI(getTitle());
  var image = getImage();
  var text = encodeURI(document.getElementsByClassName('ql-editor')[0].innerHTML);

  var url = 'https://docs.google.com/forms/d/e/1FAIpQLSc6g67PcQ1-0hhmupOufIoX5tTPio6hwEbIBiLWe5h_k74DCQ/formResponse?usp=pp_url&entry.468287345='+title+'&entry.157183567='+text+'&entry.1663876317='+image+'&submit=Submit';
  document.getElementById('theUrl').dataset.link = url;
  return url;
}

Initially submission would take you to that URL but that wasn’t what we wanted. Turns out fetch seems quite enough to do what we need. If I decide to make this better, I could do more with the confirmation message and do something to scroll down or something like that.

function submitPost(){	
var url = document.getElementById('theUrl').getAttribute('data-link');
console.log(url);
fetch(url).then(function(response) {	
	console.log('yes ' + url)
}).catch(function(err) {
	// Error 🙁
});
}

The display stuff is the same old, same old so I’m not going to go into that again.

It’s a simple little tool that uses very little resource to do one very specific thing. All in all this was a pretty successful experiment.

****UPDATE****
This seems to fail sometimes. I don’t really know why.

****MORE UPDATE*****
Safari is not a fan nor is Chrome on iOS. I’m not sure why. I switched the fetch of the Google Forms URL to be something that is set via an internal iframe (a weird path but . . . ) and that too seems to fail. I’ll likely mess with this more but given it’s just a whim . . . I’ll likely spend way too many hours messing with it.


1 Don’t judge how I spend my Saturdays.

Comments on this post

No comments.

Leave a Reply

Trackbacks and Pingbacks on this post

No trackbacks.

TrackBack URL