Javascript 如何使用标记保存和恢复内容?
我有一个CodeMirror实例,它有一些内容/文本和一些标记来突出显示某些区域。我想保存所有的内容,包括一些后端服务的标记。然后,我希望恢复内容和标记,使恢复的文档看起来像原始文档(包括标记) 实现这一点的最佳方法是什么?一个简单的方法(假设您使用的是3.x版)是调用Javascript 如何使用标记保存和恢复内容?,javascript,codemirror,Javascript,Codemirror,我有一个CodeMirror实例,它有一些内容/文本和一些标记来突出显示某些区域。我想保存所有的内容,包括一些后端服务的标记。然后,我希望恢复内容和标记,使恢复的文档看起来像原始文档(包括标记) 实现这一点的最佳方法是什么?一个简单的方法(假设您使用的是3.x版)是调用cm.getDoc()并将结果缓存到某个地方,而不是在新编辑器上使用cm.swapDoc(doc:codemirr.doc) 从: 每个编辑器都与其 文件。文档表示编辑器内容,加上一个选择, 撤消历史记录和模式。文档只能与文档关联
cm.getDoc()
并将结果缓存到某个地方,而不是在新编辑器上使用cm.swapDoc(doc:codemirr.doc)
从:
每个编辑器都与其
文件。文档表示编辑器内容,加上一个选择,
撤消历史记录和模式。文档只能与文档关联
一次只有一个编辑器。您可以通过调用
codemirr.Doc(文本、模式、firstLineNumber)
constructor
一种简单的方法(假设您使用的是3.x版)是调用cm.getDoc()
并将结果缓存到某个地方,而不是在新编辑器上使用cm.swapDoc(doc:codemirr.doc)
从:
每个编辑器都与其
文件。文档表示编辑器内容,加上一个选择,
撤消历史记录和模式。文档只能与文档关联
一次只有一个编辑器。您可以通过调用
codemirr.Doc(文本、模式、firstLineNumber)
constructor
你可以看看我的代码。我不久前就这样做了
.bg{
背景:#CCC;
}
$(文档).ready(函数(){
var strSavedMarkers=$(“#savedMarkers”).val();//从textarea获取标记
var arrMarkers=JSON.parse(strSavedMarkers)
$(“#markerStyle”).html(“.bg{background:#aaaaa;}”)
var editor=CodeMirror.fromTextArea(document.getElementById(“代码”){
模式:“文本/html”,
行号:对,
onCursorActivity:function(){}
});
//从textarea获取内容
editor.setValue($(“#savedContent”).val();
applyMarkers();
$(“#标记”)。单击(函数(){
//标记选定文本
var marker=editor.markText(editor.getCursor(true)、editor.getCursor(false){
类名:“bg”
});
//获取标记的值。[ch,line,ch,line]
var tempArray=[marker.find().from.ch,marker.find().from.line,marker.find().to.ch,marker.find().to.line]
//我们将此阵列推送到ARR标记
arr.push(临时数组)
});
//编辑完成后
$(“#保存”)。单击(函数(){
JSON.stringify(arrmakers)
$(“#savedMarkers”).val(JSON.stringify(arrmakers))
});
函数applyMarkers(){
var strSavedMarkers=$(“#savedMarkers”).val();//从textarea获取标记
var arrSavedMarkers=JSON.parse(strSavedMarkers)
用于(ARRSAVEDMAKERS中的x){
var marker=arrSavedMarkers[x]
editor.markText({
“ch”:标记[0],
“行”:标记[1]
}, {
“ch”:标记[2],
“行”:标记[3]
}, {
类名:“bg”
});
}
}
});
我们需要两个文本区域,一个用于存储标记数组,另一个用于存储内容
[[20,3,40,3],[12,8,90,8]]
隐藏文本区域,从后端弹出
马修·甘巴德拉
XML开发人员指南
电脑类
44.95
2000-10-01
深入了解如何使用XML创建应用程序。
拉尔斯,金
夜雨
幻想
5.95
2000-12-16
一位前建筑师与企业僵尸、邪恶女巫以及她自己的童年斗争,成为世界女王。
科雷茨,伊娃
梅夫上升
幻想
5.95
2000-11-17
在英国的纳米技术社会崩溃后,年轻的幸存者为新的社会奠定了基础。
标记选择
保存标记和内容
您可以查看我的代码。我不久前就这样做了
.bg{
背景:#CCC;
}
$(文档).ready(函数(){
var strSavedMarkers=$(“#savedMarkers”).val();//从textarea获取标记
var arrMarkers=JSON.parse(strSavedMarkers)
$(“#markerStyle”).html(“.bg{background:#aaaaa;}”)
var editor=CodeMirror.fromTextArea(document.getElementById(“代码”){
模式:“文本/html”,
行号:对,
onCursorActivity:function(){}
});
//从textarea获取内容
editor.setValue($(“#savedContent”).val();
applyMarkers();
$(“#标记”)。单击(函数(){
//标记选定文本
var marker=editor.markText(editor.getCursor(true)、editor.getCursor(false){
类名:“bg”
});
//获取标记的值。[ch,line,ch,line]
var tempArray=[marker.find().from.ch,marker.find().from.line,marker.find().to.ch,marker.find().to.line]
//我们将此阵列推送到ARR标记
arr.push(临时数组)
});
//编辑完成后
$(“#保存”)。单击(函数(){
JSON.stringify(arrmakers)
$(“#savedMarkers”).val(JSON.stringify(arrmakers)
<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>