# Saving editor state

**URL:** https://discuss.codemirror.net/t/saving-editor-state/504
**Category:** Uncategorized
**Created:** [October 14, 2015, 12:31pm UTC](https://discuss.codemirror.net/t/saving-editor-state/504 "2015-10-14T12:31:37Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![nabab](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/n/d07c76/32.png) [@nabab](https://discuss.codemirror.net/u/nabab)
#### Post date: [October 14, 2015, 12:31pm UTC](https://discuss.codemirror.net/t/saving-editor-state/504/1 "2015-10-14T12:31:37Z")

</div>

Is it possible to get the editor full state, i.e. mode, content, folded parts, and focused line, and to apply it to another editor? What are the methods I can use?  
Thanks

---

<div class="post-metadata">

### Author: ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)
#### Post date: [October 19, 2015, 11:46am UTC](https://discuss.codemirror.net/t/saving-editor-state/504/2 "2015-10-19T11:46:24Z")

</div>

There is no built-in operation for this. You’ll have to build something using `getValue`, `listSelections`, and `findMarks`.

---

<div class="post-metadata">

### Author: ![nabab](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/n/d07c76/32.png) [@nabab](https://discuss.codemirror.net/u/nabab)
#### Post date: [October 27, 2015, 8:58am UTC](https://discuss.codemirror.net/t/saving-editor-state/504/3 "2015-10-27T08:58:26Z")

</div>

Thanks for the answer and sorry for the late reply.  
I tried to use the methods you said, and I could copy my value and selection to another editor.  
Now remain the folded parts.  
From the function `getAllMarks` I get an array of `CodeMirror.TextMarker` objects, but I don’t know how to use them for setting markers. I don’t find with these objects a way to get `line` and `char` for `from` and `to` parameters for using `doc.markText`  
Is there a way to do so?

---

<div class="post-metadata">

### Author: ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)
#### Post date: [October 27, 2015, 2:36pm UTC](https://discuss.codemirror.net/t/saving-editor-state/504/4 "2015-10-27T14:36:49Z")

</div>

Use the markers’ `find` method, it’ll tell you where they currently are.

---

<div class="post-metadata">

### Author: ![nabab](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/n/d07c76/32.png) [@nabab](https://discuss.codemirror.net/u/nabab)
#### Post date: [October 27, 2015, 3:37pm UTC](https://discuss.codemirror.net/t/saving-editor-state/504/5 "2015-10-27T15:37:45Z")

</div>

Thanks, and sorry I missed that method!

I succeded to copy the folding pattern, and the value of the editor is correct, but the gutter still has the class `CodeMirror-foldgutter-open`, and does not open if I click on it, i.e. it changes class to `CodeMirror-foldgutter-folded` but won’t open up the folded text. May you help again?

My code:

```
for ( var i = 0; i < r.marks.length; i++ ){
  if ( r.marks[i].type === 'range' && r.marks[i].collapsed ){
    var fnd = r.marks[i].find(),
        mrk = doc.markText(fnd.from, fnd.to, {
          atomic: r.marks[i].atomic,
          clearOnEnter: r.marks[i].clearOnEnter,
          collapsed: r.marks[i].collapsed,
          replacedWith: r.marks[i].replacedWith.cloneNode(true)
        });
  }
}

```

``

---

<div class="post-metadata">

### Author: ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)
#### Post date: [October 27, 2015, 3:53pm UTC](https://discuss.codemirror.net/t/saving-editor-state/504/6 "2015-10-27T15:53:44Z")

</div>

That’s true, and I don’t think there’s a good wokaround for that. You could try calling `editor.foldCode` for all the starts of folded ranges that you found, instead of directly restoring the ranges.

---

<div class="post-metadata">

### Author: ![nabab](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/n/d07c76/32.png) [@nabab](https://discuss.codemirror.net/u/nabab)
#### Post date: [October 27, 2015, 4:06pm UTC](https://discuss.codemirror.net/t/saving-editor-state/504/7 "2015-10-27T16:06:58Z")

</div>

Thanks! Yes, it works fine with foldCode. I had a problem because I had nested folded parts, but reversing the markers’ array did the trick.  
Sweet, now I can save the state of an editor instance, store the info, and reopen it exactly how it was 🙂  
Thanks again, and great work!

---

<div class="post-metadata">

### Author: ![cferrell](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/c/9dc877/32.png) [@cferrell](https://discuss.codemirror.net/u/cferrell)
#### Post date: [October 31, 2015, 8:03pm UTC](https://discuss.codemirror.net/t/saving-editor-state/504/8 "2015-10-31T20:03:22Z")

</div>

nabab, can you post the code you used to get the folded parts (save state) and the code you used to refold properly.

I have been trying to do this unsuccessfully.

THANK YOU

---

<div class="post-metadata">

### Author: ![nabab](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/n/d07c76/32.png) [@nabab](https://discuss.codemirror.net/u/nabab)
#### Post date: [November 1, 2015, 9:07am UTC](https://discuss.codemirror.net/t/saving-editor-state/504/9 "2015-11-01T09:07:37Z")

</div>

I use a jQuery widget of my own, where [this.cm](http://this.cm) is the codeMirror instance. Here are my 2 methods:

```
getState: function(){
  var $$ = this,
      doc = $$.cm.getDoc(),
      marks = doc.getAllMarks(),
      res = {
        value: $$.cm.getValue(),
        selections: doc.listSelections(),
        marks: []
      };
  if ( marks.length ){
    // We reverse the array in order to start in the last folded parts in case of nesting
    for ( var i = marks.length - 1; i >= 0; i-- ){
      if ( marks[i].collapsed && (marks[i].type === 'range') ){
        res.marks.push(marks[i].find().from);
      }
    }
  }
  return res;
},

setState: function(state){
  var $$ = this,
      doc = $$.cm.getDoc();
  if ( state.value !== undefined ){
    $$.cm.setValue(state.value);
  }
  if ( state.selections ){
    $.each(state.selections, function(i, a){
      doc.setSelection(a.anchor, a.head);
    }
  }
  if ( state.marks ){
    $.each(state.marks, function(i, a){
      $$.cm.foldCode(a);
    });
  }
};

```

You’re welcome!
