Save markup on HTML field

asked on November 29, 2016

I am working on a proof of concept for a Contract using Laserfiche forms. The idea is for the user to enter data fields and review the Terms & Conditions with the ability to 'markup' the text to add/remove text within the HTML field. I have this working and it's actually pretty nice! The only caveat is that the changes/markup do not save when the form is submitted to Laserfiche. I know this is an issue with using Javascript and Forms, but thought I would try my luck to see if anyone has any thoughts/ideas.

Form Example:

HTML for field:

<div id="textbody"><p>I am an editable text area</p></div>

Javascript to make field 'editable' Note: I am using ice.js for the contentEditable function - this js library applies the markup

//Begin editable text
$('.makeChanges').on('touchstart click', function ()//Makes the text editable when the user clicks the button  
  {
    $('#Field31').show();
$.getScript('https://servername/Forms/js/ice.min.js', function () 
	{
      var tracker = new ice.InlineChangeEditor({
        element: document.getElementById('textbody'), 
        handleEvents: true,
        plugins: [
          'IceAddTitlePlugin',
          'IceEmdashPlugin',
          {
            name: 'IceCopyPastePlugin', 
            settings: {
              preserve: 'p,a[href],span,[id,class]em,strong'
            }
          }
		]
      });
		var user = $('.username input').val();//Gets the user-entered username
		tracker.startTracking();
		tracker.setCurrentUser({id: 1, name: user});
      $('#Field63').on('blur', function() {
		var user = $('.username input').val();
        var changes = tracker.getChanges();
        var time = changes['2'].time;
        var type = changes['2'].type;
        var userid = changes['2'].userid;
        var username = changes['2'].username;
		$('.changes textarea').val(type + " " + user + " " + time);//Adds change information to the .changes textarea field
    });
    });
    });
//End editable text

I'm looking for a way to make these changes permanent on my form. I thought of maybe using a 'Done' button that would 'commit' the changes, but that still didn't display the changes when it is stored to Laserfiche. Any help is much appreciated!

Nate

0 0

replied on November 29, 2016

What is #Field63? Are values actually being saved in your .changes textarea when you click off of "textbody"?

In order to save a form in the repository, Forms first re-renders the form behind the scenes. What this means is that custom elements and such that you edit before submission won't "stick", and you'll see the original version of the form instead.

So you need a bit more code that will look at the .changes textarea and rebuild the "textbody" contents based on what it finds there (except this time it will be the original contents plus the marked up changes). Think of it as your current code working in reverse.

The only problem is I don't know if the ice.js API supports that kind of function. I looked at the code on Github and it looks like it can only initialize content on a block area and there isn't a way to import any change objects on pre-existing text. Haven't played with it though so I can't say for sure.

---

All that said, it's worth taking a step back and looking at the bigger picture. Laserfiche Forms was not designed for content editing. In fact certain aspects of its design make it very hard to use for that purpose. It's like trying to use a screwdriver as a hammer. You may be able to get it to work, but usability would most likely be subpar.

Why not just use Microsoft Word for this (or any other existing tool made for this purpose) and have users attach the word files to the form? It would be a much cleaner solution. But if you are adamant about moving forward with this, look into CKEditor and its various plugins for tracking changes. Ice.js seems to be abandoned.

0 0

Question

Question

Replies

Sign in to reply to this post.