如何使用标记保存和恢复内容？

我有一个CodeMirror实例有一些内容/文本和一些标记来突出显示某些区域。我想将包括标记在内的所有内容保存到一些后端服务中。然后，我想恢复内容和标记，使恢复的文档看起来像原始（包含标记）。如何使用标记保存和恢复内容？

什么是最好的方式来实现这一目标？

2013-04-24 sthomps

你可以看看我的代码。我之前做过这个。

<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>

来源

2013-04-27 22:45:47 aljordan82

我在想重新应用这些标记可能是最好的选择。 – sthomps 2013-04-28 21:53:15

一种简单的方法（假设您使用的是3.x版本）应该调用cm.getDoc()并在某处将结果缓存，而不是在新编辑器上使用cm.swapDoc(doc: CodeMirror.Doc)。

从docs：

每个编辑器与CodeMirror.Doc，其文档实例相关联。一个文档代表编辑器内容，外加一个选择，一个撤消历史和一个模式。一个文档只能与一个单个编辑器一次关联。您可以通过调用构造函数 CodeMirror.Doc(text, mode, firstLineNumber)来创建新文档。

来源

2013-04-24 08:38:59

在我来说，我并不真的需要保存整个文件（撤消历史和所有）。只需要保存/恢复文本和标记。 – sthomps 2013-04-28 21:54:06

如何使用标记保存和恢复内容？

回答

相关问题