How to save and restore content with markers?

I have a CodeMirror instance that has some content/text and some markers to highlight certain regions. I would like to save all the content including the markers to some backend service. I would then like to restore the content and markers such that the restored document looks like the original (markers included).

Whats the best way to accomplish this?

Solution

You can look at my code. I've done this while ago.

http://jsfiddle.net/aljordan82/4ewe9/

<html>
<head>
<style>
    .bg {
        background:#CCC;
    }
</style>
<script>
    $(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"
                });
            }
        }
    });
</script>
<head>
<body>

    <p>we need two textareas, one to store array of markers and the other is so 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>
</body>