1

いくつかのコンテンツ/テキストと、特定の領域を強調するためのいくつかのマーカーを持つ CodeMirror インスタンスがあります。マーカーを含むすべてのコンテンツをバックエンド サービスに保存したいと考えています。次に、復元されたドキュメントが元のように見えるようにコンテンツとマーカーを復元したいと思います (マーカーが含まれています)。

これを達成する最良の方法は何ですか？

4

2 に答える 2

1

私のコードを見ることができます。私はこれを少し前にやったことがあります。

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>

于 2013-04-27T22:45:47.630 に答える
0

簡単な方法 (バージョン 3.x を使用していると仮定) は、新しいエディターcm.getDoc()で使用するよりも、結果を呼び出してどこかにキャッシュすることです。cm.swapDoc(doc: CodeMirror.Doc)

ドキュメントから：

CodeMirror.Doc各エディタは、そのドキュメントのインスタンスに関連付けられています。ドキュメントは、エディターのコンテンツに加えて、選択、元に戻す履歴、およびモードを表します。ドキュメントは、一度に 1 人の編集者にのみ関連付けることができます。CodeMirror.Doc(text, mode, firstLineNumber)コンストラクターを呼び出すことで、新しいドキュメントを作成できます 。

于 2013-04-24T08:38:59.360 に答える