scrape-it.html

<script type="text/javascript">
    RED.nodes.registerType('scrape',{
        category: 'parser',
        color: '#a6bbcf',
        defaults: {
            name: {value:""},
            mapping: {value:""},
            sourceProperty: {value:"payload", required:false},
            targetProperty: {value:"payload", required:true}
        },
        inputs:1,
        outputs:1,
        icon: "font-awesome/fa-code",
        label: function() {
            return this.name||"scrape";
        },
        oneditprepare: function(){
            $("#node-input-sourceProperty").typedInput({
                type:"msg",
                types:["msg"],
                typeField: "#node-input-sourcePropertyType"
            });
            $("#node-input-targetProperty").typedInput({
                type:"msg",
                types:["msg"],
                typeField: "#node-input-targetPropertyType"
            });
			this.editor = RED.editor.createEditor({
				id: 'node-input-mapping-editor',
				mode: 'ace/mode/json',
				value: $("#node-input-mapping").val()
			});
            this.editor.focus();
        },
		oneditsave: function(){
			console.log('oneditsave');
			$("#node-input-mapping").val(this.editor.getValue());
			console.log(`node-input-mapping: ${$('#node-input-mapping').val()}`);
			this.editor.destroy();
			delete this.editor;
		},
		oneditcancel: function(){
			console.log('oneditcancel');
			this.editor.destroy();
			delete this.editor;
		},
		oneditresize: function(size){
			console.log('oneditresize');
			var rows = $("#dialog-form>div:not(.node-text-editor-row)");
			var height = $("#dialog-form").height();
			for (var i=0; i<rows.size(); i++) {
					height -= $(rows[i]).outerHeight(true);
			}
			var editorRow = $("#dialog-form>div.node-text-editor-row");
			height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
			$(".node-text-editor").css("height",height+"px");
			this.editor.resize();
		}
    });
</script>

<script type="text/html" data-template-name="scrape">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>

    <div class="form-row">
        <label for="node-input-sourceProperty"><i class="fa fa-ellipsis-h"></i> Property</label>
        <input type="text" id="node-input-sourceProperty" placeholder="">
    </div>

    <div class="form-row">
        <label for="node-input-targetProperty"><i class="fa fa-random"></i> Output</label>
        <input type="text" id="node-input-targetProperty" placeholder="">
    </div>

	<div class="form-row" style="margin-bottom: 0px;">
		<label for="node-input-mapping" style="width:fit-content"><i class="fa fa-file-code-o"></i> Scrape-It Query</label>
		<input type="hidden" id="node-input-mapping" autofocus="autofocus">
	</div>
    	<div class="form-row node-text-editor-row">
            <div style="height: 250px; min-height:150px;"
                class="node-text-editor"
                id="node-input-mapping-editor" ></div>
	    </div>

</script>
<script type="text/html" data-help-name="scrape">
    <p>Scrape html request</p>

    <h3>Inputs</h3>
    <dl class="message-properties">
        <dt>payload
            <span class="property-type">string</span>
        </dt>
        <dd> the html to be parsed. </dd>
    </dl>

    <h3>Outputs</h3>
     <ol class="node-ports">
         <li>html parsed to JSON
             <dl class="message-properties">
                 <dt>payload <span class="property-type">JSON</span></dt>
                 <dd>html parsed as defined in mapping property</dd>
             </dl>
         </li>
     </ol>

    <h3>Details</h3>
        <p>Mapping property define how to transform html to JSON.</p>
    <h3>References</h3>
    <ul>
        <li><a href="https://github.com/cheeriojs/cheerio#-selector-context-root">Selectors section of the Cheerio library</a></li>
    </ul>
</script>