JSFiddle - React, Tailwind, and code Playground

by aljordan82

HTML

<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="https://codemirror.net/6/codemirror.js"></script>
 <h1>CodeMirror:Save Markers</h1>

<p>we need two textareas, one to store array of markers and the other is to store the content.</p>
<p></p>
<textarea id="savedMarkers">[[20,3,40,3],[12,8,90,8]]</textarea>
<textarea id="savedContent">
    <title>hidden textarea, poplate from back end</title>
    <catalog>
        <book id="bk101">
            <author>Gambardella, Matthew</author>
            <title>XML Developer's Guide</title>
            <genre>Computer</genre>
            <price>44.95</price>
            <publish_date>2000-10-01</publish_date>
            <description>An in-depth look at creating applications with XML.</description>
        </book>
        <book id="bk102">
            <author>Ralls, Kim</author>
            <title>Midnight Rain</title>
            <genre>Fantasy</genre>
            <price>5.95</price>
            <publish_date>2000-12-16</publish_date>
            <description>A former architect battles corporate zombies, an evil sorceress, and her own childhood to become queen of the world.</description>
        </book>
        <book id="bk103">
            <author>Corets, Eva</author>
            <title>Maeve Ascendant</title>
            <genre>Fantasy</genre>
            <price>5.95</price>
            <publish_date>2000-11-17</publish_date>
            <description>After the collapse of a nanotechnology society in England, the young survivors lay the foundation for a new society.</description>
        </book>
        <catalog>
</textarea>
<form>
    <br/>
 <textarea id="code" name="code"></textarea>
</form>
<button id="mark">Mark Selection</button>
<button id="save">Save Markers and Content</button>

CSS

h1 {font-size:1.5em;}
.bg {background:#CCC;}

JavaScript

$(document).ready(function () {  
     var strSavedMarkers =  $("#savedMarkers").val(); // get markers from textarea
      var arrMarkers = JSON.parse(strSavedMarkers)
    $("#markerStyle").html(".bg{background:#AAAAAA;}")
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        mode: "text/html",
        lineNumbers: true,
        onCursorActivity: function () {}
    });
    //get content from textarea 
    editor.setValue($("#savedContent").val());
    applyMarkers();
    $("#mark").click(function () { 
        // Marked selected text
        var marker = editor.markText(editor.getCursor(true), editor.getCursor(false), { className: "bg"});
        // get values of marker. [ch , line , ch ,  line]
        var tempArray = [marker.find().from.ch ,marker.find().from.line, marker.find().to.ch , marker.find().to.line]
        // we push this array to arrMarkers
        arrMarkers.push(tempArray)         
    });

    // when done editing 
    $("#save").click(function () {
         JSON.stringify(arrMarkers)
           $("#savedMarkers").val( JSON.stringify(arrMarkers))
          
    });
    
    function applyMarkers(){
        var strSavedMarkers = $("#savedMarkers").val(); // get markers from textarea
        var arrSavedMarkers = JSON.parse(strSavedMarkers)
             for(x in arrSavedMarkers)
                  { 
                     var marker = arrSavedMarkers[x]
                      editor.markText(   {'ch': marker[0], 'line': marker[1] },  {'ch': marker[2], 'line': marker[3] }, { className: "bg"});
          }    
        }
    });