如何使用標記保存和恢復內容？

我有一個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

如何使用標記保存和恢復內容？

回答

相關問題